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

出现此问题是echarts进行了多次重复渲染导致的，解决方法如下：

1、vue

<template>
  <div ref="echartsRef" style="width: 600px; height: 400px;"></div>
</template>
 
<script>
import * as echarts from 'echarts';
 
export default {
  data() {
    return {
      myChart: null
    };
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.echartsRef);
    this.myChart.setOption({
      // ... 你的echarts配置项
    });
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose(); // 清理echarts实例
    }
  }
};
</script>

2、react

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';
 
export default function EChartsComponent(props) {
  const chartRef = useRef(null);
 
  useEffect(() => {
    // 创建ECharts实例
    if (!chartRef.current) { // 这个是***********重点***************
      chartRef.current = echarts.init(document.getElementById('main'));
    }
 
    // 设置ECharts选项
    chartRef.current.setOption(props.option);
 
    return () => {
      // 组件卸载时清理ECharts实例
      chartRef.current && chartRef.current.dispose();
    };
  }, [props.option]);
 
  return <div id="main" style={{width: '100%', height: '100%'}}></div>;
}