FVS實現多個Tab組件同步切換

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

1.1 版本

1.2 場景介紹

在頁面中有多個Tab組件時，希望實現 Tab 頁面的同步切換，如下圖所示：

點選左側 Tab 頁面時，右側 Tab 頁面自動同步切換。

1.3 實現思路

透過 getShowIndex() 獲取Tab組件切換後當前標簽頁的標題索引，進而同步切換另一個Tab組件頁面。

2.1 建立範本

點選設計器左上角「檔案>建立視覺化看板」，建立一張空白看板，可自訂名稱和尺寸。如下圖所示：

2.2 設定 Tab 組件

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

2）分別點選兩個 Tab 組件右上角的「建立標籤頁」為每個組件重新整理增兩個標籤頁。如下圖所示：

3）選中 Tab1 組件的三個標籤頁，分別設定標題內容為：柱形圖、折線圖、餅圖。如下圖所示：

注：「標題內容」為 V2.10.0 版本新增，支援重複、為空。歷史範本的「標題內容」取原「名稱」的值。

4）同理，選中 Tab2 組件的三個標籤頁，設定為與 Tab1 組件的對應標籤頁相同的標題內容。

5）選中 Tab1 組件，佈局方式設定為「等分佈局」。如下圖所示：

6）同理，Tab2 組件的佈局方式也設定為「等分佈局」。

7）分別向 Tab1 、Tab2 組件的內的標籤頁中拖入相應的圖表。以 Tab1 組件為例，如下圖所示：

2.3 新增事件

選中右側的 Tab1 組件，點選交互，點選「新增事件>標籤切換>JavaScript」，輸入 JavaScript 程式碼。如下圖所示：

JavaScript 程式碼如下所示：

index=duchamp.getWidgetByName('Tab1_頁面1').getShowIndex(); //獲取Tab1_頁面1當前Tab頁索引
duchamp.getWidgetByName('Tab2_頁面1').showCardByIndex(index); //設定Tab2_頁面1展示第 index 個Tab頁

2.4 效果預覽

2.4.1 PC 端

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

2.4.2 行動端

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

點選下載範本：FVS實現多TAB同步切換.fvs