Vue3 销毁了echarts 切换tabs页还是提示There is a chart instance already initialized on the dom.

在Vue3中销毁echarts实例可以使用`this.$refs.chart.dispose()`方法，其中`chart`是你在模板中定义的echarts实例的ref名称。在切换tabs页时，需要先判断当前tab页是否已经初始化了echarts实例，如果已经初始化了，则需要先销毁该实例，再重新初始化新的实例。可以使用`echarts.getInstanceByDom()`方法获取当前容器中的实例对象，然后执行`dispose()`方法进行销毁。具体代码如下：

<template>
  <div>
    <div ref="chart"></div>
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="Tab 1">Content of Tab Pane 1</el-tab-pane>
      <el-tab-pane label="Tab 2">Content of Tab Pane 2</el-tab-pane>
      <el-tab-pane label="Tab 3">Content of Tab Pane 3</el-tab-pane>
    </el-tabs>
  </div>
</template>

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

export default {
  data() {
    return {
      activeTab: 'Tab 1',
      chartInstance: null
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chartInstance = echarts.init(this.$refs.chart);
      // 初始化图表
    },
    handleTabClick(tab) {
      if (tab.label === 'Tab 1') {
        if (this.chartInstance) {
          this.chartInstance.dispose();
          this.chartInstance = null;
        }
      } else if (tab.label === 'Tab 2') {
        if (!this.chartInstance) {
          this.initChart();
        }
      } else if (tab.label === 'Tab 3') {
        if (!this.chartInstance) {
          this.initChart();
        }
      }
    }
  }
}
</script>

<style>
/* 样式省略 */
</style>