Echarts自动轮播插件

最新推荐文章于 2025-05-16 14:58:52 发布

Double大宝

最新推荐文章于 2025-05-16 14:58:52 发布

阅读量8.9k

点赞数 5

CC 4.0 BY-SA版权

分类专栏：大屏项目文章标签： echarts 轮播大屏

1 篇文章

订阅专栏

本文介绍了一款ECharts自动轮播插件，适用于大屏展示场景，无需鼠标操作即可自动切换展示内容。文章详细解释了如何在使用series和dataset数据格式下配置插件，并提供了属性配置说明及使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做大屏项目的时候，大屏的功能主要是用来展示功能，所以基本上不会有鼠标的操作，有时候并不能一次性展示所有需要所有需要展示的内容，这时候就需要自动轮播了。echarts-auto-tooltip下载提取码：276j。

需要注意的是，如果Echarts的数据用的是series里面的data，那么直接使用该插件即可。如果使用的是dataset,

[
['product', '数量', '占比'],
["山东", "104", "19%"],
["山西", "86", "43%"],
["内蒙", "30", "4%"]
]

这种格式的data的话，在第70行左右需要改动一下：

原代码：dataLen = series[seriesIndex].data.length;

修改之后：

if(options.dataType=='series'){
    dataLen = series[seriesIndex].data.length;
}else{
    dataLen = chartOption.dataset.source.length-1;
}

属性配置
属性	说明	默认
interval	轮播时间间隔，单位毫秒	默认为2000
loopSeries	true表示循环所有series的tooltip，false则显示指定seriesIndex的tooltip	默认为false。
seriesIndex	指定某个系列（option中的series索引）循环显示tooltip，当loopSeries为true时，从seriesIndex系列开始执行.	默认为0

使用方法：

var echart_demo= echarts.init(document.getElementById('id'));

var option = {//具体内容不在此赘述}

tools.loopShowTooltip(echart_demo, option, {loopSeries: true,interval:6000});

注意使用该插件，请配置Echarts中的empasis属性（应该不会忘记吧。。我就是顺嘴提一下）