记录一下echarts实现Tooltip自动显示

话不多说直接上代码.

    // tooltip跳转
    // this.axisIndex指当前tootip所在索引
    // barChart 是Echarts初始化后的DOM节点
    // this.xAxis为横坐标长度
    setAnimation() {
      this.clearTooltip();
     // timeAnimation为我们设置的进行动态执行tooltip的方法
      this.timeAnimation = setInterval(() => {
        this.barChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: this.axisIndex,
        });
        this.axisIndex++;
        // 求余用来循环索引值
        this.axisIndex = this.axisIndex % this.xAxis.length;
      }, 2000);
    },
    // 鼠标选项
    // 这里我们需要当鼠标滑到某一图形状态的时候停止动画
    // 当鼠标划走则继续执行
    mouseAnimation() {
      this.barChart.on("mouseover", (params) => {
        this.clearTooltip();
        this.axisIndex = params.dataIndex + 1;
        this.barChart.on("mouseout", (params) => {
          this.setAnimation();
        });
      });
    },
    // 结束tooltip
    clearTooltip() {
      if (this.timeAnimation) {
        clearInterval(this.timeAnimation);
        this.timeAnimation = null;
      }
    },
  },

这里需要注意一点当我们离开此界面的时候需要把setInterval清除掉~~