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

1、錯誤說明

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

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

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

2、錯誤原因

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

coordSys.type

3、解決方案

參考官方：

#你可以選擇性地退出預設的深度響應式/唯讀轉換模式，並將原始的，未被代理的物件嵌入狀態圖中。它們可以根據情況靈活運用：

• 有些值不應該是響應式的，例如複雜的第三方類別實例或 Vue 元件物件。

• 當渲染具有不可變資料來源的大列表時，跳過 proxy 轉換可以提高效能。

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

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

以上是vue3+echart5遇到的坑Cannot read properties of undefined (reading 'type')怎麼解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！