解决Uncaught TypeError: Cannot read properties of null (reading ‘getAttribute‘)

devtools/2024/11/13 9:04:29/

问题: 用了element ui 的echart ,初始化时候找不到指定id的元素,导致的问题,如下

浏览器控制台输出的错误信息如下 

Echars

echarts.min.js:22 Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')at echarts.min.js:22:210725at Yd (echarts.min.js:22:210761)at t.init (echarts.min.js:22:748697)at Object.success (click_menu.html:1967:43)at k (jquery-1.8.2.min.js:2:16920)at Object.fireWith [as resolveWith] (jquery-1.8.2.min.js:2:17707)at y (jquery-1.8.2.min.js:2:80804)at XMLHttpRequest.d (jquery-1.8.2.min.js:2:86374)

问题页面展示

分析:

通过断点发现如下代码执行被卡顿,正常情况这段代码应该正常执行

var myChart = echarts.init(document.getElementById('echarts01'));

后来发现,页面刷新后,通过按钮刷新echarts的数据,图标正常显示

那么可以通过控制将页面加载完成再执行这段代码那

所以开始尝试了一下两种都不行

mounted() {
    this.chartPort();
},

this.$nextTick(() => {})

最终办法

 mounted() {
            var that = this;//防止this指向问题
            var timer = setInterval(function () {
                // 判断页面所有资源已加载完毕
                if (document.readyState === "complete") {
                    that.initMyEcharts();//这里去调用你初始化echarts 的方法
                    window.clearInterval(timer);
                }
            }, 1000);
        },

问题得到解决


http://www.ppmy.cn/devtools/33751.html

相关文章

python数据分析——大数据和云计算

大数据和云计算 前言一、大数据二、大数据定义三、数据存储单位四、大数据存储技术五、大数据应用技术六、大数据特征七、数据容量八、数据类型的多样性8.1结构化数据8.2半结构化数据8.3非结构化数据 九、获取数据的速度十、可变性十一、真实性十二、复杂性十三、价值十四、云计…

19 内核开发-内核源码编译

19 内核开发-内核源码编译 (1)开始准备 安装好virtual box ubuntu 系统后,即可下载内核代码,进行编译 历史内核源码地址:https://mirrors.tuna.tsinghua.edu.cn/kernel/v5.x/ 下载 linux-5.10.102.tar.gz 的包,可以使用wget 命令 创建编译目…

笔记12-远程服务器上配置linux深度学习C++环境全过程记录(笔记1和2的同样环境第3次配置)

(笔记1和2在windows上装的同样环境在远程服务器上配置) 文章目录 conda create -n zgp_m3dm_main python3.8(失败)反向代理[笔记10-linux服务器可以通过SSH连接但是没法上网](https://editor.csdn.net/md/?articleId137644653)c…

练习题(2024/5/5)

1左叶子之和 给定二叉树的根节点 root ,返回所有左叶子之和。 示例 1: 输入: root [3,9,20,null,null,15,7] 输出: 24 解释: 在这个二叉树中,有两个左叶子,分别是 9 和 15,所以返回 24示例 2: 输入: root [1] 输…

【实时数仓架构】方法论

笔者不是专业的实时数仓架构,这是笔者从其他人经验和网上资料整理而来,仅供参考。写此文章意义,加深对实时数仓理解。 一、实时数仓架构技术演进 1.1 四种架构演进 1)离线大数据架构 一种批处理离线数据分析架构,…

Istio基础知识

一、什么是Istio Istio 提供⼀种简单的⽅式来为已部署的服务建⽴⽹络,该⽹络具有 负载均衡、服务间认证、监控等功能,只需要对服务的代码进⾏⼀点或不需要做任何改动。想要让服务⽀持 Istio,只需要在您的环境中部署⼀个特殊的 sidecar 代 理&…

python做题补充

不可以xy.sort(),用y.sort()即可,因为不会返回值。 ——————————————————————————————————————————— wordhello word.split() 默认是按空格进行分割,获得的是整个单词的列表。 而list(word)将返回 [h, e, l,…

SQL 基础 | BETWEEN 的常见用法

在SQL中,BETWEEN是一个操作符,用于选取介于两个值之间的数据。 它包含这两个边界值。BETWEEN操作符常用于WHERE子句中,以便选取某个范围内的值。 以下是BETWEEN的一些常见用法: 选取介于两个值之间的值: 使用 BETWEEN来…