關(guān)于vue3+echart5?遇到的坑?Cannot?read?properties?of?undefined?(reading?'type')
1、錯(cuò)誤說明
vue3中，使用data的方式初始化echart圖表
export default {
data() {
return {
chart: null,
...
}
},
mounted() {
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption({...})
},
...
}在窗口大小發(fā)生變化時(shí)，需要執(zhí)行this.chart.resize()動(dòng)態(tài)調(diào)整圖表的大小，發(fā)生錯(cuò)誤：
2、錯(cuò)誤原因
vue3中使用proxy的方式監(jiān)聽響應(yīng)式，this.chart會(huì)被在vue內(nèi)部轉(zhuǎn)換成響應(yīng)式對象，從而在resize 的時(shí)候獲取不到
coordSys.type
3、解決方案
參考官方：
你可以有選擇地退出默認(rèn)的深度響應(yīng)式/只讀轉(zhuǎn)換模式，并將原始的，未被代理的對象嵌入狀態(tài)圖中。它們可以根據(jù)情況靈活運(yùn)用：
- 有些值不應(yīng)該是響應(yīng)式的，例如復(fù)雜的第三方類實(shí)例或 Vue 組件對象。
- 當(dāng)渲染具有不可變數(shù)據(jù)源的大列表時(shí)，跳過 proxy 轉(zhuǎn)換可以提高性能。
所以在實(shí)例化echart時(shí)，將其指定為非響應(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報(bào)錯(cuò)Cannot read properties of undefined內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
nextTick是Vue提供的一個(gè)全局API，由于Vue的異步更新策略導(dǎo)致我們對數(shù)據(jù)的修改不會(huì)立刻體現(xiàn)，在DOM變化上，此時(shí)如果想要立即獲取更新后的DOM狀態(tài)，就需要使用這個(gè)方法，這篇文章主要介紹了解析VUE中nextTick,需要的朋友可以參考下2022-11-11
vue 1.x 交互實(shí)現(xiàn)仿百度下拉列表示例
本篇文章主要介紹了vue 1.x 交互實(shí)現(xiàn)仿百度下拉列表示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
elementUI?checkBox報(bào)錯(cuò)Cannot read property &ap
這篇文章主要為大家介紹了elementUI?checkBox報(bào)錯(cuò)Cannot read property 'length' of undefined的解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Vue實(shí)現(xiàn)輸入框回車發(fā)送和粘貼文本與圖片功能
這篇文章主要為大家詳細(xì)介紹了Vue如何實(shí)現(xiàn)聊天輸入框回車發(fā)送、粘貼文本（包括HTML）、粘貼圖片等功能，文中的實(shí)現(xiàn)方法講解詳細(xì)，需要的可以參考一下2022-05-05
Vue對Element中的el-tag添加@click事件無效的解決
本文主要介紹了Vue對Element中的el-tag添加@click事件無效的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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ù)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
近期在做ve3的項(xiàng)目時(shí)因?yàn)楣δ苄枰?需要獲取當(dāng)前路由的地址,下面這篇文章主要給大家介紹了關(guān)于vue3獲取當(dāng)前路由地址的兩種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue通過?API?監(jiān)聽數(shù)組的變化,在?Vue?中，你可以通過監(jiān)聽數(shù)組的變化來更新界面，Vue?提供了一些特殊的語法以及?API?來實(shí)現(xiàn)對數(shù)組的監(jiān)聽，本文通過實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了el-select 下拉框全選、多選的幾種方式組件示例詳解,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12