在 vue3 中 echarts 如何重绘

在 Vue3 中，可以使用 `watch` 监听数据的变化，然后在回调中调用 echarts 的 `setOption` 方法重新渲染图表。具体的实现步骤如下：

1. 安装 echarts：

   npm install echarts

2. 在组件中引入 echarts：

   import * as echarts from 'echarts';

3. 在组件的 `setup` 函数中，定义一个 `ref` 引用变量用于存储 echarts 实例：

   const chartRef = ref(null);

4. 在组件的模板中，创建一个 div 元素用于渲染 echarts 图表，并设置 `ref` 属性指向上一步定义的 `chartRef`：

   <div ref="chartRef" style="width: 100%; height: 300px;"></div>

5. 在组件的 `watch` 方法中，监听需要变化的数据，并在回调中调用 echarts 的 `setOption` 方法重新渲染图表。需要注意的是，在第一次加载组件时也需要调用 `setOption` 方法进行初始化，因此需要将初始化代码放在 `watch` 回调中的外部：

   watch(
     () => data,
     () => {
       if (!chartRef.value) {
         // 初始化 echarts 实例
         chartRef.value = echarts.init(chartRef.value);
       }
       // 调用 setOption 方法重新渲染图表
       chartRef.value.setOption(options);
     },
     { immediate: true } // 在第一次加载组件时立即执行回调
   );

完整的代码示例如下：

<template>
  <div ref="chartRef" style="width: 100%; height: 300px;"></div>
</template>

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

export default {
  name: 'EchartsDemo',
  setup() {
    const chartRef = ref(null); // 定义一个 ref 引用变量

    const data = [1, 2, 3, 4, 5]; // 需要监听的数据
    const options = {
      // echarts 的配置项
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: data,
          type: 'line',
        },
      ],
    };

    // 监听 data 数据的变化，重新渲染图表
    watch(
      () => data,
      () => {
        if (!chartRef.value) {
          // 初始化 echarts 实例
          chartRef.value = echarts.init(chartRef.value);
        }
        // 调用 setOption 方法重新渲染图表
        chartRef.value.setOption(options);
      },
      { immediate: true } // 在第一次加载组件时立即执行回调
    );

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