[Solved] Echarts Error: There is a chart instance already initialized on the dom!

On the current page, when you execute charts drawing for many times, the console will give a warning “there is a chart instance already initialized on the DOM”, which means: “a chart instance has been initialized on the DOM”

Solution:

Add the method of drawing ecarts to judge whether it already exists. If it exists, it can be destroyed. The code example is as follows:

data() {
	return {
		myRingChart1:null
	}
}
drawRing1() {
      if (
        this.myRingChart1 != null &&
        this.myRingChart1 != '' &&
        this.myRingChart1 != undefined
      ) {
        this.myRingChart1.dispose() //Solve the error reported by echarts dom already loaded
      }
      // Initialize the echarts instance based on the prepared dom
      this.myRingChart1 = echarts.init(this.$refs['myRingChart1'])
}


Read More: