适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。

1.1 版本

1.2 预期效果

在制作可视化看板时，希望 Tab 页切换时，可实现与表格的数据联动。如下图所示：

1.3 实现思路

通过 JS 获取 Tab 页的标题索引，判断索引值对应的参数值，再通过 refresh 接口传参刷新组件，实现联动效果。

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移动端预览 ，效果如下图所示：

点击下载模板：JS实现Tab切换时数据联动.fvs