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

ops/2024/9/23 4:33:55/

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

相关文章

Android使用kts发布aar到JitPack仓库

Android使用kts发布aar到JitPack 之前做过sdk开发,需要将仓库上传到maven、JitPack或JCenter,但是JCenter已停止维护,本文是讲解上传到JitPack的方式,使用KTS语法,记录使用过程中遇到的一些坑.相信Groovy的方式是大家经常使用的,…

结构体介绍(2)

结构体介绍(2) 前言一、结构体的内存对齐之深入理解为什么存在内存对齐?修改默认对齐数 二、结构体传参2.1:该怎么传参呢? 三、结构体实现位段3.1什么是位段位段的内存分配位段的跨平台问题 总结 前言 根据之前讲了结…

【八股】AQS,ReentrantLock实现原理

AQS 概念 AQS 的全称是 AbstractQueuedSynchronized (抽象队列同步器),在java.util.concurrent.locks包下面。 AQS是一个抽象类,主要用来构建锁和同步器,比如ReentrantLock, Semaphore, CountDownLatch,里…

使用python和pyqt开发的抽签小程序v1.0

使用python和pyqt开发的抽签小程序v1.0 作用效果代码 作用 对输入框中的文本进行随机抽取,抽取数量为3行。 效果 代码 import sys import random from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QTextEdit, QPushButton, QMessageBoxclass Ra…

Android Studio学习笔记——数据库存储

Android Studio学习笔记——数据库存储 6.1持久化技术简介6.2 文件存储将数据存储到文件中从文件中读取数据 6.3 SharedPreferences存储6.3.1 将数据存储到是SharedPreferences中6.3.2 从SharedPreferences中读取数据6.3.3 实现记住密码功能 6.4 SQLite数据库存储6.4.1 创建数据…

急速入门Prompt开发之跨国婚姻小助手

文章目录 前言MoonShot编写提示词对接模型WebUI编写完整代码 前言 整个活,同时分享技术~至于是啥活,懂得都懂,男孩子自强自尊自爱!!! 先看看实现效果吧: 那么这里的话,我们使用到的…

Linux内核深入学习 - 内核同步

目录 内核抢占 同步原语 per-CPU变量 API Per CPU 变量的应用 per CPU 变量在多文件下的用法 原子操作 API 优化和内存屏障 自旋锁 自旋锁 API 函数 读写锁 API RCU 信号量 API 1. 信号量的结构: 2. 初始化函数sema_init 3. 可中断获取信号量函数…

学习mysql相关知识记录

执行一条select语句,期间发生了什么? MySQL的执行流程: 连接器 TCP连接 查询缓存 很鸡肋被取消 解析SQL 解析器 语法分析词法分析 执行SQL 预处理器 检查是否存在将 select * 中的 * 符号,扩展为表上的所有列 优化器 优化器主要…