vue使echarts报错 Cannot read properties of null (reading ‘getAttribute‘)及图表显示不全问题

1,516 阅读1分钟

在VUE中使用Echarts

初始化图形写在mounted函数中

控制台报错TypeError: Cannot read properties of null (reading 'getAttribute')

微信图片_20230109160905.png

查资料发现有两种情况导致:

情况一:

把初始化图形的方法写在了created中,这个时候data数据已经初始化了,但是还未挂载完成,dom树没有开始渲染到页面

解决办法:将初始化图形方法写在mouted中,mounted周期dom树已经挂载完成渲染到页面上,此时可进行dom操作

情况二:

在html中,使用图形化的时候,使用了v-if来控制是否渲染图形,这里的v-if是条件判断是否渲染,如果是不满足条件,dom树是没有创建过的

解决办法:使用v-show来控制是否显示图形,v-show是控制图形是否显示,只是dom是否隐藏了的问题,dom树也是创建完成了的

我是第二种情况,以上方法解决

但之后又碰到了按条件搜索改变数据后,渲染图形显示不全的问题,显示如下:

微信图片_20230109160818.png

查看元素发现渲染的宽度只有100px

image.png

原因:绘制的时候,dom应该是处于不可见的状态,然后dom设置了windth:100%,所以当成了100px去渲染

解决办法:使用nextTick调用resize

参考:blog.csdn.net/qq_42453751…