關(guān)于vue3+echart5?遇到的坑?Cannot?read?properties?of?undefined?(reading?'type')

更新時(shí)間：2023年04月15日 15:57:56 作者：posted

這篇文章主要介紹了vue3+echart5?遇到的坑?Cannot?read?properties?of?undefined?(reading?'type'),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1、錯(cuò)誤說(shuō)明

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í)，跳過(guò) 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語(yǔ)法的出現(xiàn)，這些已經(jīng)都不是問(wèn)題啦，贊美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)文章

vue 圖標(biāo)選擇器的實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了vue 圖標(biāo)選擇器的相關(guān)知識(shí)，圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2021-11-11
Vue關(guān)閉eslint檢測(cè)的多種方式
在開發(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檢測(cè)的多種方法,需要的朋友可以參考下
2025-03-03
Vue項(xiàng)目中使用addRoutes出現(xiàn)問(wèn)題的解決方法
大家應(yīng)該都知道可以通過(guò)vue-router官方提供的一個(gè)api-->addRoutes可以實(shí)現(xiàn)路由添加的功能,事實(shí)上就也就實(shí)現(xiàn)了用戶權(quán)限,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中使用addRoutes出現(xiàn)問(wèn)題的解決方法,需要的朋友可以參考下
2021-08-08
vue 監(jiān)聽屏幕高度的實(shí)例
今天小編就為大家分享一篇vue 監(jiān)聽屏幕高度的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue如何查找數(shù)組中符合條件的對(duì)象
這篇文章主要介紹了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ì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue.js鼠標(biāo)懸浮更換圖片功能
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)鼠標(biāo)懸浮更換圖片功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
Vue3+ElementPlus封裝圖片空間組件的門面實(shí)例
圖片空間是用于管理上傳圖片的工具,可以讓用戶方便地存儲(chǔ)、管理和調(diào)用圖片,提高工作效率,它通常具備多樣的樣式,但操作入口統(tǒng)一,便于使用,通過(guò)圖片空間組件,用戶能直接在其他模塊（例如商品圖片）中選擇所需圖片
2024-09-09
解析vue?3.0?使用axios庫(kù)發(fā)起?post?get?的配置過(guò)程
get post 請(qǐng)求開發(fā)中最普通最常見(jiàn)的請(qǐng)求方式但是在vue中如何實(shí)現(xiàn)呢這里記錄一下配置過(guò)程，對(duì)vue?使用axios發(fā)起?post?get配置過(guò)程感興趣的朋友一起看看吧
2022-05-05
淺談v-for 和 v-if 并用時(shí)篩選條件方法
今天小編就為大家分享一篇淺談v-for 和 v-if 并用時(shí)篩選條件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11