關于vue3+echart5?遇到的坑?Cannot?read?properties?of?undefined?(reading?'type')
更新時間：2023年04月15日 15:57:56 作者：posted
這篇文章主要介紹了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({...})
},
...
}在窗口大小發(fā)生變化時，需要執(zhí)行this.chart.resize()動態(tài)調整圖表的大小，發(fā)生錯誤：
2、錯誤原因
vue3中使用proxy的方式監(jiān)聽響應式，this.chart會被在vue內部轉換成響應式對象，從而在resize 的時候獲取不到
coordSys.type
3、解決方案
參考官方：
你可以有選擇地退出默認的深度響應式/只讀轉換模式，并將原始的，未被代理的對象嵌入狀態(tài)圖中。它們可以根據(jù)情況靈活運用：
- 有些值不應該是響應式的，例如復雜的第三方類實例或 Vue 組件對象。
- 當渲染具有不可變數(shù)據(jù)源的大列表時，跳過 proxy 轉換可以提高性能。
所以在實例化echart時，將其指定為非響應式的即可。
import { markRaw } from 'vue'
this.chart = markRaw(echarts.init(document.getElementById(this.id)))隨著vue3.2版本的發(fā)布以及setup語法的出現(xiàn)，這些已經(jīng)都不是問題啦，贊美vue
到此這篇關于vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type')的文章就介紹到這了,更多相關vue3報錯Cannot read properties of undefined內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文通過實例代碼給大家介紹了vue 圖標選擇器的相關知識，圖文實例代碼相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-11-11
在開發(fā)項目時遇到由于選擇了eslint導致的嚴格錯誤提示,如多個空格和多行報錯,解決方案包括在webpack.base.conf.js中進行配置修改,創(chuàng)建項目時避免選擇eslint,本文給大家介紹了Vue關閉eslint檢測的多種方法,需要的朋友可以參考下2025-03-03
Vue項目中使用addRoutes出現(xiàn)問題的解決方法
大家應該都知道可以通過vue-router官方提供的一個api-->addRoutes可以實現(xiàn)路由添加的功能,事實上就也就實現(xiàn)了用戶權限,這篇文章主要給大家介紹了關于Vue項目中使用addRoutes出現(xiàn)問題的解決方法,需要的朋友可以參考下2021-08-08
今天小編就為大家分享一篇vue 監(jiān)聽屏幕高度的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue如何查找數(shù)組中符合條件的對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
webpack+vue-cli項目中引入外部非模塊格式js的方法
今天小編就為大家分享一篇webpack+vue-cli項目中引入外部非模塊格式js的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)鼠標懸浮更換圖片功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
圖片空間是用于管理上傳圖片的工具,可以讓用戶方便地存儲、管理和調用圖片,提高工作效率,它通常具備多樣的樣式,但操作入口統(tǒng)一,便于使用,通過圖片空間組件,用戶能直接在其他模塊（例如商品圖片）中選擇所需圖片2024-09-09
解析vue?3.0?使用axios庫發(fā)起?post?get?的配置過程
get post 請求開發(fā)中最普通最常見的請求方式但是在vue中如何實現(xiàn)呢 這里記錄一下配置過程，對vue?使用axios發(fā)起?post?get配置過程感興趣的朋友一起看看吧2022-05-05
今天小編就為大家分享一篇淺談v-for 和 v-if 并用時篩選條件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11