FVS實現Tab切換時資料聯動

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

1.1 版本

1.2 預期效果

在製作視覺化看板時，希望 Tab 頁切換時，可實現與表格的資料聯動。如下圖所示：

1.3 實現思路

透過 JS 獲取 Tab 頁的標題索引，判斷索引值對應的參數值，再透過 refresh API傳參重新整理組件，實現聯動效果。

2.1 建立範本

1）點選設計器左上角「檔案>建立視覺化看板」，建立一張空白視覺化看板。如下圖所示：

2）根據實際情況自訂視覺化看板名稱、畫布大小，範本樣式，最後點選「建立看板」。如下圖所示：

2.2 新增並設計 Tab 組件

1）點選範本左上角的「其他>Tab」，將 Tab 組件新增至畫布中。如下圖所示：

2）點選 Tab 組件右上角的「+」按鈕重新整理增兩個標籤頁。如下圖所示：

3）三個標籤頁分別拖入一個區域地圖，以標籤頁1爲例。如下圖所示：

4）右側 Tab 列表中分別選中區域地圖，設定地圖邊框為「江蘇省」、「山東省」、「浙江省」，GIS圖層均設定為「標準>標準」。以 區域地圖1_頁面1 為例，如下圖所示：

注：本文主要示範 Tab 切換時的聯動，故此處地圖無需綁定資料。

5）三個標籤頁的標題內容也分別設定為「江蘇省」、「山東省」、「浙江省」。以 標籤頁1_Tab1_頁面1 為例，如下圖所示：

6）設定 Tab 組件的佈局方式為「等分佈局」。如下圖所示：

2.3 準備資料

建立資料庫查詢 ds1，輸入 SQL 查詢語句：SELECT * FROM 地圖 。如下圖所示：

2.4 新增範本參數

為了實現聯動，需新增一個範本參數。

點選菜單欄「範本>範本參數」，新增一個參數並重新命名為 area ，設定預設值為「江蘇省」，對應 標籤頁1 中的江蘇省地圖邊框。如下圖所示：

2.5 新增並設計表格

1）點選範本左上角的「其他>表格」，將表格組件新增至畫布中，並調整位置和大小。如下圖所示：

2）選中表格組件，點選右側的「編輯組件」按鈕進入組件編輯介面。如下圖所示：

3）將 ds1 中的 pid 、銷售額 欄位分別拖入 A1 、A2 儲存格。如下圖所示：

4）選中 A2 儲存格，點選右側的「儲存格元素」，設定銷售額的「資料設定」為「匯總>求和」。如下圖所示：

5）選中 A2 儲存格，點選右側「儲存格屬性」，左父格設定為「自訂> A1 」。如下圖所示：

6）雙擊 A1 儲存格，設定過濾條件為 pid 等於參數  $area ，則會根據參數過濾顯示資料。如下圖所示：

7）點選左上角「傳回視覺化看板」傳回視覺化看板介面。

2.6 新增事件

選中視覺化看板右側 Tab 列表中的「Tab1_頁面1」，點選「交互>新增事件>標籤切換」，新增一個 JavaScript 執行動作。如下圖所示：

JavaScript 程式碼如下：

var a  = duchamp.getWidgetByName("Tab1_頁面1").getShowIndex(); //獲取Tab當前頁索引
if(a==0){
	area='江蘇省';
	}
else if(a==1){
    area='山東省';
    }
else if(a==2){
    area='浙江省';
    }  	
duchamp.getWidgetByName("表格1_頁面1").refresh({area:area}); //傳參給表格組件並重新整理

2.7 效果預覽

2.7.1 PC 端

點選範本右上角「儲存」按鈕，再點選「預覽」。預覽後的效果如 1.2 節所示。

2.7.2 行動端

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

點選下載範本：FVS實現Tab切換時資料聯動.fvs