vue使用echarts报错：Error: Initialize failed: invalid dom.

vue使用echarts报错：Error: Initialize failed: invalid dom.
 

 

功能背景：使用后端返回数据渲染图表，我是在获取数据之后才渲染的图表
 

bug出现：因为后端数据返回较慢，当我在数据未返回之前切换了当前页面，浏览器就会报错：未初始化dom：Error: Initialize failed: invalid dom.

initChart() {
      const mycharts = this.$refs.radarbox
      console.log(mycharts, 'mycharts2')
        this.chart = echarts.init(mycharts)
        this.setOptions(this.data2, this.num)
    },

 
解决：因为数据返回较慢，获取接口数据写在mounted中，但是当切换页面时，dom被销毁，但是接口数据仍在等待，但是当切换页面后，接口数据返回，要渲染图表时，此时dom找不到，这个时候加一个判断

initChart() {
      const mycharts = this.$refs.radarbox
      console.log(mycharts, 'mycharts2')
      if (mycharts) {
        this.chart = echarts.init(mycharts)
        this.setOptions(this.data2, this.num)
      }
    },

 
此时不报错了，如果你觉得有用点一个免费的小赞！让我们共同进步！