适用场景：安装了「FVS大屏编辑模式」插件的用户，可参考本文了解 FVS 模板的相关功能。

1.1 版本

1.2 预期效果

在大屏报表中，希望轮播器的 Tab 页面切换时，可实现与表格的数据联动。如下图所示：

1.3 实现思路

通过 JS 获取轮播器中每个 Tab 页面的轮播标题，转换为参数值，再通过控件进行界面传参，实现联动效果。

2.1 准备数据

点击设计器左上角「文件>新建大屏报表」，新建数据库查询 ds1，输出 SQL 查询语句：SELECT * FROM 地图 。

2.2 设计模板

2.2.1 设计轮播器

1）新增一个 轮播器，并且重命名为「轮播器」，如下图所示：

2）接着向轮播器中拖入三个区域地图。如下图所示：

3）分别设置地图：点击右侧轮播列表中的地图进入编辑状态，将三个地图的边界分别设置为「江苏省、山东省、浙江省」，GIS图层均设置为「标准>标准」。

如下图所示：

注：本文主要演示 Tab 切换时的联动，所以这里地图不绑定数据。

4）选中轮播器，开启自动轮播，轮播间隔时间为 3000 毫秒。如下图所示：

2.2.2 添加模板参数

为了实现联动，需添加一个模板参数。

点击「模板>模板参数」，新增一个参数并重命名为 area ，设置默认值为「江苏省」，对应第一个 Tab 页面中的地图边界。

2.2.3 设计表格

1）拖入一个 表格，并调整其大小和位置。如下图所示：

2）点击右侧界面的「编辑组件」进入编辑界面，将 pid 、销售额字段分别拖入 A1、A2 单元格，并设置其字体、大小、颜色等。

再选中 A2 单元格，设置销售额的「数据设置」为「汇总>求和」，左父格设置为「自定义> A1 」。

如下图所示：

3）双击 A1 单元格，设置过滤条件为 pid 等于参数 $area ，则会根据参数过滤显示数据。如下图所示：

2.2.4 添加控件

为了配合 JS 和数据集传参实现联动，需添加一个控件。

1）往模板中拖入一个 下拉框控件 ，将控件名称设置为 area ，即可与参数 $area 绑定 。设置不透明度为 0 ，则预览时不会显示该控件。

如下图所示：

2）选中控件，设置其数据字典为 ds1 数据集的 pid 字段。如下图所示：

2.2.5 添加事件

选中轮播器，添加一个「标签切换」事件。输入 JavaScript 代码如下：

var a  = duchamp.getWidgetByName("轮播器").getShowIndex(); //获取轮播器当前页面索引
if(a==0){
	area='江苏省';
	}
else if(a==1){
    area='山东省';
    }
else if(a==2){
    area='浙江省';
    }  	
duchamp.getWidgetByName("area").setValue(area); //给控件赋值

如下图所示：

2.3 效果预览

2.3.1 PC 端

点击模板右上角「保存」按钮，再点击「预览」。预览后的效果如 1.2 节所示。

2.3.2 移动端

预览方式请参考 FVS移动端预览 ，效果如下图所示：

点击下载模板：JS实现轮播器切换时进行数据联动.fvs