在 Vue3 中使用 ECharts 时， “There is a chart instance already initialized on the dom.“ 的错误

ECharts 在 Vue 组件中的使用示例
引入 ECharts：
首先，确保您已经安装了 ECharts：

bash
npm install echarts
创建一个 Vue 组件：
下面是一个示例组件，展示了如何引入 ECharts，初始化图表，并在组件销毁时销毁图表实例。

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

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref(null);
let chartInstance = null;

onMounted(() => {
  // 初始化 ECharts 实例
  chartInstance = echarts.init(chartRef.value);

  // 配置图表选项
  const option = {
    title: {
      text: 'ECharts 示例',
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
    },
    yAxis: {},
    series: [
      {
        name: '销售',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  };

  // 使用设定的配置项和数据显示图表
  chartInstance.setOption(option);
});

onBeforeUnmount(() => {
  // 销毁 ECharts 实例
  if (chartInstance) {
    chartInstance.dispose(); // 释放图表实例
    chartInstance = null; // 清空实例引用
  }
});
</script>

关键部分解释
引入 ECharts：
使用 import * as echarts from ‘echarts’; 来引入 ECharts。

初始化图表：

在 onMounted 钩子中，使用 echarts.init(chartRef.value) 初始化图表实例。这里 chartRef 是一个指向 DOM 元素的引用，您可以在模板中使用 ref 指令。
设置图表选项：

使用 setOption() 方法设置图表的配置选项。
销毁图表实例：

在 onBeforeUnmount 钩子中，调用 chartInstance.dispose() 来销毁图表实例。此方法会释放图表所占用的所有资源，并将实例从内存中删除。
其他注意事项
响应式更新：如果图表数据需要动态更新，您可以在数据发生变化时调用 chartInstance.setOption() 来更新图表，而不需要每次都重新初始化实例。

自适应大小：如果容器的大小会发生变化，您可能需要在窗口调整大小时调用 chartInstance.resize()，以确保图表自适应。

通过上述步骤，您可以确保在 Vue 3 中正确管理 ECharts 实例的生命周期，避免重复初始化带来的问题。