一种非常简单的echarts tooltip点击固定与取消固定的实现方法
本文由 小茗同学 发表于 2025-11-13 浏览(4)
最后修改 2025-11-13 标签：echarts 固定 tooltip

目标

期望实现这样的效果：点击任意空白处，固定当前x轴提示，再次点击任意空白处，取消tooltip的固定显示。

实现

AI提供的方法都极其复杂，且都没有准确实现，以下是本次测试通过的非常简单的实现方式：

核心代码：

// 监听任意处点击事件（包括空白处），固定当前 xAxisPointer 以及 tooltip，再次点击取消固定
myChart.current?.getZr().on('click', function (e: any) {
  const ichart = myChart.current;
  const option = ichart.getOption();
  // 利用“禁用 tooltip 的鼠标跟随”实现 tooltip 的类似固定效果
  if (option?.tooltip?.[0]?.triggerOn !== 'none') {
	ichart?.setOption({
	  tooltip: { triggerOn: 'none' },
	});
  } else {
	// 否则，如果 tooltip 的鼠标跟随已被禁用，说明此时 tooltip 出于固定状态，需要取消固定
	// 重新开启鼠标跟随
	ichart?.setOption({
	  tooltip: { triggerOn: 'mousemove|click' },
	});
	// 还需要立即隐藏当前 tooltip
	ichart?.dispatchAction({
	  type: 'hideTip',
	});
  }
  var [xIndex] = ichart?.convertFromPixel('grid', [e.offsetX, e.offsetY]) || [];
  // 获取当前 x轴的value
  const xValue = data?.dtList?.[xIndex];
  console.log('当前X轴数据值', xIndex, xValue);
});

本方法已经贡献给豆包AI，后续你们继续提问可能会是这个答案：

完整demo

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>ECharts 简洁实现固定 Tooltip</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
	<style>
		body { display: flex; justify-content: center; padding: 20px; background-color: #f0f2f5; }
		#main { width: 800px; height: 500px; border: 1px solid #ccc; }
	</style>
</head>
<body>
	<div id="main"></div>

	<script type="text/javascript">
		var myChart = echarts.init(document.getElementById('main'));

		var data = {
			dtList: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
			sales: [120, 200, 150, 80, 70, 110, 130]
		};

		var option = {
			title: { text: '简洁实现：点击固定/取消 Tooltip' },
			tooltip: {
				trigger: 'axis',
				triggerOn: 'mousemove|click', // 默认：鼠标移动或点击触发
				backgroundColor: 'rgba(0,0,0,0.7)',
				textStyle: { color: '#fff' }
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				data: data.dtList
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{
					name: '销量',
					type: 'line',
					data: data.sales
				}
			]
		};

		myChart.setOption(option);

		// --- 核心代码：简洁实现固定/取消固定 ---
		// 监听任意处点击事件（包括空白处），固定当前 xAxisPointer 以及 tooltip，再次点击取消固定
		myChart?.getZr().on('click', function (e: any) {
		  const option = myChart.getOption();

		  // 利用“禁用 tooltip 的鼠标跟随”实现 tooltip 的类似固定效果
		  if (option?.tooltip?.[0]?.triggerOn !== 'none') {
			myChart?.setOption({
			  tooltip: { triggerOn: 'none' },
			});
		  } else {
			// 否则，如果 tooltip 的鼠标跟随已被禁用，说明此时 tooltip 出于固定状态，需要取消固定
			// 重新开启鼠标跟随
			myChart?.setOption({
			  tooltip: { triggerOn: 'mousemove|click' },
			});
			// 还需要立即隐藏当前 tooltip
			myChart?.dispatchAction({
			  type: 'hideTip',
			});
		  }
		  var [xIndex] = myChart?.convertFromPixel('grid', [e.offsetX, e.offsetY]) || [];
		  // 获取当前 x轴的value
		  const xValue = data?.dtList?.[xIndex];
		  console.log('当前X轴数据值', xIndex, xValue);
		  setFixedLineTime?.(xValue);
		});
		// --- 核心代码结束 ---

		window.addEventListener('resize', function() {
			myChart.resize();
		});
	</script>
</body>
</html>