Vue在使用Echart时init初始化失败,获取不到DOM元素

##基于Vue在使用Echart时init初始化失败,获取不到DOM元素

Vue在使用Echart时init初始化失败,获取不到DOM元素_第1张图片

项目背景是要求在图表没有数据是有个空状态显示,隐藏图表。
Vue在使用Echart时init初始化失败,获取不到DOM元素_第2张图片
结果在执行EChart 初始化方法init的时候报错了,是因为在v-if 会完全隐藏掉界面dom元素,所以在获取图表控件时就会出现获取不到的情况。

后面尝试用v-show去控制元素,v-show指令控制dom元素的display属性,界面中还是会渲染出来,
结果图表属性能出来,只是图表已经变形了。

后面想到了在Vue生命中的updated钩子函数中去更新数据,结果能正常显示数据。

在Vue中,数据更改会导致虚拟 DOM 重新渲染,并先后调用beforeUpdate钩子函数和updated钩子函数

你可能感兴趣的:(Vue)