vue 中使用echart5.2发生TypeError: Cannot read properties of undefined (reading ‘init‘)

最新推荐文章于 2025-11-10 15:43:29 发布
原创 最新推荐文章于 2025-11-10 15:43:29 发布 · 5.1k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts

本文介绍了一位开发者在将Echart版本从4.8升级到5.2后遇到的问题及解决方案。主要错误为TypeError: Cannot read properties of undefined (reading 'init')。文中详细解释了如何调整代码引用方式以解决问题，并提供了降级版本作为备选方案。

在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 echarts from '
最低0.47元/天 解锁文章
Vue - Syntax Error: TypeError: Cannot read properties of undefined (reading ‘styles‘) 项目运行时报错，详细解决方案
🏆 前端领域优质创作者
11-07 1万+
vue2，SyntaxError:TypeError:Cannotreadpropertiesofundefined(reading'styles')，webpack，npmrunserve，报错怎么办，运行报错，runserve时出现报错如何解决，vue2项目运行报错SyntaxError:TypeError:Cannotreadpropertiesofundefined(reading'styles')，vue2怎么解决npmrunserve时的Cannot
Vue3 - 详解报错 Uncaught TypeError: Cannot read properties of undefined (reading ‘writeText‘)，vuejs剪贴板出错
🏆 前端领域优质创作者
07-10 4999
剪贴板报错，navigator.clipboard，writeText，突然就报错了，浏览器禁用了非安全域的navigator.clipboard对象，解决报错，Cannotreadpropertiesofundefined(reading'writeText')，复制，粘贴，vue3，vue2，nuxt2，nuxt3，react，javascript，typescript，报错，document，复制后报错，用户粘贴报错，出错，浏览器控制台报错，详细教程，解决不了，还是不行，部署到线上环境就报
Vue整合Echarts报错：“TypeError: Cannot read properties of undefined (reading ‘init‘)“
少年你真的要止步于此嘛。
12-29 2392
"TypeError: Cannot read properties of undefined (reading 'init')"
Vue中调用echarts控制台报错 Cannot read properties of undefined (reading ‘init‘)
Jwybwy的博客
04-20 7214
控制台报错 Cannot read properties of undefined (reading 'init')"。`
Echart 报错 Uncaught TypeError: Cannot read properties of undefined (reading ‘type‘)
最新发布
maohangfei.cn
11-10 353
摘要 本文描述了在Vue3中使用ECharts时遇到的两种常见报错： Uncaught TypeError: Cannot read properties of undefined (reading 'type') 鼠标交互时的报错问题 问题原因在于ECharts实例被Vue转换为响应式对象导致功能异常。解决方案是使用Vue3的markRawAPI标记ECharts实例为非响应式对象： import { markRaw } from "vue"; myChart.value = markRaw(echart
echarts报错：Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init‘)“
热门推荐
“山水一程”博客
03-14 1万+
echarts， Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'init')"
Vue eCharts Cannot read property ‘init‘ of undefined 报错问题
EsquireY的博客
12-10 5498
在vue 项目中使用 eCharts ，但是项目一直报 init of undefined ，查阅很多资料，方法不一 1，元素没有设长宽 <template> <div class="container"> <div id="myChart" ref="myChart" style="width: 600px; height: 400px"></div> </div> </template> 2，初始化实例应该写在 .
Eharts导入的时候出现TypeError: Cannot read properties of undefined (reading ‘init‘)“的处理
weixin_44482737的博客
01-13 1052
Eharts导入的时候出现TypeError: Cannot read properties of undefined (reading 'init')"的处理
vue2/3 - echarts报错TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)详细解决方案！
高级前端工程师
07-11 2722
vue2，vue3，nuxt，echarts，图表，日历图表，柱状图，饼图，解决echarts中TypeError: Cannot，还是报错，不行怎么办，TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)，vue echarts 报错queryComponents不存在，echart报错，解决echart，在使用案例的echart的日历图表的时候，报错，在使用echarts将关系图中的结点用饼图替换的代码编程过
uniapp报错：TypeError: Cannot read properties of undefined (reading ‘replace‘) 无法读取未定义的属性（读取 ‘replace‘）
高级前端工程师
10-04 4224
TypeError: Cannot read properties of undefined (reading ‘replace‘)，uniapp报错提示，尝试访问未定义对象的replace属性导致，uniapp浏览器控制台报错，uniapp微信小程序报错，uniapp H5网页提示错误，Uniapp APP端报错如何解决，uniapp安卓苹果ios错误，uniapp尝试运行uni.navigateTo的时候没能实现跳转，并卡住显示类似，uniapp页面跳转报错，详细排查和解决方案，怎么解决这个报错，代码没
Cannot read properties of undefined (reading ‘init‘)报错
weixin_47194802的博客
05-15 645
出现这个报错是印象项目没有引echarts包。npm i echarts 下包。然后在main.js中引入。
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
m0_51060602的博客
02-28 6077
引入echarts时报错 "TypeError: Cannot read properties of undefined (reading 'init')"的解决方案
VUE + eCharts 报错 Cannot read properties of undefined (reading ‘init‘)
LEON_RAY
07-27 365
代码】VUE+eCharts报错Cannotreadpropertiesofundefined(reading'init')
vue中用echarts 报Cannot read properties of undefined (reading ‘init‘)
Mr_wuying的博客
04-27 360
最好官网的引用不是这样的应该改成下面就会好了。在main.js引用的是。
在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中引入echarts ，应用报错， “TypeError Cannot read properties of undefined (reading ‘init‘)“
web13618529112的博客
02-23 1073
在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点击图例出现Cannot read properties of undefined (reading ‘type‘)的错误
qq_43136527的博客
07-14 3942
echarts点击图例出现Cannot read properties of undefined (reading 'type')的错误
echarts Cannot read property ‘init‘ of undefined报错问题解决
Qpzzz的博客
02-02 699
这是因为echarts更新到5.01了，你 npm install echarts --save 安装的是最新版本的echarts，解决报错2个办法： 1.降低echarts的版本，例如降到4.8。 2.改变main.js里面引入方式： // import echarts from 'echarts'//引入echarts--v4 import * as echarts from 'echarts';// --v5 Vue.prototype.$echarts = echarts ...
echarts中TypeError: Cannot read properties of undefined (reading 'init')
08-24
当你在使用Vue整合Echarts时，遇到了TypeError: Cannot read properties of undefined (reading 'init')的错误。这个错误通常是因为Echarts的初始化没有成功导致的。在Vue项目中使用Echarts时，通常需要在main.js文件中引入Echarts并将其挂载到Vue实例的原型上。 根据引用和引用，这个错误可能是在项目中引入Echarts时出现的。你可以尝试按照引用中的写法，在main.js文件中引入Echarts，并将其挂载到Vue.prototype上。确保你已经正确安装了Echarts库。 如果你已经按照正确的方式引入并挂载Echarts，但仍然遇到这个错误，可能是由于Echarts库的版本不兼容导致的。你可以尝试升级或降级Echarts库的版本，或者查看Echarts官方文档以获取更多关于初始化Echarts的方法和注意事项。 总结起来，当你在使用Vue整合Echarts时遇到TypeError: Cannot read properties of undefined (reading 'init')的错误时，首先确保你已经正确引入并挂载了Echarts库。如果问题仍然存在，可以尝试升级或降级Echarts库的版本，或者查阅Echarts官方文档以获取更多解决方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Vue整合Echarts报错：“TypeError: Cannot read properties of undefined (reading ‘init‘)](https://blog.csdn.net/weixin_45481821/article/details/127344360)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案](https://blog.csdn.net/m0_51060602/article/details/123193818)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值