在vue中使用echarts报错Cannot read property getAttribute of null

报错信息如下：

 

报错代码：

mounted() {
    // ...
    this.drwaCharts() // drawCharts方法为自己定义的包含渲染 echarts 图表的方法
 // ...
}

之前一直用 echarts 没有出现过这个问题，所以当这个问题出现时我就开始了各种查，试了几种方法依旧报错，比如：

1、在mounted() {}，使用 $nextTick：（依旧报错）

this.$nextTick(() => {
    this.drawCharts()
});

2、使用 setTimeout 包裹： (依旧报错)

setTimeout(() => {
    this.drawCharts()
}, 1000);

3、正确的方法

因为我在包裹echarts标签的最外层加了v-if，所以导致了报错，只要把v-if改成v-show就可以了~

---

以上解决方法来自 https://www.cnblogs.com/carriezhao/p/11434998.html

---

原因分析

报错地点：

在放 echarts 图表的 div 使用了 v-if 指令，在绑定的值为 false 时会报此错，而值为 true 时候不会报错。

原因分析：

我们都知道，在切换显示与隐藏很少的情况下，使用 v-if 会性能更好，所以我根据实际情况首先选择了 v-if 指令。但是因为隐藏的时候， v-if 会使整个 dom 节点不渲染，而 v-show 只是给 dom 节点加了 display: none;属性，节点依然存在 。所以在这种特殊的情况下，由于 v-if 值为 false 时候mounted 中画图的方法依然会执行，在获取 dom 节点时获取不到，所以就会导致报错。