FVS實現Tab切換時資料聯動

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

1.1 版本

1.2 預期效果

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

1.3 實現思路

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

2.1 準備資料

點選設計器左上角「檔案>建立視覺化看板」，建立一張空白看板。建立資料庫查詢 ds1，匯出 SQL 查詢語句：SELECT * FROM 地圖 。

2.2 設計Tab組件

1）新增一個 Tab 組件，重新整理增兩個標籤頁，向每個標籤頁中均拖入一個區域地圖。如下圖所示：

2）在右側 Tab 列表中分別選中地圖，分別設定地圖邊框為「江蘇省、山東省、浙江省」，GIS圖層均設定為「標準>無」。

如下圖所示：

注：本文主要示範 Tab 切換時的聯動，所以這裏地圖無需綁定資料。

3）將標籤頁也分別重新命名為「江蘇省、山東省、浙江省」，再設定 Tab 欄按鈕佈局為「等分佈局」。如下圖所示：

2.3 新增模板參數

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

點選「範本>範本參數」，新增一個參數並重新命名為 area ，設定預設值為「江蘇省」，對應第一個 Tab 頁面中的地圖邊框。

2.4 設計表格

1）拖入一個表格組件，並調整其大小和位置，點選右側「編輯組件」進入編輯介面。如下圖所示：

2）將 pid 、銷售額欄位分別拖入 A1、A2 儲存格，並設定其字體、大小、顏色等。

再選中 A2 儲存格，設定銷售額的「資料設定」為「匯總>求和」，左父格設定為「自訂> A1 」。

如下圖所示：

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

2.5 添加事件

選中 Tab 組件，將輪播間隔時間設定為 3000 毫秒，新增一個 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.6 效果預覽

2.6.1 PC端

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

2.6.2 行動端

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

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