Echarts--折线图便签上下交错

最新推荐文章于 2024-04-26 15:16:45 发布

深海有鱼呀

最新推荐文章于 2024-04-26 15:16:45 发布

阅读量1k

点赞数

分类专栏：可视化

本文链接：https://blog.csdn.net/weixin_42069147/article/details/110476374

版权

本文介绍了如何使用Echarts实现折线图中标签的上下交错展示，通过调整标签换行和设置合适的distance，可以达到理想的一上一下效果。同时，还讲解了如何重新绘制点以覆盖原有的点，优化视觉呈现。

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

1、换行和设置distance来达到一上一下的效果

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";