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

猜你喜欢

转载自blog.csdn.net/KanShiMeKan/article/details/126464620