当前位置：首页 > news >正文

vue2.x Echart label根据数据长度选择不同的间隔显示

news 来源：原创 2025/5/20 4:58:30

折线图需要在各个点上方展示数据，但是数据数字的位数可能达到5~8位，需要根据密度进行间隔展示。例如，如果数据长度小于7，则每一项都展示，如果在7~10之间，2位展示一项，如果大于10，那么4位展示一项。

【效果图】

1.数据长度小于7，则每一项都展示

2. 数据长度在7~10之间，2位展示一项

3. 数据长度大于10，4位展示一项

【参考代码】

series: [{label: {show: true,position: 'top',  // 标签显示在折线上方                  fontWeight: 'bold',rich: {show: {          fontSize: 18,color: '#000',fontWeight: 'bold'},hide: {color: 'transparent',}},formatter: (params) => {if (data.length > 7) {                                    if(data.length > 10) {// 如果数据超过10条，隔4个显示数值return params.dataIndex % 4 == 0? '{show|' + params.value + '}': '{hide|' + params.value + '}';} else {// 如果数据超过7条小于10条，隔4个显示数值return params.dataIndex % 2 == 0? '{show|' + params.value + '}': '{hide|' + params.value + '}';}} else {// 数据小于7条，每个都显示return '{show|' + params.value + '}';}}},// ...