在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 節點時獲取不到，所以就會導致報錯。