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

##基于Vue在使用Echart时init初始化失败，获取不到DOM元素项目背景是要求在图表没有数据是有个空状态显示，隐藏图表。结果在执行EChart 初始化方法init的时候报错了，是因为在v-if 会完全隐藏掉界面dom元素，所以在获取图表控件时就会出现获取不到的情况。后面尝试用v-show去控制元素，v-show指令控制dom元素的display属性，界面中还是会渲染出来，结果图...

JLongZhan

8159人浏览 · 2019-03-30 15:08:23

JLongZhan · 2019-03-30 15:08:23 发布

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

在这里插入图片描述

项目背景是要求在图表没有数据是有个空状态显示，隐藏图表。
在这里插入图片描述
结果在执行EChart 初始化方法init的时候报错了，是因为在v-if 会完全隐藏掉界面dom元素，所以在获取图表控件时就会出现获取不到的情况。

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

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

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^