解决vue3中使用echart报错:Cannot read properties of undefined (reading ‘type‘)

<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>