Bootstrap

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)
      }
    },

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

;