当折线图数据变化较小,数据值普遍较大时会出现这种情况,看起来很不美观
(比较啰嗦,可以直接拉到底看最终代码)
解决方案很容易想到,给Y轴设置最大值最小值,这样:
yAxis:{
min: (value) => {
return value.min
},
max: (value) => {
return value.max
}
}
但是这种情况会出现Y轴刻度这样:
考虑这种情况,我们可以对返回值取整,看起来好看一些,这样:
yAxis:{
// 考虑数据都是千位,百位起最小值向上下取整,最大值向上取整
min: (value) => {
return Math.floor(value.min / 100) * 100;
},
max: (value) => {
return Math.ceil(value.max / 100) * 100;
}
}
效果:
最终方案,当数据位数不固定时,可以这样做:
yAxis:{
min: (value) => {
let num = 10 ** (value.min.toString().length - 2)
return Math.floor(value.min / num) * num;
},
max: (value) => {
let num = 10 ** (value.max.toString().length - 2)
return Math.ceil(value.max / num) * num;
}
}