vue3 动态更新echart tooltip

在 Vue3 中动态更新 Echarts tooltip 的方法如下：

1. 首先，在 Vue3 中，需要使用 ref 来引用一个变量，这个变量可以是基本数据类型或对象类型。我们需要在组件中创建一个 ref 变量来引用 Echarts 实例，然后将其传递给 Echarts 的 option 中。

2. 在 Echarts 的 option 中，我们需要设置 tooltip 的 trigger 为 'axis'，并且在 tooltip 的 formatter 函数中返回一个字符串模板。

3. 我们可以使用 watchEffect 监听 ref 变量的变化，在变量变化时，更新 Echarts 的 option，从而动态更新 tooltip。

代码示例：

<template>
  <div ref="chart" style="height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const chartRef = ref(null);
    const chart = ref(null);
    
    // 创建 Echarts 实例
    watchEffect(() => {
      if (!chartRef.value) return;
      
      chart.value = echarts.init(chartRef.value);
      
      // 设置 Echarts option
      chart.value.setOption({
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            return params.data.name + ': ' + params.data.value;
          },
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
        }],
      });
    });

    // 监听数据变化，动态更新 tooltip
    watchEffect(() => {
      if (!chart.value) return;
      
      const data = [820, 932, 901, 934, 1290, 1330, 1320];
      
      chart.value.setOption({
        series: [{
          data,
        }],
        tooltip: {
          formatter: (params) => {
            return params.data.name + ': ' + params.data.value + '<br/>' + 'Total: ' + data.reduce((a, b) => a + b);
          },
        },
      });
    });

    return {
      chartRef,
    };
  },
};
</script>