报错信息如下:
报错代码:
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 节点时获取不到,所以就会导致报错。