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

问题: 用了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.mzph.cn/bicheng/5167.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

动手学深度学习——从零实现softmax分类模型

1. 数据集 fashion mnist是一个由10个类别图像组成的服装分类数据集,共包含60000张训练集图像和10000张测试集图像, 前者用于训练模型参数,后者用于评估模型性能。 2.1 数据集下载 先进行依赖库导入: %matplotlib inline …

图像识别应用技术

⚠申明: 未经许可,禁止以任何形式转载,若要引用,请标注链接地址。 全文共计3077字,阅读大概需要3分钟 🌈更多学习内容, 欢迎👏关注👀【文末】我的个人微信公众号&#xf…

Akamai 分布式“云+边缘”,打造下一代数字化基座

当下,数字化基础设施正逐步向分布式部署演化,云计算与边缘计算正在成为两大技术支柱。Gartner 数据显示,云服务占 IT 整体支出比例连年上涨,在过去一年已增长至12.1%;IDC 报告显示,截至2021年已有超过500亿…

Grafana页面嵌入自建Web应用页面

目录 一、应用场景 二、实现方式 1、修改Grafana配置文件 2、获取监控页面url 3、隐藏左侧和顶部菜单 一、应用场景 需要将Grafana监控页面嵌入自建Web应用页面,使Grafana监控页面成为自建Web应用的一部分。 二、实现方式 总体思路:修改Grafana配…

C++之STL-list+模拟实现

目录 一、list的介绍和基本使用的方法 1.1 list的介绍 1.2 list的基本使用方法 1.2.1 构造方法 1.2.2 迭代器 1.2.3 容量相关的接口 1.2.4 增删查改的相关接口 1.3 关于list迭代器失效的问题 二、模拟实现list 2.1 节点类 2.2 迭代器类 2.3 主类list类 2.3.1 成员变…

多线程同步

1.多线程并发 1).多线程并发引例 #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <assert.h> #include <pthread.h>int wg0; void *fun(void *arg) {for(int i0;i<1000;i){wg;printf("wg%d\n",wg);} } in…

tp6.0 rabbitmq死信队列

rabbitMq交换机&#xff0c;队列情况&#xff0c;先手动创建 1. 创建普通交换机exchange&#xff0c;普通队列order_queue_expire&#xff0c;队列设置属性&#xff1a; 消息过期时间&#xff1a;60000毫秒&#xff0c;过期绑定dead_exchange交换机&#xff0c;routing_key:de…

web前端学习笔记2

2. 网页穿上美丽外衣 2.0 代码地址 https://gitee.com/qiangge95243611/java118/tree/master/web/day02 2.1 什么是CSS CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,CSS 文…

文件系统学习

软连接&#xff1a;可以跨不同的磁盘块&#xff0c;创建出不同的inode节点 应连接&#xff1a;相同的inode节点&#xff0c;不同的文件名字记录在父亲节点目录中 分区(fdisk)&#xff0c;格式化(mkfs)&#xff0c;挂载(mount)&#xff0c;大于2T分区&#xff08;parted&#…

FSNotes for Mac v6.7.1中文激活版:强大的笔记管理工具

FSNotes for Mac是一款功能强大的文本处理与笔记管理工具&#xff0c;为Mac用户提供了一个直观、高效的笔记记录和整理平台。 FSNotes for Mac v6.7.1中文激活版下载 FSNotes支持Markdown语法&#xff0c;使用户能够轻松设置笔记格式并添加链接、图像等元素&#xff0c;实现笔记…

基于H.264的RTP打包中的组合封包以及分片封包结构图简介及抓包分析;FU-A FU-B STAP-A STAP-B简介;

H.264视频流的RTP封装类型分析&#xff1a; 前言&#xff1a; 1.RTP打包原则&#xff1a; RTP的包长度必须要小于MTU(最大传输单元)&#xff0c;IP协议中MTU的最大长度为1500字节。除去IP报头&#xff08;20字节&#xff09;、UDP报头&#xff08;8字节&#xff09;、RTP头&a…

C#编程模式之装饰模式

创作背景&#xff1a;朋友们&#xff0c;我们继续C#编程模式的学习&#xff0c;本文我们将一起探讨装饰模式。装饰模式也是一种结构型设计模式&#xff0c;它允许你通过在运行时向对象添加额外的功能&#xff0c;从而动态的修改对象的行为。装饰模式本质上还是继承的一种替换方…

设计模式 基本认识

文章目录 设计模式的作用设计模式三原则设计模式与类图设计模式的分类 设计模式的作用 设计模式是在软件设计过程中针对常见问题的解决方案的一种通用、可重用的解决方案。设计模式提供了一种经过验证的方法&#xff0c;可以帮助开发人员解决特定类型的问题&#xff0c;并在软…

【论文阅读】IPT:Pre-TrainedImageProcessingTransformer

Pre-TrainedImageProcessingTransformer 论文地址摘要1. 简介2.相关作品2.1。图像处理2.2。 Transformer 3. 图像处理3.1. IPT 架构3.2 在 ImageNet 上进行预训练 4. 实验4.1. 超分辨率4.2. Denoising 5. 结论与讨论 论文地址 1、论文地址 2、源码 摘要 随着现代硬件的计算能…

mybatis工程需要的pom.xml,以及@Data 、@BeforeEach、@AfterEach 的使用,简化mybatis

对 “mybatis - XxxMapper.java接口中方法的参数 和 返回值类型&#xff0c;怎样在 XxxMapper.xml 中配置的问题” 这篇文章做一下优化 这个pom.xml文件&#xff0c;就是上面说的这篇文章的父工程的pom.xml&#xff0c;即&#xff1a;下面这个pom.xml 是可以拿来就用的 <?…

7天入门Android开发之第1天——初识Android

一、Android系统 1.Linux内核层&#xff1a; 这是安卓系统的底层&#xff0c;它提供了基本的系统功能&#xff0c;如内存管理、进程管理、驱动程序模型等。安卓系统构建在Linux内核之上&#xff0c;借助于Linux的稳定性和安全性。 2.系统运行库层&#xff1a; 这一层包括了安卓…

GITEE本地项目上传到远程

由于需要&#xff0c;我这边将本地的仓库上传至GITEE。之前在网上搜索了相关的文档&#xff0c;但是步骤很繁琐&#xff0c;我这边介绍一个非常简单的。 一、在GITEE新建仓库 跟着指引一步步新建。 二、打开本地仓库&#xff0c;删除.git文件 默认情况下不会有这个.git文件&a…

【保姆级讲解如何安装与配置Xcode】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

在kuboard中添加k8s集群

1.登录kuboard后&#xff0c;点击添加集群面板 系统会跳转到k8s集群添加页面&#xff0c;按照页面提示输入自身的集群信息即可&#xff0c;此处没有什么难点。 添加成功后&#xff0c;点击集群面板&#xff0c;然后点击集群概要信息&#xff0c;就可以查看集群节点信息。 集群节…

ssm092基于Tomcat技术的车库智能管理平台+jsp

车库智能管理平台设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本车库智能管理平台就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短…