首页 前端知识 vue使用echarts报错:Error: Initialize failed: invalid dom.

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

2024-04-29 11:04:53 前端知识 前端哥 666 685 我要收藏

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

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6106.html
标签
评论
发布的文章

qt JSON和字符串相互转换

2024-05-05 12:05:04

nlohmann::json从入门到精通

2024-05-05 12:05:00

Android-第十节JSON讲解

2024-05-05 12:05:35

FastJson 框架详解

2024-05-05 12:05:31

MySql操作JSON

2024-05-05 12:05:31

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!