FVS組件聯動及組件動畫應用

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

1.1 版本

1.2 功能簡介

範本場景：某公司的銷售經理給高層領導彙報一年的業績，他先介紹全國業務，主要從利潤額，銷售額，回款額，稅費這四個維度介紹。然後點選地圖再鑽取到某重點省份，介紹該省份的業務，主要從地區目標達成率，地區銷售額，利潤額等維度介紹詳細情況。

本文將主要介紹範本中點選地圖傳參和分頁間組件動效的實現過程。

1.3 預期效果

• 範本中分頁切換採用組件動效，組件向四周進入和退出。

• 範本中地圖與表格、圖表、標題進行聯動，點選地圖中某個城市，地圖跳轉到第二個分頁，表格、圖表、標題展示該城市的資料。

以江蘇省為例，點選頁面1地圖上的江蘇省，跳轉到頁面2，顯示江蘇省資料。

「頁面1」和「頁面2」的分頁切換採用組件動效，向四周退出和進入。

說明：為了更清晰的說明範本製作方法，現用測試範本進行講解，預期效果如下圖：

2.1 資料集準備

建立 FVS 視覺化看板，準備兩個資料集ds1,ds2

ds1: SELECT * FROM 地圖

ds2: SELECT * FROM 地圖 where 1=1 ${if(len(province) = 0 || province=='中國'," and pid is null","and pid='"+province+"'")} order by 利潤額 desc

其中 ds2 資料集定義了參數 province，當 province 為空或為中國時，取出省份的匯總資料並按利潤額降冪排序；若 province 不為空，那麼用 pid 欄位值匹配輸入的省份，取出對應的省份各個市的資料，並按利潤額降冪排序。

如下圖所示：

2.2 組件準備

頁面1：拖入「區域地圖」組件，綁定資料集ds1。

頁面2：拖入「直條圖」、「標題」、「表格」組件。其中，「直條圖」、「標題」綁定資料集 ds2，表格採用資料集 ds1，具體操作會在 2.3 節介紹

2.3 傳參設定

2.3.1 地圖設定

選中區域地圖組件，點選互動，新增分頁跳轉事件和組件聯動事件，效果如圖所示。

選擇被鑽取的頁面為「觸發物件」：

設定全局聯動的參數 $province，參數值是地圖組件的「區域名」：

2.3.2 表格設定

點選表格進入編輯狀態，效果如下圖所示：

為了與地圖產生聯動，多個儲存格需要新增過濾條件，具體設定如下表：

以 A2 儲存格為例，雙擊 A2 儲存格彈出資料列設定框，步驟如下圖所示：

2.3.3 標題設定

插入公式： if(len($province) = 0 || $province = "中國", "全國資料", $province + "銷售資料")

此公式表示當 province 為空或等於「中國」時，標題顯示“全國資料”，當參數不為空時，標題顯示對應省份+銷售資料。

2.3.4 直條圖設定

直條圖無需額外設定，綁定資料集 ds2 即可。

2.4 組件動效設定

以區域地圖為例，點選「動畫>動效設定」，設定為向右進入，向左退出。如下圖所示：

2.5 效果預覽

依照以上步驟，可以實現完整範本的效果，背景素材可使用FVS內建素材。

測試範本：FVS地圖傳參演示範本.fvs