JS实现隐藏轮播图正下方切换圆点

1. 概述1.1 预期效果

在一些实际项目中，当使用图表轮播功能时，轮播图正下方默认会显示轮播切换圆点，这些圆点的作用在于，用户可以在图表轮播过程中，手动选择查看某一个图表。但有时为了不影响报表展示的美观性，我们需要隐藏这些切换圆点。

1.2 实现思路

分页预览设置中添加 JavaScript 「加载结束」脚本，用延迟函数隐藏图表轮播切换圆点。

注：决策报表同样适用，给图表块添加初始化事件即可。

2. 示例
2.1 准备模板

1）新建模板，新建数据集 ds1,SQL语句为：SELECT  *  FROM  销量，如下图所示：

2）合并 A1~I20 单元格，插入两个图表：柱形图，饼图，设置这两个图表的轮播间隔为 2 秒。如下图所示：

3）设置柱形图的数据。如下图所示：

4）设置饼图的数据。如下图所示：

2.2 添加 JS 代码

设计器菜单栏选择模板>模板 Web 属性>分页预览设置，添加加载结束事件。如下图所示：

JavaScript 代码如下：

注：鼠标悬停在图表上时，图表不会自动轮播。

1. setTimeout(function() {
   
2.         $(".vanchart-menu-dot").css("display", "none");
   
3. }, 100);//100表示100毫秒后自动隐藏轮播切换圆点,可根据实际需求自行设置值

复制代码

2.3 效果预览

保存模板，点击「分页预览」，效果如下图所示：

注：不支持移动端。

3. 模板下载

点击下载模板：