echarts饼状图轮播tooltips
- 定义echarts图
- 写定时任务
- 调用定时任务
定义echarts图
let chartDom = document.getElementById('id');
let myChart = echarts.init(chartDom);
写定时任务
通过echarts的events来控制高亮以及tooltips的现实
/**@params dom dom元素@params chartOption echarts的Option@params timer 定时器*/setTimerToolTips(dom, chartOption, timer) {clearInterval(timer); //清除定时器,防止轮播出现混乱let index = -1;timer = setInterval(() => {//取消高亮dom.dispatchAction({type: "downplay",seriesIndex: 0,dataIndex: index});index = (index + 1) % chartOption.series[0].data.length; //计算索引//显示tooptipsdom.dispatchAction({ //Echarts提供的方法type: "showTip",seriesIndex: 0,dataIndex: index});//高亮dom.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: index});}, 5000);},
调用定时任务
this.setTimerToolTips(myChart, option, this.timer)