顶部提示数据信息～echarts奇奇怪怪系列_echarts 设置顶部信息-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34027761/article/details/125208028

本文分享了一种使用Echarts实现图表数据顶部悬浮显示信息的方法。通过增加一个隐藏的x轴并利用axisPointer的配置项，结合rich文本格式，成功解决了在鼠标悬停时显示详细信息的问题，尽管文档中未明确支持rich配置，但实践证明可以实现，只是存在定位偏移问题。最后给出了具体的option配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果

最近工作遇到UI设计的图是把信息显示放在数据的顶端的,鼠标放在那个数据上，信息就显示在哪个数据上
上图：
在这里插入图片描述
默默打开官网和论坛，并没有找到示例。。。

二、解决方法

开始发散思维，我发现一个可以显示数据的信息的东西，axisPointer这个配置项可以让数据显示在对应轴上
在这里插入图片描述
我想到个办法：

增加一个隐藏的x轴，放在顶部，
文字样式用ormatter配置项来设置（但是我发现文档里没有富文本rich的配置项，但是我还是不死心试一试，结果成功了）

Note:但是我发现可能是文档里没支持，他在使用rich时会有定位的偏移，随着rich里的使用越多，偏移也是越是严重

三、最终效果

在这里插入图片描述

四、option配置项

const color = [{
	type: 'linear',
	x: 0,
	x2: 0,
	y: 0,
	y2: 1,
	colorStops: [{
			offset: 0,
			color: '#40BDF7',
		},
		{
			offset: 0.5,
			color: '#40BDF7',
		},
		{
			offset: 1,
			color: '#3F82F7',
		},
	],
}, ]
const option = {
	color,
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'line',
			lineStyle: {
				color: 'rgba(0,0,0,0)',
			},
			label: {
				formatter: '{rect|} {font|{value}}',
				color: color[0].colorStops[0].color,
				backgroundColor: 'rgba(0,0,0,0)',
				rich: {
					rect: {
						height: 15,
						width: 15,
						backgroundColor: color[0],
					},
				},
			},
		},
		showContent: false,
	},
	xAxis: [{
		type: 'category',
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	}, {
		type: 'category',
		axisLine: {
			show: false,
		},
		axisLabel: {
			show: false,
			align: 'center',
		},
		axisTick: {
			show: false,
		},
		axisPointer: {
			snap: false,
			lineStyle: {
				show: false,
			},
			label: {
				show: true,
			},
		},
		data: [120, 200, 150, 80, 70, 110, 130],
	}, ],
	yAxis: {
		type: 'value'
	},
	series: [{
		data: [120, 200, 150, 80, 70, 110, 130],
		type: 'bar'
	}]
};