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

最新推荐文章于 2024-04-10 11:03:07 发布
最新推荐文章于 2024-04-10 11:03:07 发布
阅读量836 收藏
点赞数 2
分类专栏： VUE 文章标签： vue.js echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z_qianzhi/article/details/118962701
版权

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

小啊慧
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Echarts报错Error in mounted hook: “Error: Initialize failed: invalid dom.“
m0_74087046的博客
05-27 6013
Error in mounted hook: "Error: Initialize failed: invalid dom."
Vue Echarts报错 Error: Initialize failed: invalid dom.
m0_60822033的博客
11-18 931
Vue Echarts报错 Error: Initialize failed: invalid dom.
echarts图表报错 Error in created hook: “Error: Initialize failed: invalid dom.“
qq_62851576的博客
02-26 759
放在入了页面加载事件created里面，created这时候还只是创建了实例，但模板还没挂载完成。通过延迟加载getChart（）方法，使DOM先于getChart方法加载，为DOM加载提供时间。dom还没挂载完成，echarts.init() 就已经开始执行。setTimeout（）方法用于在指定毫秒数后调用。使用create情况下使用延迟加载。用mounted还是会报错。
vue引用echats报错Initialize failed: invalid dom
weixin_41610842的博客
09-10 1206
这是dom加载问题，引入Echarts因为在Dom还没加载的时候，option 获取元素以及init开始获取，就会报错，解决方法可以尝试：
ECharts 报错：Initialize failed: invalid dom 的解决思路
litterCarp的博客
06-27 1984
Initialize failed: invalid dom --eCharts
Vue echarts初始化实例Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“
一往直“前”，直上云“端”
08-13 747
项目场景： 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坑点杂谈（七）在Vue中引入Echarts报错 Cannot read property ‘init‘ of undefined
ODST_TheSolverO5的博客
12-13 1987
Vue坑点杂谈（七）在Vue中引入Echarts报错 Cannot read property ‘init’ of undefined 一、写在开头 最近使用Echart时发现与Vue有些不兼容的地方，会出现一些奇怪的报错，在这里记录一下帮助同样遇到问题的朋友们。 二、发现问题 出现问题是在mounted（）中使用官方示例的时候报了以下错误： Error in mounted hook: “TypeError: Cannot read property ‘init’ of undefined”。 三、解决问
vue中使用echarts报错Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“
丑小鸭变黑天鹅的博客
08-19 831
vue中使用echarts报错Error in mounted hook: "TypeError: Cannot read property 'init' of undefined"一、问题描述二、解决办法 一、问题描述 做项目的时候遇到一个问题，在vue中使用命令npm install echarts --save安装了echarts，下载和引入都没问题，但是使用的时候报错 出现这个问题的原因，是因为默认安装了最新版本的echarts，还不够稳定 二、解决办法 卸载掉安装的echarts，然后重新安装指
使用Echarts报错:this.dom.getContext is not a function；
前端开发小白9527
04-20 8448
echarts 报错 this.dom.getContext is not a function; 原因:因为在初始化echarts的时候，echarts.js规定只能使用dom原生方法获取标签，document.getElementById('id')；这里我结合vue使用 所以用的是$refs ，我印象中使用$refs是可以的，但是当我打印两个对象查看时 差异性就可以显现出来，一个是原生的dom对象，另一个却是Vue组件实例对象 代码部分: <div class="
vue中在一个页面复用同一个echarts写的组件不能显示的问题，使用ref解决问题及原理分析
m0_63229791的博客
04-10 747
因此，当你在模板中使用 ref="element1" 时，它会将该 ref 与第一个元素关联起来；当你使用 ref 创建一个引用时，它将返回一个带有 .value 属性的响应式对象，该属性可以用于访问引用的值。回答：按顺序依次关联，在 Vue 3 中，当你创建 ref 并将其应用到多个元素时，Vue 会根据 ref 的创建顺序依次将这些元素与对应的 ref 关联起来。②再创建一个 Vue 3 的响应式引用 perChart ，其初始值为 null，将自动与上面模板的dom元素关联起来。
vue项目使用echart，以及报错处理Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined
weixin_47981445的博客
09-30 2835
vue项目中使用echarts，报错Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined 错误代码图片 解决思路： 原因：是因为下载的echarts为最新版本，很多时候使用的echarts示例都是不支持的，因此在项目运行时会报错。 问题处理： 首先：需要卸载掉项目安装的最新版本echarts //卸载代码指令 npm uninstall echarts 然后：安装指定的并且稳定的echarts版本号，可以百
Error in created hook: “Error: Initialize failed: invalid dom.“
ALDNOAH_K的博客
11-05 4873
原因分析:我这边在 created l里做了一个refresh的一个定时刷新方法,但因为我将 refresh 方法放到后面就导致先是加载了 '生产统计','能源监控',,'质量墙','生产进度监控'等这几个方法,最后载 refresh方法,这才导致报错.解决方法:将refresh 方法最前面就行,让其先执行refres。报错解析:初始化时没有获取到DOM元素。
vue使用echarts简单教程（错误：Error in mounted hook: “TypeError: Cannot read property ‘getAtrribute’ of undef）
lanseguhui的博客
05-21 3978
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
Echarts最新版引入报错：Error in mounted hook: “TypeError: Cannot read property ‘init’ of undefined
xiaoxiannvh的博客
12-09 668
今天引入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
echarts报错 Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init‘)“
BaiYixin的博客
03-20 216
原先，按文档引用echarts，于 main.js 文件中输入。echarts图像加载时报错。对第一行导入进行修改。
Vue 引用echarts报错Cannot read property ‘init‘ of underfined
林中明月间丶
04-21 470
https://blog.csdn.net/weixin_43854764/article/details/102543703 引用echarts报错Cannot read property 'init' of underfined https://blog.csdn.net/dairen_j/article/details/111398475?utm_medium=distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromMac.
Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init‘)“
潮汐未见潮落的博客
07-01 1143
Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init‘)“
Vue echarts初始化实例报错“in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“”
qq_48009509的博客
08-20 240
解决方法1 卸载高本版的echarts，重新安装低版本的echarts npm install echarts@4.8.0 --save 解决方法2 因为新本版的echarts它的引入方式发生了改变，所有需要用新的引用方式 import * as echarts from 'echarts'
Vue echarts初始化实例“Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“”
初心不改
08-01 624
vue charts初始化实例报错： “Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“” 怎么修改都有问题。网上查了下无语地发现居然是因为使用的echarts版本太高不稳定。。。 吐了。 按照这位小哥 所说，卸载当前版本，安装了各地版本果然没报错且成功渲染出来了。 ...
vue报错 Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'getElementById')"
最新发布
04-20
这个错误通常是因为在Vue的mounted钩子函数中试访问一个未定义的元素ID导致的。可能的原因有以下几种： 1. 元素ID不存在：请确保你在mounted钩子函数中访问的元素ID是存在的，可以通过在HTML模板中添加对应的元素ID...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小啊慧

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

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

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

打赏作者

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

抵扣说明：

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

余额充值