echarts生成折线图实现标签一上一下，避免数据过长重叠

最新推荐文章于 2024-03-21 17:34:20 发布

baijian10

最新推荐文章于 2024-03-21 17:34:20 发布

阅读量4.7k

点赞数 7

文章标签： js

本文链接：https://blog.youkuaiyun.com/baijian10/article/details/109146541

版权

本文介绍了一种在ECharts中通过调整label显示位置的方法，利用distance属性和换行技巧实现标签的一上一下显示效果，适用于无法直接设置动态位置的情况。

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

在这里插入图片描述

因为看官网的时候label的position是可以有top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight这么多选项的，但是只能统一设置，并不能进行动态设置，rich里面也没有可以修改position的选项。
无奈之下只能选择换行和设置distance来达到一上一下的效果
series的设置：

series: [{
	data: [820.25656, 932.3657, 901.58487, 934.25648, 1290.2645, 1330, 1320],
	type: 'line',
	label:{
		show:true,
		position:'top',
		distance:-28,
		formatter:function(value){
			let valueType
			if(value.dataIndex%2!=0){
				valueType="shuang";
				return '\n\n\n{' + valueType + '|' + value.data + '}';
			}else{
				valueType="dan";
				return '{' + valueType + '|' + value.data + '}\n\n\n';
			}
		},
		rich:{
			shuang:{
				color:'blue',
			}
		}
	}
}]