23. The echarts line chart displays the data on the line at intervals (displays one at a time)

The echarts line chart displays the data on the line at intervals (displays one at a time)

---

Because sometimes there will be a lot of data but you want to display the data on the polyline, it will be very tedious to display all of them, all crowded together, especially ugly and unsightly. The value is like
this:

Therefore, interval display is required, and the same method can be changed to display data at three intervals
. Effect diagram:

Note: Part of the configuration of the series in the option emphasizes the position of the formatter.
The opinionData data is polyline data, which is the data data in the series.

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
Optimized comment area

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

If you want to see the complete code, you can see the previous blog, but you need to add this custom display code yourself, so I won’t repeat the copy and paste here: 21. Remember that echarts draws a line chart in the vue project (some small details, including complete code)