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