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绘制折线图(一些小细节,含完整代码)
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgabbfj
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24