vue3 echart tooltip 动态更新

Vue3和ECharts都是非常流行的前端框架，它们在数据可视化方面有着很好的应用。在Vue3中，通过ref获取ECharts实例，并通过watchEffect监听数据的变化，来动态更新ECharts的tooltip。具体的实现步骤如下：

1. 在Vue3中，通过ref获取ECharts实例：

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

<script>
import * as echarts from 'echarts';

export default {
  setup() {
    const chartRef = ref(null);

    onMounted(() => {
      const myChart = echarts.init(chartRef.value);
      // 初始化 ECharts
    });

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

2. 监听数据的变化，更新tooltip：

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

export default {
  setup() {
    const chartRef = ref(null);
    const data = ref([
      { name: 'A', value: 10 },
      { name: 'B', value: 20 },
      { name: 'C', value: 30 },
    ]);

    watchEffect(() => {
      const myChart = echarts.getInstanceByDom(chartRef.value);

      myChart.setOption({
        tooltip: {
          formatter: (params) => {
            const dataIndex = params.dataIndex;
            return `name: ${data[dataIndex].name}, value: ${data[dataIndex].value}`;
          },
        },
        series: [
          {
            data: data.value,
          },
        ],
      });
    });

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

这里我们使用了Vue3的watchEffect API来监听数据的变化。当数据发生变化时，我们通过ECharts的setOption方法来更新tooltip和series的数据。