这是 vue3+echart5 遇到的报错:Cannot read properties of undefined (reading ‘type‘)
这个问题需要搞清楚两个关键方法:
toRaw:
作用:将一个由reactive生成的响应式对象转为普通对象。
使用场景:
用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。
markRaw:
作用:标记一个对象,使其永远不会再成为响应式对象。
应用场景:
有些值不应被设置为响应式的,例如复杂的第三方类库等。
当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能。
1.第一步在所在的组件引入
import { markRaw } from 'vue'
2.第二步初始化
initChart() {
// 初始化
this.chartInstance = markRaw(this.$echarts.init(this.$refs.rank_ref))//获取dom元素
const initOption = {
xAxis: {
type: "category",
},
yAxis: {
type: "value",
},
series: [
{
type: "bar",
},
],
};
this.chartInstance.setOption(initOption);
},