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

最新推荐文章于 2024-06-27 15:54:55 发布

baijian10

最新推荐文章于 2024-06-27 15:54:55 发布

阅读量4.3k

点赞数 7

文章标签： js

本文链接：https://blog.csdn.net/baijian10/article/details/109146541

版权

在这里插入图片描述

因为看官网的时候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',
			}
		}
	}
}]