vue echart报错：Cannot read property getAttribute of null

Cannot read property getAttribute of null

---

这个问题我改了半个多小时，又百度，又请教的，终于在一位博主的文章中找到了原因和解决方案，希望有遇到相同问题的人，能够快速得到解决，所以，今天为这个问题的解决方法做一个记录

---

在解决问题的过程中，使用了以下方法

报错代码：

mounted() {
// ...
this.drwaCharts() // drawCharts方法为自己定义的包含渲染 echarts 图表的方法
// ...
}
之前一直用 echarts 没有出现过这个问题，所以当这个问题出现时我就开始了各种查，试了几种方法依旧报错，比如：

1、在mounted() {}，使用 nextTick(() => {
this.drawCharts()
});
2、使用 setTimeout 包裹： (依旧报错)
setTimeout(() => {
this.drawCharts()
}, 1000);
3、正确的方法
因为我在包裹echarts标签的最外层加了v-if，所以导致了报错，只要把v-if改成v-show就可以了~

---

报错分析

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

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