Vue使用echarts報錯Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“

Echarts使用错误与解决方案
最新推荐文章于 2024-03-20 09:12:23 发布
原创 最新推荐文章于 2024-03-20 09:12:23 发布 · 920 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #echarts

本文介绍了两个在使用Echarts过程中遇到的常见错误及其解决方法。错误一：由于echarts引入错误导致的‘TypeError: Cannot read property 'init' of undefined’，解决方法是正确引入echarts库，例如使用`let echarts = require('echarts')`。错误二：在created钩子中初始化Echarts导致的‘Error: Initialize failed: invalid dom.’，解决办法是将初始化操作放在mounted生命周期钩子中，确保DOM已经渲染完成。

bug1：Error in mounted hook: "TypeError: Cannot read property 'init' of undefined"

原因：echarts引入錯誤

解決方法：let echarts = require('echarts')

bug2：Error in created hook: "Error: Initialize failed: invalid dom."

 

 原因： 调用echarts的生命周期写在了created ，echarts图表还没有渲染，就调用了created里面的方法了

解決方法：调用echarts的生命周期写在mounted

[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘getAttribute‘ of null“
郭宝的博客
06-24 11万+
错误场景一： 错误提示： 在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，代码如下： // 基于准备好的dom，初始化echarts实例 var bar_dv = document.getElementById('bar_dv'); let myChart = this.$echarts.init(bar_dv) 解...
vue使用echarts简单教程（错误：Error in mounted hook: “TypeError: Cannot read property ‘getAtrribute’ of undef）
lanseguhui的博客
05-21 4100
1.安装依赖 npm install echarts -S 2.在main.js中引入 import echarts from 'echarts' Vue.prototype.$echarts = echarts 3.在组件中使用 html标签,一定要设置宽高 <div ref="activity" style="width:100%;height:285px"></div> 定义一个初始化的方法中写 echartsInit(){ let act
Vue echarts初始化实例“Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“”
初心不改
08-01 703
vue charts初始化实例报错： “Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“” 怎么修改都有问题。网上查了下无语地发现居然是因为使用的echarts版本太高不稳定。。。 吐了。 按照这位小哥 所说，卸载当前版本，安装了各地版本果然没报错且成功渲染出来了。 ...
Echarts报错Error in mounted hook: “Error: Initialize failed: invalid dom.“
m0_74087046的博客
05-27 7132
Error in mounted hook: "Error: Initialize failed: invalid dom."
Vue Echarts报错 Error: Initialize failed: invalid dom.
m0_60822033的博客
11-18 1116
Vue Echarts报错 Error: Initialize failed: invalid dom.
Vue echarts初始化实例Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“
一往直“前”，直上云“端”
08-13 910
项目场景： Vue echarts初始化实例：Error in mounted hook: “TypeError: Cannot read property ‘init’ of undefined” 问题描述： 1.安装echarts依赖 　　通过 npm 获取 echarts，npm install echarts --save 2.main.js中全局引用 import echarts from 'echarts' // 全局方法挂载 Vue.prototype.$echarts
vue中使用echarts报错Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“
丑小鸭变黑天鹅的博客
08-19 1001
vue中使用echarts报错Error in mounted hook: "TypeError: Cannot read property 'init' of undefined"一、问题描述二、解决办法 一、问题描述 做项目的时候遇到一个问题，在vue中使用命令npm install echarts --save安装了echarts，下载和引入都没问题，但是使用的时候报错 出现这个问题的原因，是因为默认安装了最新版本的echarts，还不够稳定 二、解决办法 卸载掉安装的echarts，然后重新安装指
VM328:1 [Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘0‘ of undefined“ found
Runpire的博客
08-27 934
错就是在pages 页面文件里面的 home 文件夹 里面的组件 的menu.vue 里面的js 里面的 一个数据 是 underfind 没有值 自己查看什么问题，console.log() 看看哪一步没有拿到值了，或者自己的数据格式有没有写错写漏什么东西，错就是那一步，就思考那一步可能会出错的可能性 ...
【echarts报错】[Vue warn]: Error in mounted hook (Promise/async): “TypeError: Cannot read properties of
pakerder的博客
12-08 5176
跟我们导入的方法有关，如果采用这种 import echarts1 from ‘echarts’ 导入，它是import导入的简便形式，其含义是把echarts里面的默认暴露都存在变量echarts1 里面，而报错是因为我们引用echarts里面的init方法显示没有定义，所以猜测可能是在echarts 里面的。
这么写报错Error in mounted hook: "TypeError: Cannot read property 'addEventListener' of undefined"
最新发布
05-01
好的，用户现在遇到了在Vue2中使用HammerJS实现图片捏合缩放功能时报错的问题，具体错误是“TypeError: Cannot read property 'addEventListener' of undefined”，出现在mounted钩子中。我需要仔细分析可能的原因，...
echarts报错 Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init‘)“
BaiYixin的博客
03-20 401
原先，按文档引用echarts，于 main.js 文件中输入。echarts图像加载时报错。对第一行导入进行修改。
Echarts最新版引入报错：Error in mounted hook: “TypeError: Cannot read property ‘init’ of undefined
xiaoxiannvh的博客
12-09 775
今天引入Echart时，一引入就报错： Error in mounted hook: “TypeError: Cannot read property ‘init’ of undefined” 造成问题的原因有两个，一个是初始化的时候没有获取到DOM元素，另一个是引入Echart这个库的方式错误，解决如下： 1.使用ref获取DOM元素： this.Chart = echarts.init(this.$refs.chartDom) 2.改用require的方式引入库： let echarts = requi
Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init‘)“
潮汐未见潮落的博客
07-01 1255
Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init‘)“
vue项目使用echart，以及报错处理Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined
weixin_47981445的博客
09-30 3080
vue项目中使用echarts，报错Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined 错误代码图片 解决思路： 原因：是因为下载的echarts为最新版本，很多时候使用的echarts示例都是不支持的，因此在项目运行时会报错。 问题处理： 首先：需要卸载掉项目安装的最新版本echarts //卸载代码指令 npm uninstall echarts 然后：安装指定的并且稳定的echarts版本号，可以百
Vue echarts初始化实例报错“in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“”
qq_48009509的博客
08-20 321
解决方法1 卸载高本版的echarts，重新安装低版本的echarts npm install echarts@4.8.0 --save 解决方法2 因为新本版的echarts它的引入方式发生了改变，所有需要用新的引用方式 import * as echarts from 'echarts'
[Vue warn]: Error in created hook: "TypeError: dom is null"
信徒博客
09-21 4965
报错信息如下 错误原因 就是dom（一些html标签）还没有渲染，导致dom是null的 mouted是html渲染以后的方法，只能说你的图表节点如echarts还没有渲染就调用了mouted里面的方法了； ...
Vue坑点杂谈（七）在Vue中引入Echarts报错 Cannot read property ‘init‘ of undefined
ODST_TheSolverO5的博客
12-13 2106
Vue坑点杂谈（七）在Vue中引入Echarts报错 Cannot read property ‘init’ of undefined 一、写在开头 最近使用Echart时发现与Vue有些不兼容的地方，会出现一些奇怪的报错，在这里记录一下帮助同样遇到问题的朋友们。 二、发现问题 出现问题是在mounted（）中使用官方示例的时候报了以下错误： Error in mounted hook: “TypeError: Cannot read property ‘init’ of undefined”。 三、解决问
vue引用echats报错Initialize failed: invalid dom
weixin_41610842的博客
09-10 1296
这是dom加载问题，引入Echarts因为在Dom还没加载的时候，option 获取元素以及init开始获取，就会报错，解决方法可以尝试：
echarts图表报错 Error in created hook: “Error: Initialize failed: invalid dom.“
qq_62851576的博客
02-26 1304
放在入了页面加载事件created里面，created这时候还只是创建了实例，但模板还没挂载完成。通过延迟加载getChart（）方法，使DOM先于getChart方法加载，为DOM加载提供时间。dom还没挂载完成，echarts.init() 就已经开始执行。setTimeout（）方法用于在指定毫秒数后调用。使用create情况下使用延迟加载。用mounted还是会报错。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小啊慧

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值