關(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)式對(duì)象，從而在resize 的時(shí)候獲取不到
coordSys.type
3、解決方案
參考官方：
你可以有選擇地退出默認(rèn)的深度響應(yīng)式/只讀轉(zhuǎn)換模式，并將原始的，未被代理的對(duì)象嵌入狀態(tài)圖中。它們可以根據(jù)情況靈活運(yùn)用：
- 有些值不應(yīng)該是響應(yīng)式的，例如復(fù)雜的第三方類實(shí)例或 Vue 組件對(duì)象。
- 當(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文通過實(shí)例代碼給大家介紹了vue 圖標(biāo)選擇器的相關(guān)知識(shí)，圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-11-11
在開發(fā)項(xiàng)目時(shí)遇到由于選擇了eslint導(dǎo)致的嚴(yán)格錯(cuò)誤提示,如多個(gè)空格和多行報(bào)錯(cuò),解決方案包括在webpack.base.conf.js中進(jìn)行配置修改,創(chuàng)建項(xiàng)目時(shí)避免選擇eslint,本文給大家介紹了Vue關(guān)閉eslint檢測的多種方法,需要的朋友可以參考下2025-03-03
Vue項(xiàng)目中使用addRoutes出現(xiàn)問題的解決方法
大家應(yīng)該都知道可以通過vue-router官方提供的一個(gè)api-->addRoutes可以實(shí)現(xiàn)路由添加的功能,事實(shí)上就也就實(shí)現(xiàn)了用戶權(quán)限,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中使用addRoutes出現(xiàn)問題的解決方法,需要的朋友可以參考下2021-08-08
今天小編就為大家分享一篇vue 監(jiān)聽屏幕高度的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue如何查找數(shù)組中符合條件的對(duì)象，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
webpack+vue-cli項(xiàng)目中引入外部非模塊格式j(luò)s的方法
今天小編就為大家分享一篇webpack+vue-cli項(xiàng)目中引入外部非模塊格式j(luò)s的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)鼠標(biāo)懸浮更換圖片功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Vue3+ElementPlus封裝圖片空間組件的門面實(shí)例
圖片空間是用于管理上傳圖片的工具,可以讓用戶方便地存儲(chǔ)、管理和調(diào)用圖片,提高工作效率,它通常具備多樣的樣式,但操作入口統(tǒng)一,便于使用,通過圖片空間組件,用戶能直接在其他模塊（例如商品圖片）中選擇所需圖片2024-09-09
解析vue?3.0?使用axios庫發(fā)起?post?get?的配置過程
get post 請(qǐng)求開發(fā)中最普通最常見的請(qǐng)求方式但是在vue中如何實(shí)現(xiàn)呢 這里記錄一下配置過程，對(duì)vue?使用axios發(fā)起?post?get配置過程感興趣的朋友一起看看吧2022-05-05
今天小編就為大家分享一篇淺談v-for 和 v-if 并用時(shí)篩選條件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11