echarts报错Cannot read properties of null (reading ‘getAttribute‘)的解决
更新时间：2023年01月17日 09:50:51 作者：水星记_
最近在开发Echarts忽然遇到了个问题,这篇文章主要给大家介绍了关于echarts报错Cannot read properties of null (reading ‘getAttribute‘)的解决方法,需要的朋友可以参考下
前言
最近在写 echarts 的时候碰到了这么一个报错，如下图。造成报错的原因是因为 echarts 的图形容器还未生成就对其进行了初始化，下面几种方法是经本人自测最有效的解决方案。
报错截图
解决方案：
1. this.$nextTick
该方法思路是将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
this.$nextTick(() => {
this.chartPort();
});
2. created(){}
将 created(){} 生命周期中的方法放在 mounted(){} 生命周期中，该方法思路是因为数据渲染方法放到了 created(){} 生命周期中，但是数据还未取到，页面已经加载了，故放在 mounted(){} 生命周期中，在初始化页面完成后，再对 DOM 节点进行相关操作。
mounted() {
this.chartPort();
},
3. document.readyState
document.readyState 方法主要是描述了文档的加载状态，以下是它的三种类型值：
| 值 | 描述 |
|---|---|
| loading | 加载中 |
| interactive | 文档已经完成加载且已被解析，但是类似图像，样式表和框架之类的子资源仍在加载。 |
| complete | 加载完成 |
当这个属性的值变化时，document 对象上的 readystatechange 事件就会触发。因此我们可以借助此特性让图表方法在页面渲染完成后在触发。
mounted() {
var that = this;//防止this指向问题
var timer = setInterval(function () {
// 判断页面所有资源已加载完毕
if (document.readyState === "complete") {
that.chartPort();//执行方法
window.clearInterval(timer);
}
}, 800);
},
总结
到此这篇关于echarts报错Cannot read properties of null (reading ‘getAttribute‘)解决的文章就介绍到这了,更多相关echarts报错Cannot read properties of null内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于javaScript中封装的各种写法的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
这篇文章主要介绍了JS浅拷贝和深拷贝原理与实现方法,结合实例形式分析了javascript浅拷贝及深拷贝相关概念、原理、实现方法与操作注意事项,需要的朋友可以参考下2019-02-02
js获取当前年月日时分秒的方法实例(new Date()/moment.js)
JavaScript是一种流行的编程语言,它可以用来获取当前年月日,这篇文章主要给大家介绍了关于js获取当前年月日时分秒的相关资料,分别使用的是new Date()/moment.js,需要的朋友可以参考下2024-07-07
本文主要介绍了js事件冒泡与事件捕获的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了JavaScript中如何计算字符串文本的宽度问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
javascript实现整除的实现代码，需要的朋友可以参考下。2010-11-11
这篇文章主要为大家详细介绍了微信小程序重写tabbar底部导航，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
JavaScript中json对象和string对象之间相互转化
json对象和string对象之间的转化已经成为了大家耳熟能详的话题，本人今天就多啰嗦一些他们之间的故事，如有不对之处，还请各位海涵呢？不多说了直切主题2012-12-12
打印gridview对于一些童鞋们真的是很陌生啊,不过没有关系，因为本文的出现，或让你茅塞顿开，好了话不多说，感兴趣的朋友可以了解下，或许对你学习js高级知识有所帮助2013-02-02
这篇文章主要为大家详细介绍了JavaScript实现form表单的多文件上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
最新评论