在做大屏项目的时候,大屏的功能主要是用来展示功能,所以基本上不会有鼠标的操作,有时候并不能一次性展示所有需要所有需要展示的内容,这时候就需要自动轮播了。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属性(应该不会忘记吧。。我就是顺嘴提一下)
demo演示地址:http://www.admin123.top:8877/share/html/echart_lb.html(加载稍微有点慢)
以防地址失效,可直接下载该demo:https://pan.baidu.com/s/1c5alw0eqXLISKBFy1VKrww,提取码:0lo8