echart报错Cannot read properties of undefined (reading ‘type‘)

顾北顾

已于 2023-06-12 16:46:14 修改

阅读量768

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端 bug

于 2023-06-12 16:40:45 首次发布

本文链接：https://blog.csdn.net/qq_51688013/article/details/131172067

在Vue3中，由于proxy的使用，this.chart在内部被转换成响应式对象，这可能导致在resize时无法正常工作。为了解决这个问题，可以使用markRaw函数将echarts实例标记为非响应式，以确保其在初始化时不受响应式转换影响，提高性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

错误显示

在这里插入图片描述

错误原因

vue3中使用proxy的方式监听响应式，this.chart会被在vue内部转换成响应式对象，从而在resize 的时候获取不到

解决方案

参考官方：
你可以有选择地退出默认的深度响应式/只读转换模式，并将原始的，未被代理的对象嵌入状态图中。它们可以根据情况灵活运用：

有些值不应该是响应式的，例如复杂的第三方类实例或 Vue 组件对象。
当渲染具有不可变数据源的大列表时，跳过 proxy 转换可以提高性能。
所以在实例化echart时，将其指定为非响应式的即可。

import { markRaw } from "vue";
  // 初始化chart
const chart = ref<echarts.ECharts | null>(null);
chart.value = markRaw(echarts.init(chartElement, "dark"));