一个方法搞定echarts tooltips 轮询

1,082 阅读1分钟

1、怎么让ECharts的提示框tooltip自动轮播

在用ECharts做大屏或者可视化展示项目的时候,让提示框tooltip自动轮播是比较常见的需求

2、封装一个全局可用的轮询方法

/**
@params dom dom元素
@params chartOption echarts的Option
@params timer 定时器
*/
setTimerToolTips(dom,chartOption,timer){
  clearInterval(timer); //清除定时器,防止轮播出现混乱
  var index = -1;
  timer = setInterval(() => {
    dom.dispatchAction({
      type: "downplay",
      seriesIndex: 0,
      dataIndex: index
    });
    index = (index + 1) % chartOption.series[0].data.length; //计算索引
    dom.dispatchAction({ //Echarts提供的方法
      type: "showTip",
      seriesIndex: 0,
      dataIndex: index
    });
    dom.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: index
    });
  }, 3000); //每隔3秒轮播一次
}

3、以vue2为例的调用方法

<IEcharts 
   ref="pie" 
   :option="pieOption"
   :resizable="true"
></IEcharts>

this.timer1 = setTimerToolTips(this.$refs.pie,this.pieOption,this.timer1);