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

news/2024/10/19 6:20:18/

问题: 用了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/news/1447639.html

相关文章

hadoop的相关操作

一.hadoop与hadoop生态圈 Apache Hadoop:是一款分布式开源应用程序,主要解决海量数据的存储和分布式计算问题 Hadoop生态圈:是更广泛的概念,包含hadoop,sqoop,flume,zookeeper,hive,spark,hbase,oozie等构成的大数据处理相关一系统组件 hadoop版本介绍 hadoop1.x的组成: Common…

神经网络的反向传播

梯度下降算法 🔥我们来看一下神经网络中的梯度下降算法🔥 梯度下降法是一种优化算法,用于寻找目标函数的最小值。梯度是一个向量,表示某一函数在该点处的方向导数沿着该方向取得最大值,即函数在该点处变化最快的方向…

scala基础学习--变量,标识符,类型和类型转换

一、基本学习 1、输出语句和分号 1.换行输出 println(打印数据)2.不换行输出 print(打印数据)3.分号使用 在多个打印在一行中间的分号必须写,末尾可以不写 2、Scala中常量 常量是指:在程序发生变化过程中,不会发…

数据结构(八)——排序

八、排序 8.1 排序的基本概念 排序(Sort),就是重新排列表中的元素,使表少的元素满足按关键字有序的过程。 输入∶n个记录R1,R2...., Rn,对应的关键字为k1, k2,... , kn 输出:输入序列的一个重排R1,R2....,Rn,使得有k1≤k2≤...≤…

【C++航海王:追寻罗杰的编程之路】多态你了解多少?

目录 1 -> 多态的概念 1.1 -> 概念 2 -> 多态的定义及实现 2.1 -> 多态的构成条件 2.2 -> 虚函数 2.3 -> 虚函数的重写 2.4 -> C11 override和final 2.5 -> 重载、覆盖(重写)、隐藏(重定义)的对比 3 -> 抽象类 3.1 -> 概念 3.2 ->…

增强大模型高效检索:基于LlamaIndex ,构建一个轻量级带有记忆的 ColBERT 检索 Agent

在自然语言处理领域,高效检索相关信息的能力至关重要。将对话式记忆集成到文档检索系统中已经成为增强信息检索代理效果的强大技术。 在文中,我们专为 LlamaIndex 量身定制,将深入探讨构建一个轻量级的带有记忆的 ColBERT 检索代理&#xff…

Linux 系统上安装 NVIDIA 驱动程序失败(X server问题)

报错信息: ERROR: You appear to be running an X server; please exit X before installing. For further details, please see the section INSTALLING THE NVIDIA DRIVER in the README available on the Linux driver download page at www.nvidia.com. ERROR: …

【java9】java9新特性之内部类的钻石操作符

在Java中&#xff0c;钻石操作符&#xff08;diamond operator&#xff09;是一个语法糖&#xff0c;它用于在实例化泛型类时自动推断类型参数。这个操作符由一对尖括号<>组成&#xff0c;并且通常里面不留任何内容&#xff08;即“钻石”为空&#xff09;。使用钻石操作…