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实现在网页中运行本地程序的方法,实例分析了JavaScript基于ActiveXObject运行本地程序的技巧,需要的朋友可以参考下2016-02-02
本篇文章主要介绍了微信小程序之小豆瓣图书实例，具有一定的参考价值，有兴趣的同学可以了解一下。2016-11-11
本文详细介绍了js中Json的语法与编写格式，有需要的朋友可以看下2016-11-11
这篇文章主要介绍了JS实现左边列表移到到右边列表功能,实现功能主要是左边的下拉框内容添加到右边的下拉框，支持多选移动，且同时将右边的下拉框对象移除，需要的朋友可以参考下2018-03-03
这篇文章主要介绍了详解webpack运行Babel教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
页面跳转是经常需要用到的，本文主要介绍了浅谈uniapp页面跳转的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要介绍了javascript实现图片伪异步上传过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-04-04
JavaScript 用cloneNode方法克隆节点的代码
很多时候我们需要通过HTML DOM 的方式，用JavaScript 动态生成很多相同的节点，包括其子节点2012-10-10
uniapp的web-view中图片无法长按保存，IOS下是正常的，但是Android下长按无反应，这篇文章主要介绍了uni-app实现web-view图片长按下载解决方案,需要的朋友可以参考下2023-09-09
这篇文章主要为大家详细介绍了JS或jquery实现全屏的四种写法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论