vue3+echarts 使用 dataZoom 报错 Cannot read properties of undefined (reading ‘type‘)

单纯记录一下 echarts 和 vue3 坑我的记录。

解决方案

使用 markRaw 取消 echarts 实例的代理。(markRaw 为 vue3 自带属性，可以直接导入)

// 我的图表 ref
const chart = ref<any>null

const myChart = markRaw(echarts.init(chart.value))

简单讲解markRaw

简单的说就是让某个对象取消代理，变成最普通的 js 对象，不让 vue3 对我的实例动手动脚。

吐槽 + 自我理解

vue3 使用proxy 代理之后，创建 echarts 实例会造成实例部分静态数据更新。echarts 内部含有大量的属性值，echarts 不会重复的去更新，但是 vue3 会对 echarts 实例深度挖掘，对里面的属性进行更新，造成

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘data’)

报错长这个样

所以需要将 echarts 实例进行静态化，不让vue3 代理，即可解决问题。
echarts 自己找不到哪里修改的 type，而 vue3 又更新 proxy，数据多深都给挖出来改咯，echarts 又不想花人力解决，开发者默默承受压力。关键是查了半天都找不到相关文章，要搜索关键词 coordSys.type 才会出现，真的服了。

通过参考下边文章推断出来的https://blog.youkuaiyun.com/weixin_50508597/article/details/123552563

以后真的命名标题请多加点关键词，花了两天时间去处理，真的服了。