在vue中引入echarts ，应用报错， “TypeError Cannot read properties of undefined (reading ‘init‘)“

最新推荐文章于 2025-05-26 13:41:57 发布
原创 最新推荐文章于 2025-05-26 13:41:57 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts #vue.js #javascript

本文介绍了在Vue项目中遇到的Echarts引入错误，通过将版本从5.2.2降至5以下并采用按需引入的方式解决了问题。修复后，Echarts渲染恢复正常。

在main.js中引入echarts

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

运行页面，报错

解决方案：

引入方式改为如下写法，按需引入也按照对应的方式引入，通过查阅相关文档，导致此现象的原因可能是版本不一致，个人使用的是5.2.2版本的，将版本降低到5以下也能解决此问题

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

结果：

修改引入方式后，echarts渲染正常

【异常】报错：TypeError: Cannot read properties of undefined (reading ‘init‘)
本本本添哥
11-28 3011
在vue当中引用echarts，控制台报错： “TypeError: Cannot read properties of undefined (reading ‘init‘)
vue2/3 - 解决报错TypeError: Cannot read properties of undefined (reading ‘wrapper‘)，vue打包或运行时控制台报错完美解决方案
高级前端工程师
05-10 3545
vue3，vue2，报错，无法打包，无法运行，vue3打包时报错，vue打包build出错，wrapper属性，TypeError: Cannot read properties of undefined (reading ‘wrapper‘)，vue如何解决报错，浏览器控制台报错，npm run serve运行项目时正常显示，但npm run build构建时却报错，vue运行没问题但打包就会报错，怎么解决这个问题，如何解决问题并成功打包发布，代码中尝试访问一个未定义对象的 wrapper属性。在vue2
echarts dataZoom 组件报Cannot read properties of undefined (reading ‘type‘)
Sherry Tian的博客
02-06 1914
使用dataZoom组件，拖拽时报Cannot read properties of undefined (reading 'type')错误，且拖拽不生效问题解决方案。
vue 中使用echart5.2发生TypeError: Cannot read properties of undefined (reading ‘init‘)
qgbihc的专栏
09-24 5129
在VUE项目中使用echart，以前使用的时4.8版本，一切正常。 但是把echart的版本改为5.2后，提示出现如下错误： TypeError: Cannot read properties of undefined (reading 'init')" 查看官方文档： Apache ECharts 5 升级指南 有明确的说明，引用方式的变化： 1、如果使用者在 v4 中这样引用了 echarts： import echarts from 'echarts'; // 或者按需引入 import echar
vue引入echarts报错Cannot read properties of undefined (reading ‘init‘)
weixin_65456815的博客
03-17 1069
idname也检查过，是存在的对象。解决办法：1、用require。
vue项目报错：TypeError: Cannot read properties of undefined (reading ‘init’)”
weixin_48653338的博客
05-10 7986
vue项目报错：TypeError: Cannot read properties of undefined (reading ‘init’)”
【vue3学习】vue3引入echarts5全过程详解，附报错记录TypeError: Cannot read properties of undefined (reading ‘init‘)
weixin_44372834的博客
09-20 1721
【vue3学习】vue3引入echarts5全过程详解，附报错记录TypeError: Cannot read properties of undefined (reading ‘init‘)
百度echarts报错 TypeError: Cannot read properties of undefined (reading '0')
08-01
中提到的错误"TypeError: Cannot read properties of undefined (reading 'init')"和"Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init’)”"是因为在使用Vue整合Echarts...
Vue项目报错： “TypeError: Cannot read properties of undefined (reading ‘init‘)“
weixin_56035334的博客
08-09 3856
[Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'init')"
问题：Cannot read properties of undefined (reading ‘init‘)“
m0_45052521的博客
04-19 9835
原因：直接像引入其他包一样引入了echarts 解决方案： 必须带*否则会出错 (Vue项目使用)例如： 安装命令：npm i echarts main.js中引入 组件中：
Vue调用子组件init方法时报错Cannot read properties of undefined (reading ‘init‘)解决方法
Cabriella_的博客
03-13 646
Vue调用子组件init方法时报错Cannot read properties of undefined (reading 'init')解决方法，使用nextTick
在vue中引入echarts ，应用报错， “TypeError: Cannot read properties of undefined (reading ‘init‘)“
mo_gui_jun的博客
11-22 3512
在main.js中引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 运行页面，报错 解决方案： 引入方式改为如下写法，按需引入也按照对应的方式引入，通过查阅相关文档，导致此现象的原因可能是版本不一致，个人使用的是5.2.2版本的，将版本降低到5以下也能解决此问题 import * as echarts from 'echarts' Vue.prototype.$echarts ..
VUE -Cannot read properties of undefined (reading ‘install‘)
m0_73877265的博客
04-24 822
笔者项目是 vue2.7，安装 vue-router 时，直接运行了 npm install vue-router 命令，造成直接下载最新版 vue-router 4.1.6，而 4 以后的版本适用于 vue3.0 版本，用在 vue2.0+ 会报错。错误原因：vue 版本和 vue-router 版本不匹配。
vue使用 echarts报错 not read properties of undefined (reading ‘init‘)
树上骑个猴的博客
02-28 703
在npm安装完echarts后，如果是想在某个页面使用可以这么写： <script> import * as echarts from 'echarts' mounted(){ this.initChart() }, methods:{ initChart(){ const myChart = echarts.init(document.getElementById('charts')); myChart.setOption({
Vue 引用echarts报错Cannot read property ‘init‘ of underfined
林中明月间丶
04-21 651
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.
echarts: Uncaught TypeError: Cannot read properties of undefined (reading ‘type‘)
最新发布
weixin_47906706的博客
05-26 1046
ai回答不了，我来回答！一秒解决echarts报错
echart报错Cannot read properties of undefined (reading ‘type‘)
热门推荐
陈新科的博客
03-21 2万+
这个问题需要搞清楚两个关键方法： toRaw：作用：将一个由reactive生成的响应式对象转为普通对象。 使用场景： 用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。 markRaw：作用：标记一个对象，使其永远不会再成为响应式对象。 应用场景: 有些值不应被设置为响应式的，例如复杂的第三方类库等。 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。 1.第一步在所在的组件引入 import { markRaw } from 'vue'
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值