vue3 echarts报错

barPolar.js:63 Uncaught TypeError: Cannot read properties of undefined (reading 'type')

util.js:406 Uncaught Error: `resize` should not be called during main process.

vue版本3.0 echarts5.2

窗口发生变化调用echarts控制台会报上面2个错误

vue3使用proxy的方式监听响应式,会被在vue内部转换成响应式对象,从而在resize 的时候获取不到

coordSys.type

参考官方:

你可以有选择地退出默认的深度响应式/只读转换模式,并将原始的,未被代理的对象嵌入状态图中。它们可以根据情况灵活运用:

  • 有些值不应该是响应式的,例如复杂的第三方类实例或 Vue 组件对象。(第三方实例)
  • 当渲染具有不可变数据源的大列表时,跳过 proxy 转换可以提高性能。

所以在实例化echart时,将其指定为非响应式的即可。

let dataEcharts = markRaw ({
      myCharts: null,
    })

dataEcharts.myCharts = $echarts.init(dataList.echarts);

  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用VueEcharts报错"TypeError: Cannot read property 'getAttribute' of null/undefined"。这个错误可能有几个原因。首先,当你在created钩子中调用Echarts的渲染代码时,可能会发生此错误,因为此时DOM元素还没有被完全渲染。解决方法是在mounted钩子中调用渲染代码,或者在created钩子中使用this.$nextTick()方法包裹渲染代码。 另外,如果你在使用Echarts之前没有正确引入Echarts库或者Echarts实例化的DOM元素不存在,也会导致此错误。确保你已经正确引入Echarts库,并且确保在调用Echarts渲染之前DOM元素已经存在。 此外,还有可能是因为在使用dialog时,没有正确实例化Echarts实例,导致此错误。在dialog的show方法中,你可以使用this.$nextTick()方法来确保在实例化Echarts之前DOM元素已经完全渲染。 总结起来,解决"TypeError: Cannot read property 'getAttribute' of null/undefined"错误的方法有: 1. 在mounted钩子中调用Echarts渲染代码。 2. 在created钩子中使用this.$nextTick()方法包裹Echarts渲染代码。 3. 确保正确引入Echarts库,并且确保在调用Echarts渲染之前DOM元素已经存在。 4. 在使用dialog时,使用this.$nextTick()方法确保在实例化Echarts之前DOM元素已经完全渲染。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [VUE引入Echarts报错Uncaught TypeError: Cannot read property ‘getAttribute‘ of null](https://blog.csdn.net/Kne982895961/article/details/121146898)[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* [76.解决Vue引用echarts报错Cannot read property ‘getAttribute‘ of undefined](https://blog.csdn.net/Annexiaobin/article/details/122086224)[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 ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值