位置: IT常识 - 正文

解决echarts报错Cannot read properties of null (reading ‘getAttribute‘)(echarts遇到的坑)

编辑：rootadmin

解决echarts报错Cannot read properties of null (reading ‘getAttribute‘) 前言

推荐整理分享解决echarts报错Cannot read properties of null (reading ‘getAttribute‘)(echarts遇到的坑)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:引入echarts报错,echarts.min.js报错,echarts nodataloadingoption,echarts.min.js报错,echarts cannot read property,echarts.init报错,echarts常见问题,echarts cannot read property,内容如对您有帮助，希望把文章链接给更多的朋友！

最近在写 echarts 的时候碰到了这么一个报错，如下图。造成报错的原因是因为 echarts 的图形容器还未生成就对其进行了初始化，下面几种方法是经本人自测最有效的解决方案。

解决echarts报错Cannot read properties of null (reading ‘getAttribute‘)(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);},

本文链接地址:https://www.jiuchutong.com/zhishi/298507.html 转载请保留说明！

上一篇：最新人工智能GPT-4免费简单使用教程(最新人工智能软件chingt)

下一篇：文件上传漏洞upload-labs靶场通关教程 1-20（带原理）(文件上传漏洞原因)