vue echart 动态更新 tooltip

在 Vue 中使用 ECharts 动态更新 tooltip，可以通过以下步骤实现：

1. 首先，需要在 Vue 组件中引入 ECharts，并在 `mounted` 钩子函数中初始化 ECharts 实例。

2. 接着，在需要动态更新 tooltip 的情况下，可以通过调用 `setOption` 方法来更新 ECharts 实例的配置项。在这个方法中，需要将 `tooltip.trigger` 属性设置为 `'axis'`，并将 `tooltip.formatter` 属性设置为一个函数。这个函数接收一个参数 `params`，其中包含当前 tooltip 显示的所有数据信息。在这个函数中，可以根据需要对 tooltip 的内容进行自定义处理，并返回一个字符串作为 tooltip 的内容。

3. 最后，在需要动态更新 tooltip 的时候，可以通过调用 `dispatchAction` 方法来触发 tooltip 的显示。在这个方法中，需要将 `type` 参数设置为 `'showTip'`，并将 `seriesIndex` 和 `dataIndex` 参数分别设置为当前需要显示 tooltip 的系列和数据的索引值。

下面是一个示例代码片段：

<template>
  <div ref="chart"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  data() {
    return {
      chartData: [
        { name: '数据1', value: 100 },
        { name: '数据2', value: 200 },
        { name: '数据3', value: 300 }
      ]
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart);
    this.chart.setOption({
      xAxis: {
        type: 'category',
        data: ['数据1', '数据2', '数据3']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        type: 'bar',
        data: this.chartData
      }],
      tooltip: {
        trigger: 'axis',
        formatter: params => {
          const dataIndex = params.dataIndex;
          const value = this.chartData[dataIndex].value;
          return `数值：${value}`;
        }
      }
    });
  },
  methods: {
    updateTooltip(index) {
      this.chart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: index
      });
    }
  }
}
</script>

以上是一个简单的示例，你可以根据你的具体需求进行相应的调整和拓展。希望能够对你有所帮助。