vue3使用ECharts 踩坑记录：`Cannot read property ‘type‘ of undefined` 的解决方案

最新推荐文章于 2025-02-21 12:14:03 发布
最新推荐文章于 2025-02-21 12:14:03 发布
阅读量313 收藏
点赞数 4
分类专栏： 开发必备 2025开发必备(限时特惠) 文章标签： echarts javascript vue.js echarts报错 vue3使用echarts报错
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41961749/article/details/144297960
版权

vue3使用ECharts 踩坑记录：一旦触发 resize 方法就报错Cannot read property 'type' of undefined 的解决方案

最近在项目中使用 ECharts 图表时，遇到了一个让人抓狂的问题：图表初始渲染完全正常，但一旦触发 resize 方法，就会报错：Cannot read property 'type' of undefined。调试了半天都找不到问题，最终才发现了解决方案。特此记录，分享给同样在用 Vue3 和 ECharts 的小伙伴们，希望能少踩坑。
在这里插入图片描述

问题复现

在 Vue3 项目中，我尝试这样使用 ECharts：

了解本专栏 订阅专栏 解锁全文
vue2/3 - echarts报错TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)详细解决方案！
高级前端工程师
07-11 2470
vue2，vue3，nuxt，echarts，图表，日历图表，柱状图，饼图，解决echarts中TypeError: Cannot，还是报错，不行怎么办，TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)，vue echarts 报错queryComponents不存在，echart报错，解决echart，在使用案例的echart的日历图表的时候，报错，在使用echarts将关系图中的结点用饼图替换的代码编程过
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使用echarts时和调用resize时报错
weixin_68615235的博客
02-22 517
解决方法：实例化时不要用ref。
ECharts的resize失效原因以及使用方法
热门推荐
吴小迪的博客
07-18 6万+
很多朋友在开发的过程中要把ECharts图标做成自适应浏览器宽高的效果。于是去翻看ECharts官网发现了resize方法，结果用了之后发现没用，而且根本不知道什么原因。 解决办法： 笔者在调试了好久之后发现，不能给ECharts的容器设置固定的宽高。 宽度要写百分比 高度要写vh 然后再搭配resize方法才可以实现根据浏览器大小而改变大小的功能 示例代码： let ECharts = echa...
Vue3+echarts5踩坑，resize方法报错
mo911108的博客
09-28 2683
项目要做一个数据统计可视化的模块，按照官网做法调用resize方法时报错： 卡了一整天，最后在官方issues上找到了原因，记录一下。 原因：Vue3使用了proxy，Echarts无法从中获取内部变量 解决方法：不要在data中定义chart，或者使用shallowRef mounted() { // 注：图表不能放进data，vue3使用proxy，echarts无法从中获取变量 let charts = [ { id...
echarts 渲染图表出错 Cannot read properties of undefined (reading ‘$echarts‘)
jiusiw的博客
03-06 4318
echarts 的报错，Cannot read properties of undefined (reading '$echarts')"
echarts点击图例出现Cannot read properties of undefined (reading ‘type‘)的错误
qq_43136527的博客
07-14 3647
echarts点击图例出现Cannot read properties of undefined (reading 'type')的错误
vue3 echarts resize自适应报错解决
weixin_44133581的博客
06-26 902
不要用data去存储 echarts 实例，可能会报错 undefined ...type...* 使用同一个resize监听事件。
关于vue3 build报错：TypeError: Cannot read property ‘tapPromise’ of undefined解决方案
cabinx的博客
09-03 2475
关于vue3 build报错：TypeError: Cannot read property ‘tapPromise’ of undefined解决方案 问题描述: vue3 build后出现以下报错： TypeError: Cannot read property 'tapPromise' of undefined 解决方案: 上述报错的原因是压缩插件compression-webpack-plugin版本太高导致（一般情况下不要超过6.x，但是5.x版本及以下才能生成正确的压缩文件
vue-echarts出现Uncaught TypeError: Cannot read property ‘dispatchAction‘ of undefined
wm9028的专栏
08-29 621
# vue-echarts出现Uncaught TypeError: Cannot read property 'dispatchAction' of undefined 在vue项目中，使用自动展示的功能，能运行，但是一直报错*Uncaught TypeError: Cannot read property 'dispatchAction' of undefined*。虽然可以运行，一直打印错误看着挺闹心的。试了好久找了解决办法。 # 报错代码实现部分摘录 播放代码实现： ```javascript
vue3+echarts5点击legend组件报错Cannot read property ‘type‘ of undefined
晚风的博客
06-13 2305
vue3+echarts5出现报错Cannot read property ‘type‘ of undefined
vue3使用echarts5.3.3无法正常使用折线图
KanShiMeKan的专栏
08-22 2068
有两种错误 ：can’t access property “type”, coordSys is undefined和Uncaught TypeError: can’t access property “type”, seriesModel.coordinatesystem is undefined。vue3加载其他类型图都可以正常使用，但是使用折线图时就不能正常显示tooltip，并且点击legend报错。
vue3使用echarts时可能会出现的问题
qq_36313551的博客
02-21 208
声明了引用了，表格正常显示了，看着是没问题的，但当我往里面添加tooltip或者legend的话，这时候点击legend内容就会报错Cannot read properties of undefined (reading 'type')百度（找别人的文章）了一下才发现，原来是在vue3里，这样处理的话，echarts对象实例可能会被代理成响应式对象，影响echarts对内部属性的访问。导言：最近手上的项目是vue3的，其中要写很多奇奇怪怪的图标，于是在使用时遇到了一些问题，顺便记录一下。
echarts莫名缩小，并且宽度不能更改，生成时默认宽度
macrun28的博客
10-29 7420
遇到问题的时候，百度了一些，没找到解决方法，知乎上有同样的问题，但是解决方法不适用，最后在前端老哥的帮助下解决了问题。先贴一些问题图： 正常情况 加了div隐藏后 我出现这个问题的原因是，echarts初始化的顺序在div隐藏之后，所以当echarts初始化时找不到div，只能将echarts设置为默认值 //echarts初始化 window.myLine = echarts.
echarts Cannot read property 'init' of undefined 报错问题
qq_35363709的博客
03-04 9568
一： let myChart= this.$echarts.init(this.$refs.myChart); 可能报Cannot read property 'init' of undefined 的错 二： letmyChart= echarts.init(document.getElementById('myChart')); 可以试试，我试的可以哎 ...
Vue3 报错Echarts TypeError: Cannot read property ‘type‘ of undefined
技小白的博客
05-09 685
Echarts拿到数据后死活不渲染数据，一点击图例部分就报错 解决方式： 蒋ref 换成shallowRef const LineChart = shallowRef(); const LineChart = ref(); 原因说是 ref深度监听 不管多深他都能监听到。而shallowRef是非深度监听 https://blog.csdn.net/qq_54527592/article/details/119840044添加链接描述 https://www.cnblogs.com/IwishIcou
echarts报错TypeError: Cannot read properties of undefined (reading ‘LinearGradient‘)
qq_53078000的博客
08-31 1万+
在设置折线图阴影的时候cv了一段代码,然后就报了上面的错误,通过百度解决了,记录一下; 如果是在5.0版本会报以上错误; 原因是因为graphic对象下没有LinearGradient方法; 可以通过降低版本解决: npm install echarts@4.8.0 --save ...
解决Ecarts中resize无效，实现响应式大小
marendu的博客
07-16 1万+
resize属性， 错误写法 <!-- 为ECharts准备一个具备大小（宽高）的Dom(错误样式) --> <div id="main" style="width: 800px;height:800px;"></div> <script type="text/javascript"> // 基于准备好的dom，初...
关于echarts的resize问题
Sylvia_qiu的博客
04-16 7892
近期我使用echarts的力导向布局图时，希望生成的关系图可以实现浏览器的大小自适应，并且随着浏览器的拖动呈现图一直处于正中间的效果。按照API的教程，我监听了窗口大小调整的事件，在窗口大小发生变化时，让图标重新设置大小：window.onresize = function(){ var mychart = echarts.init(document.getElementById('chart')...
vue3 Internal server error: Cannot read property &#39;source&#39; of undefined
最新发布
03-16
### Vue3 中处理 `Cannot read property &#39;source&#39; of undefined` 错误的方法 在开发过程中遇到类似于 `&#39;Cannot read property &#39;source&#39; of undefined&#39;` 的错误通常表明代码尝试访问了一个未定义的对象属性。这种类型的错误可能源于数据初始化不充分、异步操作中的状态管理不当或其他逻辑问题。 #### 1. **理解错误根源** 此错误的根本原因可能是某个对象尚未被正确定义或赋值就试图读取其子属性。例如，在 Vue 组件中，如果模板部分尝试渲染一个尚未加载完成的数据项，则可能会触发此类错误[^2]。 #### 2. **解决方案** ##### (a) 数据初始化 确保组件内的初始数据结构完整无缺。对于可能出现嵌套属性的情况，应提前设置默认值以防止意外的 `undefined` 访问行为。例如： ```javascript export default { data() { return { item: { source: &#39;&#39; }, // 提前设定默认值以防报错 }; }, }; ``` 通过上述方式可以有效减少因数据缺失而导致的运行时异常。 ##### (b) 使用可选链运算符 (`?.`) 现代 JavaScript 支持一种称为“可选链”的语法糖来简化对深层嵌套对象的安全访问。它允许开发者安全地遍历复杂的对象树而无需担心中间节点是否存在。具体实现如下所示： ```javascript {{ item?.source }} // 或者更复杂的情况下： {{ item?.details?.source }} ``` 这样即使某一层级上的键不存在也不会抛出错误而是返回 `undefined`。 ##### (c) 异常捕获机制 虽然 Vue 并不像 React 那样内置了专门用于捕捉整个组件树下所有潜在崩溃情况的功能（即所谓的 error boundary），但是我们仍然可以通过全局事件监听器或者自定义指令等方式达到相似效果。比如可以在应用入口处安装一个通用错误处理器: ```javascript app.config.errorHandler = (err, vm, info) => { console.log(&#39;Error Details:&#39;, err, info); }; ``` 这段代码会拦截任何发生在响应式系统内部以及生命周期钩子函数期间发生的未经处理的 Promise rejections 和同步/异步脚本执行过程里的 bug 报告给开发者以便进一步排查问题所在位置。 另外值得注意的是，当涉及到第三方库集成时也要格外小心它们各自的 API 调用约定以免引入不必要的副作用从而间接造成类似的 runtime issues 出现. --- ### 总结 综上所述，针对 Vue3 应用程序里出现的 “cannot read property ‘source’ of undefined” 类型的服务端内部错误现象可以从以下几个方面入手解决：一是做好前端变量声明阶段必要的预填充工作；二是充分利用 ESNext 新特性如 optional chaining 来增强代码健壮性；最后则是建立健全的应用级别错误反馈渠道帮助快速定位并修复隐藏较深的技术债隐患。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

代码简单说

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

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

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

打赏作者

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

抵扣说明：

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

余额充值