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

Posted on by

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！

推薦閱讀：