FVS下拉框元件

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

1.1 版本

1.2 功能簡介

下拉複選框元件在範本預覽時，可下拉選擇單個或多個選項，透過參數聯動其他組件。效果如下圖所示：

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

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

2.1 元件內容

下拉複選框元件可設定的內容如下圖所示：

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

2.1.2 內容樣式

字元樣式：支援對元件中顯示的文字進行樣式設定，例如字體、字號、顏色等

元件圖示的大小同樣受到影響，如下圖所示：

注1：對下拉選項中的字體無效，下拉選項字元樣式僅受 FVS範本樣式 影響。

注2：修改字元顏色後，再設定 FVS範本樣式 ，字元顏色會跟隨主題變化，需重新設定。

注3：元件圖示的顏色可以在範本主題樣式中設定。

V2.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）綁定下拉框元件資料字典，選擇類型為「資料庫表」，選擇 FRDemoTW 中銷量表的「銷售員」欄位。

為了匹配 SQL 中的 in 語句，這裏設定元件回傳值為「字串」，手動輸入分隔符為 ',' 。如下圖所示：

3）若想在下拉框中實現多選，需勾選「開啟多選」、設定「回傳值」。

為了匹配 SQL 中的 in 語句，這裏設定元件回傳值為「字串」，手動輸入分隔符為 ',' 。設定預設值為「孫林」。

注：若預設值要設定多個選項，需與回傳值類型格式保持一致，例如本例預設值可設定為「孫林','金士鵬」。

如下圖所示：

3.3 新增折線圖

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

3.4 效果預覽

點選右上角「儲存」，點選「預覽」，下拉選擇不同選項，折線圖顯示對應銷售員的產品銷量。

若不勾選「開啟多選」，效果如下圖所示：

若勾選「開啟多選」，效果如下圖所示：

3.4.2 行動端

不勾選「開啟多選」的效果如下圖所示：

勾選「開啟多選」的效果如下圖所示：

點選下載範本：FVS下拉框元件範例.fvs