问题: 用了element ui 的echart ,初始化时候找不到指定id的元素,导致的问题,如下
浏览器控制台输出的错误信息如下
Echars
echarts.min.js:22 Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')
at echarts.min.js:22:210725
at Yd (echarts.min.js:22:210761)
at t.init (echarts.min.js:22:748697)
at Object.success (click_menu.html:1967:43)
at k (jquery-1.8.2.min.js:2:16920)
at Object.fireWith [as resolveWith] (jquery-1.8.2.min.js:2:17707)
at y (jquery-1.8.2.min.js:2:80804)
at XMLHttpRequest.d (jquery-1.8.2.min.js:2:86374)
问题页面展示
分析:
通过断点发现如下代码执行被卡顿,正常情况这段代码应该正常执行
var myChart = echarts.init(document.getElementById('echarts01'));
后来发现,页面刷新后,通过按钮刷新echarts的数据,图标正常显示
那么可以通过控制将页面加载完成再执行这段代码那
所以开始尝试了一下两种都不行
mounted() {
this.chartPort();
},
和
this.$nextTick(() => {})
最终办法
mounted() {
var that = this;//防止this指向问题
var timer = setInterval(function () {
// 判断页面所有资源已加载完毕
if (document.readyState === "complete") {
that.initMyEcharts();//这里去调用你初始化echarts 的方法
window.clearInterval(timer);
}
}, 1000);
},
问题得到解决