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

作者:水星记_ 时间:2024-04-17 10:04:06 

前言

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

报错截图

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

解决方案:

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://blog.csdn.net/Shids_/article/details/124275535

标签:echarts,报错,cannot
0
投稿

猜你喜欢

  • WEB前端开发经验总结 Ⅰ

    2008-06-12 12:23:00
  • python解析yaml文件过程详解

    2023-09-30 13:13:51
  • 一文带你感受Go语言空结构体的魔力

    2024-05-05 09:30:15
  • node.js用fs.rename强制重命名或移动文件夹的方法

    2024-05-13 10:05:37
  • asp如何让浏览器在https和http之间转化?

    2010-05-13 16:37:00
  • Tag与Tagging

    2009-10-15 12:59:00
  • SQL事务用法begin tran,commit tran和rollback tran的用法

    2012-01-05 18:58:51
  • MySQL授权命令grant的使用方法小结

    2024-01-22 14:09:22
  • js表单序列化判断空值的实例

    2024-04-22 13:01:15
  • Pytest中conftest.py的用法

    2022-08-05 03:48:32
  • 浅谈pandas中对nan空值的判断和陷阱

    2021-01-06 12:40:20
  • 详解通过API管理或定制开发ECS实例

    2022-11-02 17:44:00
  • Golang reflect反射的使用实例

    2024-05-05 09:32:17
  • 【总结】ASP如何获取访客真实的IP地址

    2007-08-15 13:43:00
  • 《JavaScript语言精粹》译者序及样章试读

    2009-04-03 11:38:00
  • vue.js表格分页示例

    2024-05-02 16:40:45
  • Pytorch随机数生成常用的4种方法汇总

    2022-02-07 09:25:34
  • python日期与时间戳的各种转换示例

    2021-05-23 07:47:33
  • Linux Centos 下使用yum 命令安装mysql实现步骤

    2024-01-28 02:24:42
  • asp中提取HTML中图片的SRC路径

    2008-10-24 08:42:00
  • asp之家 网络编程 m.aspxhome.com