在VUE中使用Echarts
初始化图形写在mounted函数中
控制台报错TypeError: Cannot read properties of null (reading 'getAttribute')
查资料发现有两种情况导致:
情况一:
把初始化图形的方法写在了created中,这个时候data数据已经初始化了,但是还未挂载完成,dom树没有开始渲染到页面
解决办法:将初始化图形方法写在mouted中,mounted周期dom树已经挂载完成渲染到页面上,此时可进行dom操作
情况二:
在html中,使用图形化的时候,使用了v-if来控制是否渲染图形,这里的v-if是条件判断是否渲染,如果是不满足条件,dom树是没有创建过的
解决办法:使用v-show来控制是否显示图形,v-show是控制图形是否显示,只是dom是否隐藏了的问题,dom树也是创建完成了的
我是第二种情况,以上方法解决
但之后又碰到了按条件搜索改变数据后,渲染图形显示不全的问题,显示如下:
查看元素发现渲染的宽度只有100px
原因:绘制的时候,dom应该是处于不可见的状态,然后dom设置了windth:100%,所以当成了100px去渲染