echarts中X轴显示特定个数label并修改样式的方法详解
前言
在使用echarts绘图时可能遇到一些特别的需求，如，当x周表示日期且数据较多（如三个月，按天统计），此时如果按照echarts的默认配置，则会根据空间剩余的大小自动计算最终显示有限的几个不重叠的label
需求： 必须显示起始日期和终止日期
echarts默认属性会导致如果重叠，最大值和最小值会被隐藏，首先要实现不让最大值和最小值隐藏，这很简单
xAxis: {
axisLabel: {
showMinLabel: true,
showMaxLabel: true
}
}
需求： 由于画布限制，只让显示起始和终止日期，或者再加上中间日期
此时如果只设置上面的两个属性，中间的刻度仍然会根据echarts的算法去绘制，依然是按照剩余空间来显示，不一定会符合要求，即便只显示了一个值，可能也不是我们预期的那一个，那么还有一个属性
xAxis: {
axisLabel: {
showMinLabel: true,
showMaxLabel: true,
interval: Math.ceil(data.length / 2)
}
}
interval 属性表示间隔多少项展示一个刻度，在这里我们直接取一半，这样其他的刻度就会被隐藏掉
这是种比较简单的实现方法，当然也可以直接对label进行格式化
xAxis: {
data: data,
axisLabel: {
formatter (val, i) {
if (i === 0 || i === data.length - 1 || i === Math.ceil(data.length / 2)) {
return val
}
return ''
}
}
}
这种写法，我们将只留下需要的刻度，其余都赋值为''，一样可以实现需求，同时也可以对最终值进行格式化
如moment(val).format('YYYY-MM-DD')等
需求： 将起始和终止刻度限定在轴线范围内，不允许现实超过轴线
这时候单纯的靠属性已经没办法满足需求，因为很明显左右都需要调整，同时一个是左边多了，一个是右边多了，此时需要用到echarts的富文本模式rich
// 左右两个位置需要调整，需要定义两个类名
// 这里样式可以用padding， 也可以用宽度和对齐方式来做（我用这种），
const richCss = {
start: {
width: 145,
align: 'right'
},
end: {
width: 145,
align: 'left'
}
}
这样我们就有了两个类名， 再通过第二步的formatter函数的方法将其通过富文本的方式渲染
xAxis: {
data: data,
axisLabel: {
formatter (val, i) {
if (i === 0) {
return `{start| ${val}}`
} else if (i === data.length - 1) {
return `{end| ${val}}`
} else if (i === Math.ceil(data.length / 2)) {
return val
}
return ''
},
rich: richCss
}
}
这样就实现了将两端刻度限定在轴线范围内， 达到美化的目的，当然如果中间的刻度位置有问题也可以用相同的方法进行调整
这是本人在工作中遇到的需求，然后自己揣摩出的解决方案，如果有更好的方案欢迎留言，一起学习
总结
到此这篇关于echarts中X轴显示特定个数label并修改样式的文章就介绍到这了,更多相关echarts X轴显示特定个label内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家带来一篇JS当前页面登录注册框,固定DIV,底层阴影的实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
下面小编就为大家分享一篇ligerUI---ListBox(列表框可移动的实例)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-11-11
JavaScript垃圾回收机制(引用计数,标记清除,性能优化)
这篇文章主要介绍了JavaScript垃圾回收机制(引用计数,标记清除,性能优化),垃圾回收是JavaScript的隐藏机制，我们通常无需为垃圾回收劳心费力，只需要专注功能的开发就好了2022-07-07
本篇文章主要介绍了深入理解ES6中let和闭包，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了微信小程序从注册账号到上架详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了uni-app web-view的使用，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
JavaScript在浏览器中的性能成为开发者所面临的最重要的可用性问题。而这个问题又因JavaScript的阻塞特性变的复杂，也就是说当浏览器在执行JavaScript代码时，不能同时做其他任何事情。本文详细介绍了如何正确的加载和执行JavaScript代码，从而提高其在浏览器中的性能。2017-02-02
这篇文章主要给大家介绍了关于js重写alert事件的相关资料，这样可以避免alert弹框标题出现网址的情况，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
本文主要分享了js实现增加数字显示的环形进度条效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要为大家介绍了JavaScript设计模式中的策略模式，对JavaScript设计模式感兴趣的小伙伴们可以参考一下2016-01-01
最新评论