解決vue3中使用echart報錯:Cannot read properties of undefined (reading ‘type‘)
更新時間：2024年01月24日 14:35:35 作者：不想掉頭發(fā)啊??！
在Vue項目中使用Echarts進(jìn)行數(shù)據(jù)可視化是非常常見的需求,然而有時候在引入Echarts的過程中可能會遇到報錯,本文主要介紹了解決vue3中使用echart報錯:Cannot read properties of undefined (reading ‘type‘),感興趣的可以了解一下
一、報錯原因
出現(xiàn)如下報錯的原因是：
Proxy 應(yīng)用到了整個 ECharts 實例上的問題，不太建議把整個 ECharts 實例這樣的對象放到 ref 里，容易影響到實例底層的運行?？梢允褂?shallowRef 替代，這樣 Proxy 不會應(yīng)用到 ECharts 實例底下的各個屬性上。
二、解決辦法
把echart實例對象不要用ref等響應(yīng)式保存，可以使用shallowRef等淺層作用進(jìn)行保存。點擊前往官網(wǎng)查看
具體代碼：
<template>
<div ref="dom" class="charts" style="width: 100%; height: 100%;"></div>
</template>
<script setup>
import echarts from 'echarts'
import {onMounted, ref, onBeforeUnmount, watch, shallowRef} from 'vue'
import {on, off} from '@/utils/tools';
// props傳值
const props = defineProps({
option: Object
})
// 元素
const dom = ref(null)
// echart實例 ---------------------------------------這里使用shallowRef進(jìn)行保存[添加鏈接描述](https://cn.vuejs.org/api/reactivity-advanced.html#shallowref)
const chart = shallowRef(null)
// 繪制echart
const initChart = () => {
chart.value = echarts.init(dom.value)
chart.value.setOption(props.option, true)
}
// 圖表變化
const chartResize = () => {
chart.value.resize()
}
watch(() => props.option, (value) => {
chart.value.clear()
chart.value.setOption(value)
})
onMounted(() => {
initChart()
on(window, 'resize', chartResize)
})
onBeforeUnmount(() => {
off(window, 'resize', chartResize)
})
</script>
<style scoped lang="less">
</style>到此這篇關(guān)于解決vue3中使用echart報錯:Cannot read properties of undefined (reading ‘type‘)的文章就介紹到這了,更多相關(guān)vue3使用echart報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
為了實現(xiàn)全屏滾動效果,我們首先需要使用Vue.js框架搭建項目,這篇文章主要給大家介紹了關(guān)于VUE屏幕整體滾動(滑動或滾輪)原生方法的相關(guān)資料,需要的朋友可以參考下2024-01-01
vue實現(xiàn)form表單與table表格的數(shù)據(jù)關(guān)聯(lián)功能示例
這篇文章主要介紹了vue實現(xiàn)form表單與table表格的數(shù)據(jù)關(guān)聯(lián)功能,涉及vue.js表單事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
本篇文章主要介紹了詳解vue-cli多頁面工程實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
Vue3?使用v-model實現(xiàn)父子組件通信的方法(常用在組件封裝規(guī)范中)
這篇文章主要介紹了Vue3?使用v-model實現(xiàn)父子組件通信(常用在組件封裝規(guī)范中)的方法,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
本篇文章主要介紹了vue指令以及dom操作詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了Vue3新增時自動獲取當(dāng)前時間的操作方法,本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了Vue?計算屬性之姓名案例的三種實現(xiàn)方法，計算屬性實現(xiàn)、methods實現(xiàn)和插值語法實現(xiàn)，下面文章具體介紹，需要的小伙伴可以參考一下2022-05-05
vue1.0和vue2.0的watch監(jiān)聽事件寫法詳解
今天小編就為大家分享一篇vue1.0和vue2.0的watch監(jiān)聽事件寫法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)日歷表格（element-ui），文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
ue是數(shù)據(jù)驅(qū)動視圖更新的框架, 所以對于vue來說組件間的數(shù)據(jù)通信非常重要,下面這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)組件通信的八種方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09