一、效果

最近工作遇到UI设计的图是把信息显示放在数据的顶端的,鼠标放在那个数据上，信息就显示在哪个数据上
上图：

默默打开官网和论坛，并没有找到示例。。。

二、解决方法

开始发散思维，我发现一个可以显示数据的信息的东西，axisPointer这个配置项可以让数据显示在对应轴上

我想到个办法：

1. 增加一个隐藏的x轴，放在顶部，
2. 文字样式用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'
	}]
};