FVS元件組件

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

1.1 版本

1.2 應用場景

在報表的具體應用中，經常使用「元件」來實現不同的功能，在普通報表、決策報表中應用廣泛。

在 FVS 中，元件是作為組件直接新增到分頁中使用的。同樣支援組件屬性：FVS組件動畫 、FVS組件樣式屬性 。

本文將主要介紹「元件」在 FVS 中的其他通用屬性

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 。

更多內容請參考文檔：FVS支援的JSAPI場景 。

3.5 元件樣式

3.5.1 單獨元件樣式

V2.0.1 版本所有元件新增「內容樣式」，不同的元件內容樣式也有些許不同，可到具體文檔查看詳情。

最基礎的字元樣式設定所有元件均支援，例如下圖所示：

例如無線電鈕組元件，還支援設定樣式範本，如下圖所示：

另外 V2.0.1 版本中，組件邊框背景支援了「邊框線」設定，可設定邊框線類型、粗細及顏色。如下圖所示：

3.5.2 範本整體元件樣式

V2.6.1 及之後版本，FVS元件樣式可透過 FVS範本樣式 設定範本統一的元件文字、圖示、高亮、邊框線等樣式。

V2.6.1 之前版本，在頂部菜單欄「範本>範本主題」中，僅支援選擇幾種類型主題的固定樣式。如下圖所示：