eacharts在使用时提示[ECharts] There is a chart instance already initialized on the dom

问题

[ECharts] There is a chart instance already initialized on the dom.

导致原因

切换tab后，页面重新挂载，而上一个页面的eacharts的组件没有卸载

解决

• 基本eacharts代码结构

<template>
  <div ref="chartContainer" class="chart-container"></div>
</template>

<script setup>
import { ref } from "vue";
import * as echarts from "echarts";

const chart = ref(null);
const myChart = ref(null);

onMounted(() => {
  // ========================================
  if (myChart.value) {
    myChart.value.dispose(); // 销毁已有实例,主要是这一步
  }
  // ========================================
  // 初始化图表实例
  myChart.value = echarts.init(chart);
  // 设置图表选项
  const option = {
    // 图表选项...
  };
  myChart.value.setOption(option);
});
</script>

<style>
.chart-container {
  width: 100%;
  height: 400px;
}
</style>