在Vue中使用Echarts，报错created hook: “TypeError: Cannot read property ‘getAttribute‘ of null“

最新推荐文章于 2022-11-17 20:40:55 发布
最新推荐文章于 2022-11-17 20:40:55 发布
阅读量384 收藏 1
点赞数 1
分类专栏： 问题 文章标签： vue echarts bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45073203/article/details/115756604
版权

问题

在这里插入图片描述

解决办法

报错原因： Echarts的图形容器div还未生成，就对其进行了初始化所造成的。

解决：
1. 找到调用echarts初始化的Vue文件
在这里插入图片描述
2. 更改created为mounted
在这里插入图片描述

问题解决！

常青ฅ ̳͒
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null"
jiuweiyaoy的博客
01-09 1791
//判断元素是否已加载,报错的原因就是因为第一次页面初始化加载时，元素和ref都未 //加载完成，就使用echarts.init(this.$refs.main),等再次使用时报错信息又没有 //因为缓存和时间的因素元素和ref都已经挂在完成 //所以在使用echart...
vue弹窗中echarts报错typeError: Cannot read property ‘getAttribute‘ of null
qq_37642495的博客
12-16 416
今天需要在抽屉里面绘制echarts图形 发现个神奇的报错 不显示图形 还报错 ： typeError: Cannot read property ‘getAttribute’ of null 百度下知道是因为拿不到dom节点 所以报错 综合分析下网上的解决办法 觉得下面的办法比较简单 还能顺利解决： 在弹窗的弹出事件里出发一下函数（eg: dialog、drawer 的@open事件） openChart() { const self = this setTimeo
Error in created hook: "TypeError: Cannot read property 'getAttribute' of undefined"
大白的博客
11-11 7272
表现：vue项目中，进入页面的时候，报错如下 原因：我把Echarts 的初始化，写到了created 的回调函数中了， 解决办法：将初始化写到mounted的回调函数中 理由： created: 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染 mounted：在模板渲染成html后调用，通常是初始化页面完成之后，再对html的dom节点进行操作 注意：如果是弹框中包...
vue中使用echarts出现报错： Cannot read property 'getAttribute' of null
柠檬不萌只是酸i
07-08 1万+
控制台出现 “TypeError: Cannot read property 'getAttribute' of null” 报错。 解决方法： （1）查看调用使用图表的id是否正确。 （2）需要将echarts.js文件放在</body>之前就行，但是不要放在<head></head> 里面。 （3）查看下页面文件加载的顺序是否正确。 以上3...
关于在VUE中使用Echarts时出现Cannot read property getAttribute of null 问题
Mo’的博客
06-11 3014
关于在VUE中使用Echarts时出现getAttribute of null问题 记录一下我自己遇到这种情况是在使用v-if切换echarts图时 就会这样报错，查过问题之后是因为DOM树改变了，而echarts图数据来了却找不到容器，尽管自己v-if绑定的判断值先改变，但是依然如此报错 解决方案：this.$nextTick() 这个方法可以延迟到DOM更新之后再执行 this.$nextTick(()=>{ this.initChart(a,b,c) }) 在v-if判断之后用这个方法，让
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#Object‘的解决方法
12-09
当你遇到“Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'”这样的错误，通常是因为在同一个模块中混用了CommonJS（`require`和`module.exports`）和ES6模块（`import`...
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#&lt;Object&gt;‘的解决
08-30
在Vue开发过程中，有时会遇到一个常见的错误：`Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'`。这个错误通常发生在使用Webpack打包Vue应用时，由于模块导入导出规范的...
Sawyer-zh#study-note#Vue-js路由报错TypeError-Cannot-read-property-c-
07-25
title: 'Vue.js路由报错:TypeError: Cannot read property ''_c'' of undefined'错误详情：像上面这
Vue打包Cannot read property 'tapPromise' of undefined报错处理.docx
01-21
然而，在使用Vue.js时，我们可能会遇到一些报错信息，例如Cannot read property 'tapPromise' of undefined。这是一种TypeError，发生在webpack编译过程中。下面我们将详细介绍这个报错信息的解决方法。 一、报错...
在Vue中使用echarts的方法
08-28
在Vue中使用ECharts的方法 Vue框架是当前最流行的前端框架之一，ECharts是中国最流行的数据可视化工具之一。在实际项目中，我们经常需要将ECharts集成到Vue项目中，以实现数据的可视化展示。因此，本文将详细介绍...
解决 Error in created hook: "ReferenceError: param is not defined"
热门推荐
sinat_41838539的博客
03-09 2万+
F12 打开控制台，发现此条错误信息： Error in created hook: "ReferenceError: param is not defined" hook 名词有钩子的意思，译为：有错误发生在调用create函数的时候（vue中create生命周期钩子函数）。 参数param没有被定义，然后点击相应的 js代码中，排查错误即可。 ReferenceError 在作用域中...
VueCli安装v-charts后报错
weerrqq的博客
09-22 345
VueCli安装v-charts后报错 官方下载方式：npm i v-charts echarts -S 然后就报错，依赖没有echarts This dependency was not found:echarts/lib/visual/dataColor in ./node_modules/echarts-liquidfill/src/liquidFill.js To install it, you can run: npm install --save echarts/lib/visual/dataC
Vue echarts初始化实例“Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“”
初心不改
08-01 620
vue charts初始化实例报错： “Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“” 怎么修改都有问题。网上查了下无语地发现居然是因为使用的echarts版本太高不稳定。。。 吐了。 按照这位小哥 所说，卸载当前版本，安装了各地版本果然没报错且成功渲染出来了。 ...
vue axios并发请求 【 解决echarts报错Cannot read property ‘getAttribute‘ of null】
weixin_52084329的博客
11-17 550
在写中国地图和世界地图切换的时候，由于要两次进行网络请求调用api，而echarts渲染又不能多次渲染，所以就报了这么一个错误：echarts.js Uncaught TypeError: Cannot read property ‘getAttribute’ of null 错误原因分析：解决方法： 让两个请求都调用完，在进行渲染——执行多个并发请求 官方示例： 使用axios配合axios.all()、axios.spread()同时发送多个请求，axios.all()并发执行两个请求，两个请求执行完成
vue报错 created hook错误
轻风细雨_林木木
01-04 2183
如图： 原因： 可能是由于生命周期函数调用了不生效的方法 例如： 解决办法：注销方法就行。
解决 Error in created hook: “TypeError: Cannot read property ‘xxxxxx‘ of undefined“
sm923的博客
07-02 2万+
解决vue属性未定义问题
【前端可视化】Echarts 报错：[Vue warn]: Error in mount hook: “TypeError: Cannot read properties of null (readi...
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
03-12 435
错误原因 出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化， 利用Vue中的ref和$refs 来代替document.getElementById()获取该图形容器对象 <div id="mian" ref="chart" ></div> .... var myChart = this.$echarts.init(this.$refs.chart);...
使用Echarts报错 Error in created hook: “TypeError: Cannot read property ‘getAttribute‘ of null“
单飞吧的博客
09-27 1857
出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的 解决办法 只需要延迟初始化就可以，也就是你的 option 使用 this.$nextTick(function () { }) 延迟执行 optionPie() { this.$nextTick(function () { // 通过id获取获取画布 const myChart = echarts.init(document.getElementById('pie')); //图表数据 l
Vue进阶（三十七）：created、mounted等钩子函数整理
IT全栈 华强工作室
02-18 7945
1.钩子函数 钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。（百度百科） 2.相对于前端来讲 对于前端来说，钩子函数就是指再所有函数执行前，我先执行了的函数，即 钩住 我感兴趣的函数，只要它执行，我就先执行。 created:htm...
Error in created hook: "TypeError: Cannot read properties of null (reading 'getAttribute')"
最新发布
10-19
这个错误通常是由于在 Vue 组件的 created 钩子函数中访问了一个还未被渲染的 DOM 元素导致的。你可以检查一下你的代码，看看是否在 created 钩子函数中访问了某个 DOM 元素的属性。 如果你需要在组件创建后访问 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值