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行就可以正常使用了。

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐