FVS擴展組件

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

1.1 版本

1.2 應用場景

「擴展組件」結合標題組件或富正文組件的 動態值 功能，可根據資料集欄位動態生成一系列指標卡，每個指標卡展示不同的資料。

1.3 功能簡介

「擴展組件」是一種容器，當前僅支援拖入「標題、富正文和圖片」三種組件以及由這三種組件組成的組合。

拖入組件後，根據「擴展依據」進行擴展（擴展依據必須是動態值中的欄位來源），實現快速生成多個組件。

注：本文僅為大家介紹「擴展組件」特有功能，其他屬性不贅述。

擴展組件不支援組件交互事件。

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

組件屬性請參見：FVS組件樣式屬性 。

2.1 新增擴展組件

點選或拖曳組件區「容器>擴展組件」，即可將擴展組件新增到畫布中。

2.2 擴展範本

擴展組件中存在一個預設的「擴展範本」，用於承載組件/組合。

一個擴展組件僅有一個「擴展範本」，不支援增加，刪除即連同擴展組件一起刪除。

1）拖入組件/組合規則如下：

• 僅支援拖入標題、富正文、圖片組件，以及這三種組件組成的組合。
  

• 直接拖曳組件區或頁面中組件/組合到「擴展範本」上方，出現提示「釋放進入擴展範本」時鬆開滑鼠即可。

• 拖入組件/組合時，組件/組合大小不變。

• 釋放時，組件位置若超出擴展範本左/上邊框，則組件拖入後自動對齊左/上邊框；其餘位置則以組件釋放位置為準。

• 若組件超出擴展範本右/下邊框，則截斷顯示。

如下圖所示：

• 也支援在組件圖層列表中，拖曳組件圖層順序移入擴展範本，組件位置預設在擴展範本中心位置。如下圖所示：

2）移出組件/組合方式如下：

• 直接拖曳組件到擴展組件外，出現提示「釋放移出擴展範本」時鬆開滑鼠即可。此時移出的組件位置以釋放位置為準。

• 在組件圖層列表或擴展組件列表中，直接拖曳組件圖層順序移出擴展組件層級即可。此時移出的組件位置保持不變。

• 在擴展組件列表中，懸浮組件，點選「更多>移出」即可 。此時移出的組件預設顯示在擴展組件右側。

如下圖所示：

3）「擴展範本」支援設定名稱、大小。啟動調整鎖定時，調整擴展範本大小，內部組件大小也會等比例變化。

注：擴展範本拖曳大小僅支援從右/下方拖曳。

2.3 擴展組件內容設定

擴展組件支援設定佈局方式、組件間距和擴展依據。

1）佈局方式：支援選擇「固定列數」或「固定行數」，根據「擴展範本」大小顯示，超出擴展組件大小時，可捲動查看。

2）組件間距：支援分別設定「列距」和「欄距」。

3）擴展依據：

• 提供基於當前擴展組件內「動態值」來源表作為選擇；若當前擴展組件沒有可用的資料集，提示暫無資料。

• 設定擴展依據後，根據資料集的資料條數定義擴展的組件數量，含有該資料集的動態值，根據擴展順序依次按行取值。

• 無動態值或動態值為公式的組件，擴展時內容不變；動態值為資料集欄位，但不符合擴展依據的組件，按照擴展的組件數量依次取值。

• 設定過擴展依據，即使後續擴展組件內不再包含該依據，之前設定的擴展也不受影響，直到重新選擇擴展依據。

注：擴展出的組件沒有實體，但仍然繼承擴展範本內組件的所有交互能力。

3.1 建立範本

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

2）在「建立空白看板」Tab 中，可自訂範本名稱、畫布大小，以及選擇範本樣式。

3）點選「建立看板」。

3.2 準備資料

新增資料庫查詢 ds1，輸入 SQL 查詢語句：SELECT 產品,sum(銷量) as 銷量 FROM 銷量 group by 產品 。

SQL 的意思為：按照產品分組，求出每個產品的銷量總和，然後傳回每個產品的名稱以及該產品的銷量總和。

3.3 設計指標卡

3.3.1 製作指標卡背景

1）點選組件區「媒體>圖片」，將圖片組件新增到畫布中。

2）將下面這張圖片另存到本地。

3）選中圖片組件，圖片類型選擇「自訂上傳」，上傳儲存的圖片，選擇該圖片作為指標卡背景。

3.3.2 設定產品名稱動態值

1）點選組件區「文字>標題」，將標題組件新增到畫布中，根據指標卡背景設定合適的位置和大小。

2）標題內容選擇「動態值」，點選「編輯動態值」按鈕，彈出「編輯動態值」介面。

3）動態值來源為「資料集」，選擇 ds1 資料集，產品欄位。

4）點選「確定」完成編輯。根據實際情況自行設定內容樣式，例如字體、顏色等等。

3.3.3 設定產品銷量動態值

1）複製貼上 3.3.2 節設定好的標題組件，點選「編輯動態值」，彈出「編輯動態值」介面。

2）將欄位修改為「銷量」。

3）新增「條件樣式」，點選「條件設定」，設定條件為「值小於字串 2000」，點選「確定」。

4）條件樣式修改顏色為紅色。最後點選「確定」。

3.3.4 組合組件

在畫布中框選製作好的組件，點選畫布上方工具欄的「組合」按鈕，將其組合為一個分組。

3.4 設定指標卡擴展

1）點選組件區「容器>擴展組件」，將擴展組件新增到畫布中。

2）選中組合，拖入擴展組件的「擴展範本」中。

3）選中「擴展範本」，根據內容調節範本大小。

4）選中「擴展組件」，佈局方式為固定列數 2 列，擴展依據選擇資料集 ds1 。

此時可以看到擴展出了 5 個不同內容的指標卡，且產品銷量小於 2000 時，值顯示為紅色。

3.5 效果預覽

3.5.1 PC 端

儲存範本，點選「預覽」。效果如下圖所示：

3.5.2 行動端

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

點選下載範本：FVS實現擴展指標卡.fvs