1. 概述
适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。
1.1 版本
| 报表服务器版本 | 插件版本 |
|---|---|
| 11.0.9 | V1.9.1 |
1.2 预期效果
在制作可视化看板时，希望 Tab 页切换时，可实现与表格的数据联动。如下图所示：
1.3 实现思路
通过 JS 获取 Tab 页的标题索引，判断索引值对应的参数值，再通过 refresh 接口传参刷新组件，实现联动效果。
2. 示例
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移动端预览 ，效果如下图所示：
3. 模板下载
点击下载模板：JS实现Tab切换时数据联动.fvs
