23、echarts折线图间隔显示折线上的数据（隔一个显示一个）

echarts折线图间隔显示折线上的数据（隔一个显示一个）

---

因为有时候数据会比较多但是又想在折线上显示数据，全部显示的话会很冗杂，全部挤在一起，特别丑还不好看值
就像这样：

所以需要间隔显示，同样的方法更改代码也可以变成间隔三个显示数据
效果图：

注：option中的series的部分配置，着重强调formatter的位置
其中opinionData数据是折线数据，也就是series中的data数据

series: [{
	label: {
	    show: true,
	     textStyle: {
	       color: '#7294FD',
	       fontWeight: 600,
	       fontSize: 12,
	       position: 'top', // 定位在拐点下面
	       distance: 115 // 偏移量，举例拐点多少
	     }, // 拐点文字样式
	     formatter: function (data) {
	       // 获得数据
	       const arr = opinionData
	       // 找到该数值所在的下标并判断是否是偶数
	       if (((arr.findIndex(value => value === data.value)) % 2) === 0) {
	         // 删除找到的这个数值
	         delete arr[opinionData.findIndex(value => value === data.value)]
	         return ''
	       } else {
	         delete arr[opinionData.findIndex(value => value === data.value)]
	         return data.value
	       }
	     }
	   },
	 }]

---

2023.3.1
评论区优化后的

formatter: (data) => {
if (data.dataIndex % 2 === 0) {
return ''
} else {
return data.value
}
}

若要见完整代码可见之前的博客，不过需要自己添加这个自定义显示代码，这里不赘述复制粘贴了：21、记vue项目中echarts绘制折线图（一些小细节，含完整代码）