解决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配…

行列式求解

行列式 给出一个矩阵求 行列式。 输入: 1 3 1 -2 -1 0 3 2 3 1 -1 思路: 不能直接乘上上面行的倍数来消除本行对应元素。试试辗转相减法把。 (1,3)减去2倍(0,1)->(1,0) (5,3)减去0倍(3,5)减去1倍(2,3)减去1倍(1,2)减去2倍(0,1)->(1,0) 然…

其他细节配置

文章目录 contextoutputlibrarylibraryTarget targetmodule.noParseresolvemodulesextensionsalias externalsstats context context: path.resolve(__dirname, "app")该配置会影响入口和loaders的解析,入口和loaders的相对路径会以context的配置作为基准…

mybatix常见查询

使用MyBatis进行复杂SQL查询和操作是一种常见的需求,这通常涉及到动态SQL的使用。在MyBatis中,你可以使用XML映射文件或注解来构建这些复杂的SQL语句。以下是一些示例,覆盖你所提及的动态查询分页、分组、多表联查等情况。 动态查询分页 在M…

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 成员变…

C++——数据类型笔记

在C编程中,了解各类数据类型也是至关重要的。下面我会总结一下C中的数据类型,包括基本类型,符合类型和自定义类型。方便自己整理和理解。 1,基本类型 C中的基本类型是构建其他数据类型的基础,常见的基础类…

深圳消费扩容提质行动初见成效:多领域消费增长,商业环境持续优化

深圳市政府新闻办于近日召开发布会,深圳市商务局局长张非梦介绍了深圳市实施消费扩容提质行动的相关情况。根据发布会的内容,深圳市在今年一季度的消费市场展现出新气象和新活力,社消零总额达到2463.8亿元,其中新能源汽车、文化办…

多线程同步

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…

适配器模式(不同类型的 MQ 消息 首次下单消息)

目录 定义 适配不同类型的 MQ 消息 注册开户MQ 内部订单MQ 第三⽅订单MQ 查询⽤户内部下单数量接⼝ 查询⽤户第三⽅下单⾸单接⼝ MQ消息体适配类 代码实现 测试验证 接⼝使⽤适配 代码实现 分别实现两个不同的接⼝ 内部商品接⼝ 第三⽅商品接⼝ 测试验证 定义 …

使用递归方式实现多级菜单树 Java实现

在Java中&#xff0c;使用递归来实现菜单树通常涉及到遍历原始菜单列表&#xff0c;并为每个菜单项找到其对应的子菜单项。这个过程可以通过创建一个方法来完成&#xff0c;该方法会检查每个菜单项的parentId&#xff0c;并将其作为子菜单项添加到具有相应id的父菜单项的childr…

web前端学习笔记2

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

docker学习笔记7:centos docker安装mysql

在 CentOS 系统上使用 Docker 安装 MySQL 8 的过程相对简单。以下是一步步的指导: 1. 确保 Docker 已经安装 首先,你需要确保你的 CentOS 系统上已经安装了 Docker。可以通过以下命令检查 Docker 是否已经安装并且运行: sudo systemctl status docker如果 Docker 没有安装…

文件系统学习

软连接&#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;实现笔记…

前端调用WebSocket协议接口获取数据

目录 封装调用ws协议接口工具函数 页面调用 封装调用ws协议接口工具函数 params&#xff1a;请求参数cb&#xff1a;服务器请求成功返回数据的回调函数 function createWs(params, cb) {const ws new WebSocket("ws://124.222.224.186:8800");let timer null;// …

基于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…