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

在窗口大小發(fā)生變化時，需要執(zhí)行this.chart.resize()動態(tài)調(diào)整圖表的大小，發(fā)生錯誤：

2、錯誤原因

vue3中使用proxy的方式監(jiān)聽響應(yīng)式，this.chart會被在vue內(nèi)部轉(zhuǎn)換成響應(yīng)式對象，從而在resize 的時候獲取不到

coordSys.type

3、解決方案

參考官方：

你可以有選擇地退出默認(rèn)的深度響應(yīng)式/只讀轉(zhuǎn)換模式，并將原始的，未被代理的對象嵌入狀態(tài)圖中。它們可以根據(jù)情況靈活運用：

有些值不應(yīng)該是響應(yīng)式的，例如復(fù)雜的第三方類實例或 Vue 組件對象。
當(dāng)渲染具有不可變數(shù)據(jù)源的大列表時，跳過 proxy 轉(zhuǎn)換可以提高性能。

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

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

隨著vue3.2版本的發(fā)布以及setup語法的出現(xiàn)，這些已經(jīng)都不是問題啦，贊美vue

到此這篇關(guān)于vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type')的文章就介紹到這了,更多相關(guān)vue3報錯Cannot read properties of undefined內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

解析VUE中nextTick是什么
nextTick是Vue提供的一個全局API，由于Vue的異步更新策略導(dǎo)致我們對數(shù)據(jù)的修改不會立刻體現(xiàn)，在DOM變化上，此時如果想要立即獲取更新后的DOM狀態(tài)，就需要使用這個方法，這篇文章主要介紹了解析VUE中nextTick,需要的朋友可以參考下
2022-11-11
vue 1.x 交互實現(xiàn)仿百度下拉列表示例
本篇文章主要介紹了vue 1.x 交互實現(xiàn)仿百度下拉列表示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
elementUI?checkBox報錯Cannot read property &ap
這篇文章主要為大家介紹了elementUI?checkBox報錯Cannot read property 'length' of undefined的解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
Vue實現(xiàn)輸入框回車發(fā)送和粘貼文本與圖片功能
這篇文章主要為大家詳細(xì)介紹了Vue如何實現(xiàn)聊天輸入框回車發(fā)送、粘貼文本（包括HTML）、粘貼圖片等功能，文中的實現(xiàn)方法講解詳細(xì)，需要的可以參考一下
2022-05-05
Vue對Element中的el-tag添加@click事件無效的解決
本文主要介紹了Vue對Element中的el-tag添加@click事件無效的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
Vue?通過this.$emit()方法子組件向父組件傳值(步驟分享)
這篇文章主要介紹了Vue?this.$emit()方法通過子組件向父組件傳值,第一步在父組件中引入子組件，第二步子組件向父組件傳值，本文通過需要的朋友可以參考下
2022-11-11
vite+vue3中使用mock模擬數(shù)據(jù)問題
這篇文章主要介紹了vite+vue3中使用mock模擬數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue3獲取當(dāng)前路由地址的兩種方法
近期在做ve3的項目時因為功能需要,需要獲取當(dāng)前路由的地址,下面這篇文章主要給大家介紹了關(guān)于vue3獲取當(dāng)前路由地址的兩種方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-10-10
vue通過?API?監(jiān)聽數(shù)組的變化
這篇文章主要介紹了vue通過?API?監(jiān)聽數(shù)組的變化,在?Vue?中，你可以通過監(jiān)聽數(shù)組的變化來更新界面，Vue?提供了一些特殊的語法以及?API?來實現(xiàn)對數(shù)組的監(jiān)聽，本文通過實例代碼介紹的非常詳細(xì)，需要的朋友可以參考下
2023-05-05
el-select 下拉框全選、多選的幾種方式組件示例詳解
這篇文章主要介紹了el-select 下拉框全選、多選的幾種方式組件示例詳解,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2023-12-12