Vue3 uses Echarts to cause tooltip failure problem and solutions

Version vue3.2.47 echarts5.4.1

Use responsive object storageechartsinstance, causing tooltip function to fail;

Cause: Vue3 uses proxy object proxy, while echarts uses a large number of congruents (===), which fails to compare and leads to a bug.

Workaround: Swap the ref or reactive object with a normal variable to save the echarts instance.

Initialize the chart

// Initialize the bar chartfunction initBarChart(data) {
	const myChart = (unref(barRef));
	const option: EChartsOption = {
	    color: ['#3398DB'],
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: { type: 'shadow' }
	    },
	    grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true
	    },
	    xAxis: [
	        {
	            type: 'category',
	            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
	            axisTick: { alignWithLabel: true }
	        }
	    ],
	    yAxis: [{ type: 'value' }],
	    series: [
	        {
	            name: 'Direct access',
	            type: 'bar',           
	            data: [10, 52, 200, 334, 390, 330, 220]
	        }
	    ]
	};	
	(option);
}

Update chart data

// Update the bar chartfunction updateBarChart(data) {
	const getLineChartInstance = (unref(barRef)!);
	getLineChartInstance &amp;&amp; ({ series: [{ data }] });
}

This is the end of this article about the failure of tooltip using Echarts in Vue3. For more information about the failure of tooltip using Echarts in Vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!