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)
}
},
此时不报错了,如果你觉得有用点一个免费的小赞!让我们共同进步!