欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決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ù)可視化是非常常見(jiàn)的需求,然而有時(shí)候在引入Echarts的過(guò)程中可能會(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í)例上的問(wèn)題，不太建議把整個(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)文章

最新評(píng)論