快捷導(dǎo)航

解決vue3中使用echart報(bào)錯(cuò):Cannot read properties of undefined (reading ‘type‘)

更新時(shí)間：2024年01月24日 14:35:35 作者：不想掉頭發(fā)啊??！

在Vue項(xiàng)目中使用Echarts進(jìn)行數(shù)據(jù)可視化是非常常見的需求,然而有時(shí)候在引入Echarts的過程中可能會(huì)遇到報(bào)錯(cuò),本文主要介紹了解決vue3中使用echart報(bào)錯(cuò):Cannot read properties of undefined (reading ‘type‘),感興趣的可以了解一下

一、報(bào)錯(cuò)原因

出現(xiàn)如下報(bào)錯(cuò)的原因是：

Proxy 應(yīng)用到了整個(gè) ECharts 實(shí)例上的問題，不太建議把整個(gè) ECharts 實(shí)例這樣的對(duì)象放到 ref 里，容易影響到實(shí)例底層的運(yùn)行。可以使用 shallowRef 替代，這樣 Proxy 不會(huì)應(yīng)用到 ECharts 實(shí)例底下的各個(gè)屬性上。

在這里插入圖片描述

二、解決辦法

把echart實(shí)例對(duì)象不要用ref等響應(yīng)式保存，可以使用shallowRef等淺層作用進(jìn)行保存。點(diǎ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實(shí)例 ---------------------------------------這里使用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報(bào)錯(cuò):Cannot read properties of undefined (reading ‘type‘)的文章就介紹到這了,更多相關(guān)vue3使用echart報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue觸發(fā)真實(shí)的點(diǎn)擊事件跟用戶行為一致問題
這篇文章主要介紹了vue觸發(fā)真實(shí)的點(diǎn)擊事件跟用戶行為一致問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue Extends 擴(kuò)展選項(xiàng)用法完整實(shí)例
這篇文章主要介紹了Vue Extends 擴(kuò)展選項(xiàng)用法,結(jié)合完整實(shí)例形式分析了Vue Extends 擴(kuò)展選項(xiàng)相關(guān)使用技巧與操作注意事項(xiàng),需要的朋友可以參考下
2019-09-09
關(guān)于Ant-Design-Vue快速上手指南+排坑
這篇文章主要介紹了關(guān)于Ant-Design-Vue快速上手指南+排坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue3?跨域配置devServer的參數(shù)和設(shè)置方法
這篇文章主要介紹了Vue3?跨域配置devServer的參數(shù)和設(shè)置,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-04-04
vue中data和data()的區(qū)別說明
這篇文章主要介紹了vue中data和data()的區(qū)別說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
Vue實(shí)現(xiàn)計(jì)數(shù)器案例
這篇文章主要為大家詳細(xì)介紹了Vue計(jì)數(shù)器案例的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
Vue3+TypeScript 常用代碼示例總結(jié)
本文主要介紹了Vue3+TypeScript 常用代碼示例總結(jié),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2026-03-03
vue3 pinia使用及持久化注冊(cè)
本文介紹了Pinia的使用方法及如何實(shí)現(xiàn)狀態(tài)持久化存儲(chǔ),首先,介紹了Pinia的安裝和在main.ts中的掛載,介紹了getters和actions的使用方法,最后,詳細(xì)說明了如何通過Pinia-plugin-persistedstate插件實(shí)現(xiàn)Pinia狀態(tài)的持久化處理,包括插件的安裝、配置和在main.ts文件中的注冊(cè)
2024-10-10
在Vue3中使用CSS Modules實(shí)現(xiàn)樣式隔離
隨著構(gòu)建現(xiàn)代前端應(yīng)用的需要,樣式的管理和隔離變得越來越重要,為了解決樣式?jīng)_突和管理困難的問題,CSS Modules 應(yīng)運(yùn)而生,本文我們將討論如何在 Vue3 中使用 CSS Modules 實(shí)現(xiàn)樣式隔離,需要的朋友可以參考下
2024-09-09
vue踩坑記錄之src的動(dòng)態(tài)綁定賦值問題
這篇文章主要介紹了vue踩坑記錄之src的動(dòng)態(tài)綁定賦值問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06