1. 概述
適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FineVis 的相關功能。
1.1 版本
| 報表伺服器版本 | 插件版本 | 功能變動 |
|---|---|---|
| 11.0.6 | V1.x | V1.x 版本文檔請參考：FVS元件組件歷史版本 |
| 11.0.16 | V2.0.1 | 元件組件新增樣式設定，可實現更豐富的樣式效果，詳情參見 3.5 節 |
| 11.0.22 | V2.8.0 | 元件名稱與參數分離，新增綁定參數邏輯，詳情參見 3.1 節 |
1.2 應用場景
在報表的具體應用中，經常使用「元件」來實現不同的功能，在普通報表、決策報表中應用廣泛。
在 FVS 中，元件是作為組件直接新增到分頁中使用的。同樣支援組件屬性：FVS組件動畫 、FVS組件樣式屬性 。
本文將主要介紹「元件」在 FVS 中的其他通用屬性
2. 元件類型
| 元件類型 | 簡介 |
|---|---|
| FVS正文框元件 | 範本預覽時可在正文框中手動輸入值，透過參數聯動其他組件 |
| FVS日期時間元件 | 範本預覽時可選擇日期時間，透過參數聯動其他組件 |
| FVS下拉框元件 | 範本預覽時可下拉選擇選項，透過參數聯動其他組件 |
| FVS下拉複選框元件 | 範本預覽時可下拉選擇選項，支援多選，透過參數聯動其他組件 |
| FVS無線電鈕組元件 | 範本預覽時可無線電鈕選項，透過參數聯動其他組件 |
| FVS複選按鈕組元件 | 範本預覽時可多選按鈕選項，透過參數聯動其他組件 |
| FVS下拉樹元件 | 在範本預覽時，下拉可展現具有多層樹狀結構的資料，並透過參數聯動其他組件 |
| FVS檢視表樹元件 | 範本預覽時，可透過檢視表樹元件展現具有多層樹狀結構的資料，並透過參數聯動其他組件 |
| FVS查詢按鈕 | 使用查詢按鈕聯動元件，可實現點選查詢按鈕，再觸發元件查詢 |
3. 功能說明
3.1 綁定參數
1）當需要與其他組件實現參數聯動時，需要將「內容>綁定參數」的值設定為與參數名相同。
支援已有參數的綁定，也可以直接輸入新值以建立新的參數。
例如參數「area」表示地區，那麼「綁定參數」的值也需要設定為「area」。如下圖所示：
2）同一分頁中，不支援綁定同一參數的元件；不同分頁中，支援綁定同一參數。
注1：V2.8.0 之前版本，組件名稱設定位於「內容>名稱」，用於與參數綁定。V2.8.0 及之後版本，組件名稱在「組件>組件屬性>名稱」中設定，僅用於設定組件名稱。
注2：建議根據綁定參數自訂組件名稱，便於後續尋找。
3.2 參數查詢邏輯
1）在 FVS 中，元件在修改值後自動觸發查詢，與元件綁定參數相關的組件均會重新整理，且對整個範本所有分頁生效。
例如 頁面1、頁面2 均存在圖表引用了 area 參數，那麼在 頁面1 中改變下拉框元件參數值，頁面1 和 頁面2 中圖表均隨之變化。
如下圖所示：
2）不同分頁中，若存在「綁定參數」相同的元件
在範本預覽時，任意分頁上元件值改變，其他分頁的綁定相同參數的元件也隨之變化。
在範本編輯介面中，不同分頁中綁定相同參數的元件預設值會相互改寫，以最後操作的元件預設值為準。
例如：
頁面1、頁面2 均有一個正文框元件，「綁定參數」均設定為「area」。給 頁面1 的正文框元件設定預設值為「華東」，頁面2 中的正文框元件預設值也顯示為「華東」；在 頁面2 將元件預設值修改為「華北」，頁面1 中元件預設值也將變為「華北」。
預覽時同理。
3.3 元件隱藏或顯示
1）元件的顯示或隱藏可以透過「組件圖層」實現。如下圖所示：
2）元件的顯示或隱藏也可以透過 JavaScript 或 「顯示/隱藏」點選事件，結合組件名稱實現。
3.4 元件事件
FVS 元件目前支援的事件包括：初始化後事件、載入結束事件、點選事件。
| 點選事件 | 初始化後事件 | 編輯結束事件 | 組件 |
|---|---|---|---|
| 支援 | 支援 | 不支援 | 無線電鈕組元件、複選按鈕組元件 |
| 不支援 | 支援 | 支援 | 正文框元件、日期時間元件、下拉框元件、下拉複選框元件 |
FVS 支援以下元件API，更多內容可參考文檔：元件通用 。
用法參考決策報表 body 中元件的用法，但需要將獲取物件的API _g() 換成 duchamp 。
| API | 說明 | 範例 |
|---|---|---|
| getValue | 獲取元件的實際值 | duchamp.getWidgetByName("元件名稱").getValue(); |
| getText | 獲取元件的顯示值 | duchamp.getWidgetByName("元件名稱").getText(); |
| setValue | 設定元件的值 | duchamp.getWidgetByName("元件名稱").setValue('正文'); |
| setVisible | 設定元件可見/不可見 | duchamp.getWidgetByName("元件名稱").setVisible(false); |
| isVisible | 傳回元件狀態是可見/不可見 傳回 true 表示可見 傳回 false 表示不可見 | duchamp.getWidgetByName("元件名稱").isVisible(); |
| setEnable | 設定元件可用/不可用 | duchamp.getWidgetByName("元件名稱").setEnable(false); |
| isEnabled | 傳回元件狀態是可用/不可用 傳回 true 表示可用 傳回 false 表示不可用 | duchamp.getWidgetByName("元件名稱").isEnabled(); |
| reset | 重置元件、清空元件的內容 | duchamp.getWidgetByName("元件名稱").reset(); |
| setWaterMark | 新增水印文字（僅支援有輸入框的元件） | duchamp.getWidgetByName("元件名稱").setWaterMark('我是水印'); |
更多內容請參考文檔：FVS支援的JSAPI場景 。
3.5 元件樣式
3.5.1 單獨元件樣式
V2.0.1 版本所有元件新增「內容樣式」，不同的元件內容樣式也有些許不同，可到具體文檔查看詳情。
最基礎的字元樣式設定所有元件均支援，例如下圖所示：
例如無線電鈕組元件，還支援設定樣式範本，如下圖所示：
另外 V2.0.1 版本中，組件邊框背景支援了「邊框線」設定，可設定邊框線類型、粗細及顏色。如下圖所示：
3.5.2 範本整體元件樣式
V2.6.1 及之後版本，FVS元件樣式可透過 FVS範本樣式 設定範本統一的元件文字、圖示、高亮、邊框線等樣式。
V2.6.1 之前版本，在頂部菜單欄「範本>範本主題」中，僅支援選擇幾種類型主題的固定樣式。如下圖所示：
