开发需求总结17-vue echart报错:Cannot read property get ‘Attribute‘ of undefined
看到这个报错,强迫症患者贼难受。。。页面明明没有任何问题,但就是一直在切换echart图表显示的时候,总是出现这个报错。百度查了半天,终于定位到原因了,解决方法记录一下。
在解决问题的过程中,使用了以下方法
报错代码:
mounted() {
// ...
this.getChgWeeklyEcharts() // getChgWeeklyEcharts方法为自己定义的包含渲染 echarts 图表的方法
// ...
}
以前用 echarts 没有出现过这个问题,所以当这个问题出现时,试了几种方法依旧报错,比如:
1、在mounted() {},使用
nextTick(() => {
this.drawCharts()
});
2、使用 setTimeout 包裹: (依旧报错)
setTimeout(() => {
this.drawCharts()
}, 1000);
解决方法
在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 节点时获取不到,所以就会导致报错。