项目场景：

在Vue3中组件中使用了echarts进行曲线图展示,其中组件采用vue-class-component来声明。

问题描述

页面第一次进来能正常展示曲线，但当菜单第二次进入时，出现无法展示的问题，console报出There is a chart instance already initialized on the dom.的错误，其他两个菜单对应的页面中echarts也是相同的写法，但是重新进入页面并没有报错，百思不得其解。 

	export default class xxxxx  extends Vue {
        mounted() {
		   let myDom = document.getElementById("myEchart");
           let myEchart = echarts.init(myDom );
           let option = {
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  data: [820, 932, 901, 934, 1290, 1330, 1320],
                  type: "line",
                  smooth: true,
                  areaStyle: {},
                },
              ],
           };
           myEchart.setOption(option );
	}

原因分析：

echarts在同一个ID上重复创建chart，导致报错。

解决方案

在初始化之前调用销毁接口：

	export default class xxxxx  extends Vue {
        mounted() {
		   let myDom = document.getElementById("myEchart");
           echarts.dispose(myDom);
           let myEchart = echarts.init(myDom );
           let option = {
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  data: [820, 932, 901, 934, 1290, 1330, 1320],
                  type: "line",
                  smooth: true,
                  areaStyle: {},
                },
              ],
           };
           myEchart.setOption(option );
	}

后记 

 之前尝试在组件销毁时dispose这个echart，结果destroyed根本不生效，不知道vue-class-component的组件销毁钩子函数怎么定义。

还有网上的方案使用全局变量进行创建后的对象接收，在初始化之前先判断变量是否为空，不为空则dispose，最后init，感觉麻烦，没有尝试。