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,
		};
	},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

正确写法：

<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,
		};
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

可以看到就只改动了3行就可以正常使用了。