關於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.2版本的發佈以及setup語法的出現,這些已經都不是問題啦,贊美vue

到此這篇關於vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type')的文章就介紹到這瞭,更多相關vue3報錯Cannot read properties of undefined內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: