在使用echarts提示dom未找到,原因就是当我们封装了echarts组件初始化传值时通常会造成过早调用,也就是在数据还未处理完就已经调用init函数进行初始化,此时dom还未挂载成功,就会报这个错,这里解决可以使用nextTick()函数在初始化时延时调用;
this.$nextTick(() => {
this.drawChart() //初始化函数
})
在封装中推荐大家使用监听器来实现触发更新,这样会使你的效果最佳,也最保险,不会出现dom未生成的情况,我们通常会把一些可变的值传递给子组件,比如data,在data初始化还是空的时候我们就在编译父组件时进行了传递,子组件监听初次执行,但是不显示因为是空数据,当我们函数运行完,拿到了后台数据进行再次赋值,子组件的props同时更新,被监听到后就会再次触发渲染函数,echarts图表就正常显示了。
watch: {
// 传入的动态数据
chartsData: {
handler(val, oldVal) {
this.$nextTick(() => {
this.drawChart()
})
},
deep: true, // 深度监听
immediate: true // 初始化执行
}
},
标签:nextTick,初始化,函数,callback,dom,failed,Error,组件,echarts
From: https://blog.csdn.net/2301_80868127/article/details/137222893