echarts 图表的内容的轮播
第一种:官网提供的方法:dispatchAction和on事件(tooltip + 定时器 方式)
init(id) {
var myChart = echarts.init(document.getElementById(id))
var option = { title: { text: '饼图程序调用高亮示例', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [ { name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; var currentIndex = -2;//【-1的话不会从第一个开始轮播】 var timer; function setTimer(){ setInterval(function () { var dataLen = option.series[0].data.length; // 取消之前高亮的图形 myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: currentIndex }); currentIndex = (currentIndex + 1) % dataLen; // 高亮当前图形 myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: currentIndex }); // 显示 tooltip myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: currentIndex }); }, 1000); } myChart.setOption(option) setTimer() //图表的鼠标移入事件,暂停图表的轮播 myChart.on('mouseover', ()=>{ clearInterval(timer) }) //图表的鼠标移出事件,继续轮播图表 myChart.on('mouseout', ()=>{ setTimer() })
}
第二种:echarts-auto-tooltip插件方式,git地址:https://github.com/liuyishiforever/echarts-auto-tooltip/blob/master/demo.html。
需要注意的是,如果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; }
使用方法:
var echart_demo= echarts.init(document.getElementById('id'));
var option = {//具体内容不在此赘述}
tools.loopShowTooltip(echart_demo, option, {loopSeries: true,interval:6000});
备注:使用该插件,请配置Echarts中的empasis属性