vue中使用echarts报错Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“

最新推荐文章于 2023-01-14 20:28:54 发布
最新推荐文章于 2023-01-14 20:28:54 发布
阅读量870 收藏 1
点赞数
分类专栏： Vue日常总结 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41880073/article/details/119802515
版权

vue中使用echarts报错Error in mounted hook: "TypeError: Cannot read property 'init' of undefined"

一、问题描述

做项目的时候遇到一个问题，在vue中使用命令npm install echarts --save安装了echarts，下载和引入都没问题，但是使用的时候报错
在这里插入图片描述

出现这个问题的原因，是因为默认安装了最新版本的echarts，还不够稳定

二、解决办法

卸载掉安装的echarts，然后重新安装指定的旧版本的echarts

npm uninstall echarts
npm install echarts@4.8.0 --save

然后问题就解决了

丑小鸭变黑天鹅
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
[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 ‘getAttribute‘ of null“
weixin_36106791的博客
07-15 2806
问题出现场景 今天在vue中引入echarts时，运行报错 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null】 ## 问题排查 在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，代码如下： var myChart = echarts.init(this.$refs.map)
Vue echarts初始化实例Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“
一往直“前”，直上云“端”
08-13 760
项目场景： 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“
z_qianzhi的博客
07-21 836
bug1：Error in mounted hook: "TypeError: Cannot read property 'init' of undefined" 原因：echarts引入錯誤 解決方法：letecharts=require('echarts') bug2：Error in created hook: "Error: Initialize failed: invalid dom." 原因：调用echarts的生命周期写在了created ，echarts图表还没有...
vue项目使用echart，以及报错处理Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined
weixin_47981445的博客
09-30 2847
vue项目中使用echarts，报错Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined 错误代码图片 解决思路： 原因：是因为下载的echarts为最新版本，很多时候使用的echarts示例都是不支持的，因此在项目运行时会报错。 问题处理： 首先：需要卸载掉项目安装的最新版本echarts //卸载代码指令 npm uninstall echarts 然后：安装指定的并且稳定的echarts版本号，可以百
Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“
qq_43339903的博客
06-26 1万+
echarts Cannot read property ‘init‘ of undefined 报错问题 查看引入对错 Error in mounted hook: “TypeError: Cannot read property ‘init’ of undefined” 我直接 import echarts from 'echarts’时也会报错，所以后面修改了引入时的写法import * as echarts from 'echarts’ ...
vue报错 Error in mounted hook “TypeError Cannot read properties of undefined (reading ‘$on‘)“
m0_67393593的博客
03-06 6990
vue错误打印 vue.esm.jsa026:628 [Vue warn]: Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘$on’)” 解决方式: 在main.js加入代码 // event Bus 用于无关系组件间的通信。 Vue.prototype.$bus = new Vue() ...
vue使用echarts简单教程（错误：Error in mounted hook: “TypeError: Cannot read property ‘getAtrribute’ of undef）
lanseguhui的博客
05-21 3979
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
Error in mounted hook: “TypeError: Cannot read property ‘XXXXX‘ of undefined“
热门推荐
bihaiyanyu的专栏
10-22 3万+
今天使用iview画页面时遇到一个很简单但是搞了很久的bug，加了一个控件 <user-select style="width:200px" @on-change="handleSelect" ref="user" v-model="form.userCode"> </user-select> 然后使用$refs调用组件属性 this.$refs.user.initData(); 然后神奇的地方出现了，不管怎么该，一直报Error in mounted hook:
Echarts最新版引入报错：Error in mounted hook: “TypeError: Cannot read property ‘init’ of undefined
xiaoxiannvh的博客
12-09 670
今天引入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
Vue echarts初始化实例“Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“”
初心不改
08-01 643
vue charts初始化实例报错： “Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“” 怎么修改都有问题。网上查了下无语地发现居然是因为使用的echarts版本太高不稳定。。。 吐了。 按照这位小哥 所说，卸载当前版本，安装了各地版本果然没报错且成功渲染出来了。 ...
Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init‘)“
潮汐未见潮落的博客
07-01 1157
Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init‘)“
Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘dispatch‘)“
weixin_68714627的博客
01-12 4553
vuex版本问题
Error in mounted hook: TypeError: Cannot read properties of undefined (reading isHiddenDay ) found
H-rosy的博客
01-14 4627
Error in mounted hook: TypeError: Cannot read properties of undefined (reading isHiddenDay ) found 无法读取未定义的属性‘isHiddenDay’. 在vue中使用fullcalendar在mounted钩子中渲染报错
Echarts报错 Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init‘)
qq_51066068的博客
09-22 2324
Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init‘)
[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“
weixin_47181907的博客
06-15 5313
出现以下问题是在mounted（）中使用官方示例的时候报了以下错误： Error in mounted hook: “TypeError: Cannot read property ‘init’ of undefined” 或 Cannot read property ‘init’ of undefined 解决方案： 放弃import,改用require的方式引入库 这里是引用 import echarts from 'echarts //把这种引入方式改为下面的方式 let echarts =
echarts使用报错Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'init')"，但是引入没有问题
最新发布
05-18
这个错误通常出现在 Vue.js 项目中，可能原因是您在 mounted 钩子函数中调用了 echarts 实例化方法，但是实例还没有初始化成功。 解决方法： 1. 确保 echarts 的引入没有问题，可以尝试在控制台输入 `echarts` 看是否能够正常输出 echarts 对象。 2. 确保在 mounted 钩子函数中调用 echarts 实例化方法的代码在 DOM 渲染完成后执行，可以使用 Vue.js 提供的 `$nextTick` 方法来确保 DOM 已经渲染完成。 示例代码： ``` mounted() { this.$nextTick(() => { const chartDom = document.getElementById('chart') const myChart = echarts.init(chartDom) // echarts 实例化代码 }) } ``` 3. 如果上述方法仍然无法解决问题，可以尝试将 echarts 实例化的代码放到 created 钩子函数中，或者在组件的 data 属性中定义一个变量，然后在 mounted 钩子函数中对该变量进行赋值并实例化 echarts。 示例代码： ``` data() { return { myChart: null } }, mounted() { this.$nextTick(() => { const chartDom = document.getElementById('chart') this.myChart = echarts.init(chartDom) // echarts 实例化代码 }) } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值