Vue3 ECharts Uncaught TypeError: Cannot read properties of undefined (reading ‘type‘) + (reading ‘0‘

使用ResizeObserver监听ECharts宽高变化，出现了以下两种报错，外加图表与数据错位的问题。

报错一

报错二

图表错位

原因

ECharts会被在Vue内部转换成响应式对象，从而在resize 的时候获取不到

使用 Vue的API , markRaw，标记一个对象，使其不能成为一个响应式对象

markRaw：响应式 API：进阶 | Vue.js

正确使用

import { markRaw } from "vue";

const myChart = ref();

// 初始化echart
myChart.value = markRaw(echarts.init(document.getElementById('main')));

  myChart.value = markRaw(echarts.init(document.getElementById(props.id) as HTMLDivElement));

一定要切记使用markRow()

正确效果

完整示例（包含封装ECharts和适配跟随窗口宽高变化而变化）CSDN

参考：https://blog.csdn.net/xh1506101064/article/details/133675807?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171049066016800226517872%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=171049066016800226517872&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-1-133675807-null-null.142^v99^pc_search_result_base6&utm_term=Uncaught%20TypeError%3A%20Cannot%20read%20properties%20of%20undefined%20%28reading%20type%29&spm=1018.2226.3001.4187

 欢迎扫描下方二维码关注VX公众号