echarts实现tooltip轮播效果

要实现 ECharts 中 Tooltip 的轮播效果，可以通过设置 Tooltip 的 `trigger` 为 `'axis'`，并在 `axisPointer` 中设置轴指示器的 `type` 为 `'none'`，然后在 `formatter` 中自定义 Tooltip 的内容。

具体步骤如下：

1. 设置 `tooltip.trigger` 为 `'axis'`，并在 `axisPointer` 中将 `type` 设置为 `'none'`，这样 Tooltip 不会跟随鼠标移动，而是固定在数据轴上。

tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'none'
  }
}

2. 在 `formatter` 中自定义 Tooltip 的内容，可以使用 JavaScript 的模板字符串语法，结合 ECharts 提供的数据格式进行自定义。

具体实现轮播效果的方法有很多种，这里提供一种比较简单的实现方式：在 `formatter` 中使用 JavaScript 的 `setInterval` 函数定时切换 Tooltip 的内容，同时使用一个全局变量来记录当前显示的 Tooltip 索引，每次切换时更新该变量即可。

tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'none'
  },
  formatter: function(params) {
    // 定义 Tooltip 显示的内容
    const tooltipList = [
      `Tooltip 1: ${params[0].value}`,
      `Tooltip 2: ${params[1].value}`,
      `Tooltip 3: ${params[2].value}`
    ];
    // 使用全局变量记录当前显示的 Tooltip 索引
    if (typeof window.tooltipIndex === 'undefined') {
      window.tooltipIndex = 0;
    } else {
      window.tooltipIndex = (window.tooltipIndex + 1) % tooltipList.length;
    }
    // 使用 setInterval 定时切换 Tooltip 的内容
    setInterval(() => {
      const tooltipContent = tooltipList[window.tooltipIndex];
      this.chart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: 0,
        name: params[0].name,
        tooltip: {
          formatter: tooltipContent
        }
      });
      window.tooltipIndex = (window.tooltipIndex + 1) % tooltipList.length;
    }, 2000);
    // 返回一个空字符串，避免默认的 Tooltip 显示
    return '';
  }
}

需要注意的是，由于 Tooltip 的内容是通过 JavaScript 的定时器更新的，因此在配置 ECharts 图表时需要将 `tooltip.show` 设置为 `false`，避免默认的 Tooltip 与自定义的 Tooltip 冲突。

完整的 ECharts 配置代码如下：

option = {
  tooltip: {
    show: false,
    trigger: 'axis',
    axisPointer: {
      type: 'none'
    },
    formatter: function(params) {
      const tooltipList = [
        `Tooltip 1: ${params[0].value}`,
        `Tooltip 2: ${params[1].value}`,
        `Tooltip 3: ${params[2].value}`
      ];
      if (typeof window.tooltipIndex === 'undefined') {
        window.tooltipIndex = 0;
      } else {
        window.tooltipIndex = (window.tooltipIndex + 1) % tooltipList.length;
      }
      setInterval(() => {
        const tooltipContent = tooltipList[window.tooltipIndex];
        this.chart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: 0,
          name: params[0].name,
          tooltip: {
            formatter: tooltipContent
          }
        });
        window.tooltipIndex = (window.tooltipIndex + 1) % tooltipList.length;
      }, 2000);
      return '';
    }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Value',
      type: 'line',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};