vue3使用echarts5.3.3无法正常使用折线图
·
vue3加载其他类型图都可以正常使用,但是使用折线图时就不能正常显示tooltip,并且点击legend报错 。
有两种错误 :can’t access property “type”, coordSys is undefined和Uncaught TypeError: can’t access property “type”, seriesModel.coordinatesystem is undefined
错误原因是echarts对ref处理有问题。
错误写法:
<template>
<div ref="chartRef" :style="{ height: height, width: width }"></div>
</template>
...
setup(props) {
const chartRef = ref<HTMLElement>() as Ref<HTMLElement>;
const chart = ref<echarts.ECharts>() as Ref<echarts.ECharts>;
onMounted(() => {
chart.value = echarts.init(chartRef.value as HTMLElement);
chart.value.setOption(props.options);
});
return {
chartRef,
chart,
};
},
正确写法:
<template>
<div ref="chartRef" :style="{ height: height, width: width }"></div>
</template>
...
setup(props) {
const chartRef = ref<HTMLElement>() as Ref<HTMLElement>;
let chart = null;
onMounted(() => {
chart = echarts.init(chartRef.value as HTMLElement);
chart.setOption(props.options);
});
return {
chartRef,
chart,
};
}
可以看到就只改动了3行就可以正常使用了。
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)