vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type')

錯誤說明

vue3中，使用data的方式初始化echart圖表

export default {
  data() {
    return {
      chart: null,
      ...
    }
  },
  mounted() {
    this.chart = echarts.init(document.getElementById(this.id))
    this.chart.setOption({...})
  },
  ...
}

在窗口大小發生變化時，需要執行this.chart.resize()動態調整圖表的大小，發生錯誤：

錯誤原因

vue3中使用proxy的方式監聽響應式，this.chart會被在vue內部轉換成響應式對象，從而在resize 的時候獲取不到

coordSys.type

解決方案

參考官方：

你可以有選擇地退出默認的深度響應式/只讀轉換模式，並將原始的，未被代理的對象嵌入狀態圖中。它們可以根據情況靈活運用：

• 有些值不應該是響應式的，例如復雜的第三方類實例或 Vue 組件對象。
• 當渲染具有不可變數據源的大列表時，跳過 proxy 轉換可以提高性能。

所以在實例化echart時，將其指定為非響應式的即可。

import { markRaw } from 'vue'
this.chart = markRaw(echarts.init(document.getElementById(this.id)))