統一切換輪播圖表API

1.1 版本

1.2 預期效果

某些場景下，需要讓一張報表內的多個輪播圖表同時切換。那麼該如何實現呢？效果如下圖所示：

1.3 實現思路

按鈕新增點選事件，透過 JS 腳本呼叫API統一切換輪播圖表，切換成功後，所有的輪播圖表的計時器計時歸 0。

注1：該API不支援擴展圖表。

注2：該API不支援行動端。

注3：FVS不適用本文方法，類似效果可參考文檔 FVS實現多個Tab組件同步切換

注4：決策報表和普通報表設定方法和程式碼相同

2.1 準備資料

點選設計器左上角「檔案>建立普通報表」，建立資料集 ds1，資料庫查詢語句如下：SELECT * FROM 銷量

2.2 插入圖表

1）合併兩片儲存格區域，分別被選儲存格後點選上方工具欄插入圖表按鈕，各插入一個「餅圖」。如下圖所示：

2）點選「筆型圖示」進入元件面板，將一個按鈕元件拖曳到下方空白處。如下圖所示：

2.3 設定餅圖

1）給兩個餅圖都新增一個「等弧玫瑰圖」，如下圖所示：

2）所有的預設餅圖和等弧玫瑰圖綁定資料的方法一致，如下圖所示：

3）所有的餅圖和玫瑰圖取消勾選「標題可見」，如下圖所示：

2.4 設定切換屬性

圖表切換方式為「輪播」，顯示輪播箭頭，時間間隔設定為 10 秒。如下圖所示：

2.5 設定同步切換

1）進入元件面板，點選右側「組件設定>para>屬性」，取消勾選「點選查詢前不顯示報表內容」，如下圖所示：

2）選中按鈕元件，設定元件大小，更改按鈕名稱為「同步切換」，自訂初始背景為「藍色」，如下圖所示:

3）選中按鈕元件，新增一個點選事件，輸入 JavaScript 程式碼：

VanCharts.unifiedSwitchCarouselChart(1); //VanCharts 指的是全局圖表物件，無需再獲取單獨圖表物件

如圖所示：

2.6 效果預覽

儲存範本，點選「分頁預覽」，如圖 1.2 節所示:

點選下載範本：多圖實現統一切換.cpt