问题描述

在使用echarts时报错Uncaught (in promise) Error: Initialize failed: invalid dom.

原因

这是由于echarts在初始化化时是需要获取dom的。

let myChart = this.$echarts.init(document.getElementById('main'));

例如在上面这个 myChart初始化时需要获取到 id="main" 的这个dom元素，所以在图表初始化的时候获取不到dom的时候就会出现这样的报错。

获取不到的原因及解决办法

可能是将初始化放在vue的created阶段，因为这个时候dom还没挂载，所以获取不到，解决方法是把初始化放在mounted阶段来执行。

还可能是 id="main" 的这个dom元素的父元素（或者父元素的 父元素或者祖先元素）中有v-if（有条件渲染），而v-if绑定的条件绑定的变量是和后端返回的数据有关的，这样可能会出现dom未更新时图表就开始初始化，也会获取不到dom。

vue的dom是异步更新的，只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.then 和MessageChannel，如果执行环境不支持，会采用 setTimeout(fn, 0)代替。

补充

最近又遇到了这个问题，在一个孙子组件（子组件中包含一个子组件）中使用echarts时，在mouted阶段绘制也出现了这个问题。

出现的原因暂时还不清楚，可能是由于我在绘制之前更改了数据导致需要更新视图，有知道的欢迎评论回答。

解决办法是 

1.使用 this.$nextTick(() =>{  })  

2.使用延时函数