解决vue3中使用echart报错:Cannot read properties of undefined (reading ‘type‘)
更新时间：2024年01月24日 14:35:35 作者：不想掉头发啊！！
在Vue项目中使用Echarts进行数据可视化是非常常见的需求,然而有时候在引入Echarts的过程中可能会遇到报错,本文主要介绍了解决vue3中使用echart报错:Cannot read properties of undefined (reading ‘type‘),感兴趣的可以了解一下
一、报错原因
出现如下报错的原因是：
Proxy 应用到了整个 ECharts 实例上的问题，不太建议把整个 ECharts 实例这样的对象放到 ref 里，容易影响到实例底层的运行。可以使用 shallowRef 替代，这样 Proxy 不会应用到 ECharts 实例底下的各个属性上。
二、解决办法
把echart实例对象不要用ref等响应式保存，可以使用shallowRef等浅层作用进行保存。点击前往官网查看
具体代码：
<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报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue触发真实的点击事件跟用户行为一致问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue Extends 扩展选项用法,结合完整实例形式分析了Vue Extends 扩展选项相关使用技巧与操作注意事项,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了关于Ant-Design-Vue快速上手指南+排坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了Vue3 跨域配置devServer的参数和设置,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue中data和data()的区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要为大家详细介绍了Vue计数器案例的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
本文主要介绍了Vue3+TypeScript 常用代码示例总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2026-03-03
本文介绍了Pinia的使用方法及如何实现状态持久化存储,首先,介绍了Pinia的安装和在main.ts中的挂载,介绍了getters和actions的使用方法,最后,详细说明了如何通过Pinia-plugin-persistedstate插件实现Pinia状态的持久化处理,包括插件的安装、配置和在main.ts文件中的注册2024-10-10
随着构建现代前端应用的需要,样式的管理和隔离变得越来越重要,为了解决样式冲突和管理困难的问题,CSS Modules 应运而生,本文我们将讨论如何在 Vue3 中使用 CSS Modules 实现样式隔离,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了vue踩坑记录之src的动态绑定赋值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
最新评论