echarts 折线图 数据点过密,显示重叠该如何解决

echarts 折线图 数据点过密,显示重叠该如何解决

有这样一个图表,显示的数据比较多, 当把 label 显示出来的时候,这些 label 重叠了,我想让它间隔一下。

结果是这样的:

只需要在 label.formatter 上处理

具体的官方文档是: https://echarts.apache.org/zh/option.html#series-line.label.formatter

js 复制代码
label: {
	position: 'top',
	distance: 5,
	show: true,
	fontSize: 10,
	// 添加以下内容即可,这样的意思是每隔5个可视的点显示数值,而不是实际的数据点间隔
	formatter: (data) => {
	    if (data.dataIndex % 5 === 0){
	        return data.data.value
	    } else {
	        return ''
	    }
	}
},
相关推荐
阳树阳树4 分钟前
Solidjs 响应式 & 编译原理初探
前端·javascript·面试
liangmou21218 分钟前
HTML5的笔记
前端·笔记·html·html5
MurphyChen15 分钟前
前端请求进化史 :从 Form 到 Server Actions 🚀
前端·javascript·面试
兰德里的折磨55030 分钟前
基于若依和elementui实现文件上传(导入Excel表)
前端·elementui·excel
喝拿铁写前端33 分钟前
一个列表页面,初级中级高级前端之间的鸿沟就显出来了
前端·架构·代码规范
magic 2451 小时前
ES6变量声明:let、var、const全面解析
前端·javascript·ecmascript·es6
M_chen_M2 小时前
es6学习02-let命令和const命令
前端·学习·es6
好_快2 小时前
Lodash源码阅读-dropWhile
前端·javascript·源码阅读
M_chen_M2 小时前
JS6(ES6)学习01-babel转码器
前端·学习·es6
好_快2 小时前
Lodash源码阅读-dropRightWhile
前端·javascript·源码阅读