1. 概述编辑
1.1 版本
| 报表服务器版本 | 功能变动 |
|---|---|
| 11.0 | - |
1.2 预期效果
某些场景下,需要让一张报表内的多个轮播图表同时切换。那么该如何实现呢?效果如下图所示:

1.3 实现思路
按钮添加点击事件,通过 JS 脚本调用接口统一切换轮播图表,切换成功后,所有的轮播图表的计时器计时归 0。
| 接口 | 说明 |
|---|---|
| chart.unifiedSwitchCarouselChart(direction) | direction 为可选参数,表示图表切换的方向 1 表示切换到下一张图表,-1 表示切换到上一张图表 |
注1:该接口不支持扩展图表。
注2:该接口不支持移动端。
注3:FVS 可视化看板详情可见: FVS实现多个轮播器同步切换 。
2. 普通报表示例编辑
2.1 准备数据
新建普通报表,新建数据库查询 ds1,输入 SQL 查询语句:SELECT * FROM 销量
2.2设计报表
2.2 插入图表
1)合并两片单元格区域,分别选中单元格后点击上方工具栏插入图表按钮,插入一个饼图。如下图所示:

2)添加一个按钮控件,点击笔型图标进入控件面板,再将按钮控件拖拽到下方空白处。如下图所示:

2.3 设置饼图
1)这 2 个饼图都新增一个「等弧玫瑰图」,作为图表2,如下图所示:

2)所有的默认饼图和等弧玫瑰图绑定数据的方法一致,如下图所示:

2.4 设置切换属性
图表切换方式为「轮播」,显示轮播箭头,时间间隔设置为 10 秒。如下图所示:

2.5 设置同步切换
1)点击笔型图标进入控件面板,点击右侧组件设置,选中para控件点击属性,取消勾选点击查询前不显示报表内容和使用常用参数组合 ,如图所示:

2)选中按钮控件,设置控件大小,更改按钮名称为同步切换,如图所示:

3)选中按钮控件,添加一个点击事件,输入 JavaScript 代码:
VanCharts.unifiedSwitchCarouselChart(1); //VanCharts 指的是全局图表对象,无需再获取单独图表对象
如图所示:

2.6 效果预览
保存模板,点击「分页预览」,如图所示:

3.决策报表示例编辑
3.1 准备数据
和示例一相同
3.2 设计报表
将 1 个按钮控件和 2 个饼图拖到决策报表中,如下图所示:

3.3 设置饼图
1)这 2 个饼图都新增一个「等弧玫瑰图」,作为图表2,如下图所示:

2)所有的默认饼图和等弧玫瑰图绑定数据的方法一致,如下图所示:

3.4 设置切换属性
图表切换方式为「轮播」,显示轮播箭头,时间间隔设置为 10 秒。如下图所示:

3.5 设置同步切换
选中按钮控件,添加一个点击事件,输入 JavaScript 代码:
VanCharts.unifiedSwitchCarouselChart(1); //VanCharts 指的是全局图表对象,无需再获取单独图表对象
步骤如下图所示:

3.6 效果预览
保存模板,点击「PC端预览」,效果如 1.2 预期效果所示。

