报错 TypeError: Cannot read property ‘getAttribute‘ of null，echart初始化

vue的渲染机制导致echart初始化无法获取到dom元素研究

碰到的场景：

使用echart 初始化时报错:

报错 TypeError: Cannot read property ‘getAttribute‘ of null

排查发现：echarts.init(document.getElementById(“xxxx”))

其中的document.getElementById(“xxxx”) 为null ，也即无法获取到，dom元素。

<div v-if="getData.length>0">
    <div class="chart" id="echartNode"></div>
</div>

其中 getData 是从后台获取的数据, 需要dom节点挂载页面后，才能获取到echartNode 这个节点，做了v-if判断。所以修改为 v-show，发现还是无法获取。

最终排查发现可能是vue的渲染机制问题。添加setTimeout(()=>{},1000); 添加延时解决。

eg:

setTimeout(()=>{
let  echartsElment =  echarts.init(document.getElementById(“xxxx”));
// 后续对echartsElment设置。
},1000)

查看vue官网发现:

vue异步更新队列

惟求热泪盈眶与成就感
^_
, 点个赞再走