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

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

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

在这里插入图片描述
结果是这样的:
在这里插入图片描述

只需要在 label.formatter 上处理

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

label: {
	position: 'top',
	distance: 5,
	show: true,
	fontSize: 10,
	// 添加以下内容即可,这样的意思是每隔5个可视的点显示数值,而不是实际的数据点间隔
	formatter: (data) => {
	    if (data.dataIndex % 5 === 0){
	        return data.data.value
	    } else {
	        return ''
	    }
	}
},

在这里插入图片描述

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-22 15:40:01       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-22 15:40:01       106 阅读
  3. 在Django里面运行非项目文件

    2024-03-22 15:40:01       87 阅读
  4. Python语言-面向对象

    2024-03-22 15:40:01       96 阅读

热门阅读

  1. COPY requires at least two arguments, docker COPY 报错

    2024-03-22 15:40:01       39 阅读
  2. nginx的使用总结

    2024-03-22 15:40:01       37 阅读
  3. 计算机网络安全试题

    2024-03-22 15:40:01       40 阅读
  4. node.js nvm命令切换到node 14

    2024-03-22 15:40:01       43 阅读
  5. 面试十二、装饰器模式

    2024-03-22 15:40:01       42 阅读
  6. 量化交易入门(十一)Python开发-数据结构

    2024-03-22 15:40:01       39 阅读