解決vue3中使用echart報錯:Cannot read properties of undefined (reading ‘type‘)
更新時間：2024年01月24日 14:35:35 作者：不想掉頭發(fā)?。?！
在Vue項目中使用Echarts進行數(shù)據(jù)可視化是非常常見的需求,然而有時候在引入Echarts的過程中可能會遇到報錯,本文主要介紹了解決vue3中使用echart報錯:Cannot read properties of undefined (reading ‘type‘),感興趣的可以了解一下
一、報錯原因
出現(xiàn)如下報錯的原因是：
Proxy 應用到了整個 ECharts 實例上的問題，不太建議把整個 ECharts 實例這樣的對象放到 ref 里，容易影響到實例底層的運行?？梢允褂?shallowRef 替代，這樣 Proxy 不會應用到 ECharts 實例底下的各個屬性上。
二、解決辦法
把echart實例對象不要用ref等響應式保存，可以使用shallowRef等淺層作用進行保存。點擊前往官網(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進行保存[添加鏈接描述](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>到此這篇關于解決vue3中使用echart報錯:Cannot read properties of undefined (reading ‘type‘)的文章就介紹到這了,更多相關vue3使用echart報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue觸發(fā)真實的點擊事件跟用戶行為一致問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue Extends 擴展選項用法,結合完整實例形式分析了Vue Extends 擴展選項相關使用技巧與操作注意事項,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了關于Ant-Design-Vue快速上手指南+排坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue3?跨域配置devServer的參數(shù)和設置方法
這篇文章主要介紹了Vue3?跨域配置devServer的參數(shù)和設置,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue中data和data()的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細介紹了Vue計數(shù)器案例的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
本文主要介紹了Vue3+TypeScript 常用代碼示例總結,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2026-03-03
本文介紹了Pinia的使用方法及如何實現(xiàn)狀態(tài)持久化存儲,首先,介紹了Pinia的安裝和在main.ts中的掛載,介紹了getters和actions的使用方法,最后,詳細說明了如何通過Pinia-plugin-persistedstate插件實現(xiàn)Pinia狀態(tài)的持久化處理,包括插件的安裝、配置和在main.ts文件中的注冊2024-10-10
在Vue3中使用CSS Modules實現(xiàn)樣式隔離
隨著構建現(xiàn)代前端應用的需要,樣式的管理和隔離變得越來越重要,為了解決樣式?jīng)_突和管理困難的問題,CSS Modules 應運而生,本文我們將討論如何在 Vue3 中使用 CSS Modules 實現(xiàn)樣式隔離,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue踩坑記錄之src的動態(tài)綁定賦值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06