脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → echarts报错Cannot read properties of null

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论