FVS無線電鈕組元件

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FineVis 的相關功能。

1.1 版本

1.2 功能簡介

無線電鈕組元件在範本預覽時，支援透過選擇不同選項，實現聯動其他組件。效果如下圖所示：

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

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

2.1 元件內容

無線電鈕組元件可設定的內容如下圖所示：

2.1.1 內容

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

2.1.2 內容樣式

內容樣式根據「樣式範本」不同，設定項有所不同。按鈕可選樣式範本有四種：預設樣式、膠囊按鈕、聯排按鈕、圖文按鈕。

1）預設樣式：可設定選項的佈局方式和字元樣式。

佈局方式可選擇如下三種：

• 自動填充：根據選項內容自動調整列欄數

• 固定欄數：可設定展示為 X 欄，預設 1 欄展示

• 固定列數：可設定展示為 X 列，預設 1 列展示

效果如下圖所示：

2）膠囊按鈕：可設定佈局方式、字元樣式、按鈕樣式和圓角。

佈局方式同樣可選擇三種：自動填充、固定欄數、固定列數。

效果如下圖所示：

3）聯排按鈕：可設定佈局方式、字元樣式、按鈕樣式和圓角。

佈局方式可選擇自然佈局或等分佈局，不支援按欄或按列填充。

效果如下圖所示：

4）圖文按鈕：可設定佈局方式、字元樣式、按鈕樣式。

佈局方式同樣可選擇三種：自動填充、固定欄數、固定列數。

按鈕樣式中「按鈕圖示」的顯示邏輯需注意：

• 按鈕圖示與選項是一一對應的關係，按從左到右、從上到下的順序排布。

• 選中按鈕圖示，圖示資源支援為 無、我的資源、自訂上傳、線上圖片 四種設定方式。

• 支援新增多個圖示；滑鼠懸浮圖示，點選右上角刪除按鈕即可刪除。V2.5.1 之前版本不支援刪除。

• 若圖示數大於選項數，多餘的圖示不顯示；若圖示數小於選項數，或圖示資源為無，則顯示空白圖示。

效果如下圖所示：

2.2 元件互動事件

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

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

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

3.1 準備範本

1）點選設計器左上角「檔案>建立視覺化看板」。

2）建立資料庫查詢 ds1 ，輸入 SQL 查詢語句 SELECT * FROM 銷量 where 地區='${area}' ，並給參數 area 設定預設值為「華東」，即預設獲取華東地區的銷量資料。

如下圖所示：

3.2 新增無線電鈕組元件

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

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

2）綁定無線電鈕組元件資料字典，選擇類型為「資料庫表」，選擇 FRDemo 中銷量表的「地區」欄位。設定預設值為自訂字串「華東」。如下圖所示：

3.3 新增柱形圖

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

3.4 效果預覽

3.4.1 PC端

點選右上角「儲存」，點選「預覽」，當選中不同的無線電鈕時，柱形圖則顯示為對應地區的產品銷量。如 1.2 節效果所示。

3.4.2 行動端

預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：

點選下載範本：FVS無線電鈕組元件.fvs