微信公众号：次世代数据技术 关注可了解更多的教程。问题或建议，请公众号留言或联系本人; 如果您有报表开发需求或者定制化功能开发,也可以联系本人; 微信号：weibw162

本教程视频讲解可以关注本人B站进行观看：次世代数据技术 同时，您也可以在抖音及微信视频号平台搜索次世代数据技术进行观看。

一、需求描述 ​

在使用决策报表开发大屏应用时，有些场景下希望我们可以在图表上增加一些动效，比如图表的定时刷新，或者图表的切换。这些功能都有很多成熟的案例供大家参考，今天给大家介绍另一种比较常用的动效，那就是图表内的系列轮播。

注1：移动端暂未做测试，不保证移动端可以完整使用。注2：本文涉及到的技术及流程均仅在FineReport 11.0 版本进行实际验证，如果您在使用过程中出现问题可以联系本作者。

二、实现步骤 ​

其实，该方案非常简单，只是该接口大部分朋友用的少。该setSeriesVisible()接口可以动态修改图表展示的系列。

我们直接看代码：

var k=0
setInterval(function() {
    FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0).setSeriesVisible([k%4]);
	k=k+1;
}, 1500);

var k=0
setInterval(function() {
    FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0).setSeriesVisible([k%4]);
	k=k+1;
}, 1500);

其中：

• k：用来循环计数，计算该展示哪个系列
• setInterval()：JS中的定时器，每隔一定时间执行一下内部程序，1500表示1500毫秒，即1.5秒。可以根据需要通过调整该数字进而调整系列轮播的速度。
• FR.Chart.WebUtils.getChart("chart0")：获取图表列表，其中chart0是图表组件的名称。
• getChartWithIndex(0)：获取图表列表中第一个图表。因为上一步接口返回的图表是一个列表，有可能是组合图等。0表示第一个图。一般情况下，这里默认照着写即可。
• setSeriesVisible([0,1])：设置显示的系列，其参数应该是一个数组，系列顺序从0开始数，这里的[0,1]就表示仅展示前两个系列。
• k%4：除数取余，这里的4就是表示该图总共4个系列，取余后，值就在0,1,2,3之间轮播，刚好和系列数对上。
• k=k+1：每次执行完后要对k+1，这样就可以保证下次取余后也+1。

读懂上面的程序后，我们只需要对该图表增加一个初始化事件，步骤如下：

代码写入完成后就可以预览效果了。

需要注意的是，如果你的图表不是单独的组件，而是嵌入在报表块内的单元格内的图表时，需要简单调整一下，如下所示：

var k=0
setInterval(function() {
    FR.Chart.WebUtils.getChart("A1","report0").getChartWithIndex(0).setSeriesVisible([k%2]);
	k=k+1;
}, 1500);

var k=0
setInterval(function() {
    FR.Chart.WebUtils.getChart("A1","report0").getChartWithIndex(0).setSeriesVisible([k%2]);
	k=k+1;
}, 1500);

主要区别其实就是getChart("A1","report0")，与直接获取组件不同，单元格内的图表需要传入两个参数，第一个参数A1表示该图表所在单元格的位置，第二个参数report0表示该图表所在报表块的组件名。

三、好课推荐 ​

如果你是Finereport新手，刚接触FineReport，实际开发不到半年，只会最基础的操作，或者刚考完FCRP证书觉得只学到一些皮毛，面对真实项目依然觉得无从下手，那么这个课程绝对是最适合你的。 这是一个面向FineRepor11新手开发者的教程。通过开发一个微型CRM系统，完整的体验从移动端到PC端，从普通报表到填报表，从移动端看板到驾驶舱大屏的开发过程。让新手朋友能够更快的熟悉开发流程,拥有更多的项目经验，更加迅速的提升自身技能！

60节内容，累计15小时的视频可以让你拥有一个完整的项目经验，不再是开发各种零散的报表。可以帮助你熟练掌握PC端普通报表、PC端填报、PC端决策报表、PC端看板大屏、移动端展示报表、移动端填报、移动端看板等多种开发默认的基础开发操作，让你的技能清单中不再有空缺。

同时你将获得一份6.5万字，长达230+页的新手教程笔记，内含180+常用技能开发经验及知识点，完美帮你度过新手期。

长按下方图片识别二维码了解更多课程介绍！点击左下角阅读原文可直接开始学习！

四、模板文件下载 ​

如果您在阅读或实际操作过程中有问题，可以随时添加作者好友进行咨询。