解决Uncaught TypeError: Cannot read properties of null (reading ‘getAttribute‘)

最新推荐文章于 2025-04-08 17:57:56 发布

请告诉他

最新推荐文章于 2025-04-08 17:57:56 发布

阅读量1.5k

点赞数 6

文章标签： javascript 开发语言 ecmascript echarts 前端 vue.js

本文链接：https://blog.youkuaiyun.com/fly19920602/article/details/138344200

版权

文章讲述了在使用ElementUI和ECharts时遇到的问题，初始化图表时因找不到指定ID的元素导致错误。作者通过尝试`mounted`钩子函数和`$nextTick`方法，最终发现使用定时器检查DOM加载状态并在所有资源加载完成后初始化图表解决了问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：用了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);
},

问题得到解决