轻松解决 echarts There is a chart instance already initialized on the dom.警告

引发原因是一个实例上想重复创建多个图表造成；在页面切换时会触发，并且图表会消失(我的是直接消失了)；

当时想到的是在组件实例卸载之前把里面的内容清空，如：

onBeforeUnmount(()=>{
  let pie = document.getElementById("pie");
  pie.innerHTML = "";
})

试过之后，还是不行。开始在网上找答案，其中也找到过解决了警告，但是进入页面的时候图表还是处于隐藏的状态，自己琢磨了一会找到了解决方案；

 let chartBox = echarts.getInstanceByDom(document.getElementById("pie"));
  if (chartBox == null) {
    chartBox = echarts.init(document.getElementById("pie"));
  }else {
    chartBox.dispose();
    chartBox = echarts.init(document.getElementById("pie"));
  }

首先使用 echarts.getInstanceByDom(document.getElementById("pie")); 看它是否为null，为null就执行 echarts.init 语句，如果不为null就先清空它再执行；

其中 .dispose() 是用于销毁图表实例的方法。调用该方法会释放图表实例占用的资源，并将其从页面中移除，以便释放内存并清理页面。通常，当你不再需要某个图表实例时，可以调用该方法来进行清理。

完整：

const pie = () => {
  let chartBox = echarts.getInstanceByDom(document.getElementById("pie"));
  if (chartBox == null) {
    chartBox = echarts.init(document.getElementById("pie"));
  }else {
    chartBox.dispose();
    chartBox = echarts.init(document.getElementById("pie"));
  }

  let data = [
    { value: 40, name: 'rose 1' },
    { value: 38, name: 'rose 2' },
    { value: 32, name: 'rose 3' },
    { value: 30, name: 'rose 4' },
    { value: 28, name: 'rose 5' },
    { value: 26, name: 'rose 6' },
    { value: 22, name: 'rose 7' },
    { value: 18, name: 'rose 8' }
  ]
const option = {
  title: {
    text: '审批类型统计',
    left: '20'
  },
  legend: {
    orient: 'center',
    right: 50,
    top:50,
    textStyle: {
        color: "#000",
    },
    formatter: function(name) {	// 添加
      let target
      for (let i = 0; i < data.length; i++) {
        if (data[i].name === name) {
          target = data[i].value
        }
      }
      var arr = [name,target]
      return arr.join('  ')
    },
    itemWidth: 12,
    itemHeight: 12
  },
  color: ['#29C295', '#E69665', '#E15D68', '#407FFF', '#A682E6'],
  series: [
    {
        type: 'pie',
        center: ["30%", "50%"],
        roseType: "area",
        label: {
            show: false,
            color: '#000',
            fontSize: 12
        },
        data: data
    }
  ]
};
    
  chartBox.setOption(option);
  // 根据页面大小自动响应图表大小
  window.addEventListener("resize", function () {
      chartBox.resize();
  });
};