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 ''
	    }
	}
},
相关推荐
jin1233221 天前
React Native鸿蒙跨平台完成剧本杀组队详情页面,可以复用桌游、团建、赛事等各类组队详情页开发
javascript·react native·react.js·ecmascript·harmonyos
李白你好1 天前
Burp Suite插件用于自动检测Web应用程序中的未授权访问漏洞
前端
经年未远1 天前
vue3中实现耳机和扬声器切换方案
javascript·学习·vue
刘一说1 天前
Vue 组件不必要的重新渲染问题解析:为什么子组件总在“无故”刷新?
前端·javascript·vue.js
可触的未来,发芽的智生1 天前
狂想:为AGI代称造字ta,《第三类智慧存在,神的赐名》
javascript·人工智能·python·神经网络·程序人生
徐同保1 天前
React useRef 完全指南:在异步回调中访问最新的 props/state引言
前端·javascript·react.js
fanruitian1 天前
uniapp 创建项目
javascript·vue.js·uni-app
刘一说1 天前
Vue 导航守卫未生效问题解析:为什么路由守卫不执行或逻辑失效?
前端·javascript·vue.js
一周七喜h1 天前
在Vue3和TypeScripts中使用pinia
前端·javascript·vue.js
weixin_395448911 天前
main.c_cursor_0202
前端·网络·算法