FVS複選按鈕組元件

适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。

1.1 版本

1.2 功能簡介

複選按鈕組元件在範本預覽時，支援透過選擇不同選項，透過參數聯動其他組件。效果如下圖所示：

組件動畫請參見：FVS組件動畫 。

組件樣式請參見：FVS組件樣式屬性 。元件名稱在「內容」中設定。

2.1 元件內容

複選按鈕組元件可設定的內容如下圖所示：

各設定項的詳細介紹如下表所示：

2.2 元件交互事件

點選「交互>新增事件」，可新增 JavaScript 事件實現更多效果。複選按鈕組元件支援「初始化後事件」和「點選事件」。如下圖所示：

點選具體的某一個事件，會彈出 JavaScript 事件設定框。如下圖所示：

注：關於 FVS 支援的 JavaScript 可參考文檔 FVS大屏支援的JSAPI場景 。

3.1 準備範本

1）點選設計器左上角「檔案>建立大屏報表」。

2）建立資料庫查詢 ds1 ，輸入 SQL 查詢語句 SELECT * FROM 銷量 where 銷售員 in ('${spe}') ，並給參數 spe 設定預設值為「孫林」，即預設取出孫林的銷量資料。

如下圖所示：

3.2 新增無線電鈕組元件

1）點選組件區「元件>複選按鈕組」，將元件新增到頁面中。

在右側配置面板「內容」中將名稱修改為「spe」，即可與資料集中定義的 spe 參數匹配。如下圖所示：

2）綁定複選按鈕組元件資料字典，選擇型別為「資料庫表」，選擇 FRDemo 中銷量表的「銷售員」欄位。如下圖所示：

3）為了匹配 SQL 中的 in 語句，需要將元件傳回值設定為「字串」，手動輸入分隔符為 ',' 。

設定分隔符後，再設定預設值，需保持相同格式。例如本例要設定多個預設值，則需要使用分隔符 ',' 隔開，輸入「孫林','金士鵬」。

然後根據情況設定佈局。如下圖所示：

3.3 新增折線圖

點選組件區「圖表>折線圖」，將組件新增到頁面中，給折線圖綁定含有 spe 參數的資料集中資料。如下圖所示：

3.4 效果預覽

3.4.1 PC 端

点击右上角「保存」，点击「预览」，下拉选择不同选项，折线图则显示对应销售员的产品销量。如 1.2 节效果所示。

3.4.2 移动端

预览方式请参考 FVS移动端预览 ，效果如下图所示：

點選下載範本：FVS複選按鈕組元件示例.fvs