echarts:双y轴图表刻度均匀分布问题
今天分享一个小问题,内容不多。
双y轴图表中,为了图表的美观,经常会隐藏一侧的y轴刻度线,仅显示一侧的刻度线。那么问题就来了,两个y轴的数据数值大小不同,常常会导致刻度线的刻度分布不均匀,该如何解决呢?
这里分享下我在项目中所作的处理:
首先是要找出当前y轴数据的最大值,与100相除,再对得到的商进行向上取整,最后把结果乘100。
有一点要注意,取整这里必须是向上取整(Math.ceil)。
备注:Math.round是四舍五入取整,Math.floor是向下取整,使用这两个方法可能会导致数据显示不全
并且要注意极端情况:当得到的结果为0,也即是最大值小于100的时候,我们要把最终的结果设置成100。
简单代码如下:
let yData = [100,120,140,110,160,130]; let zData = [70,50,40,80,60,90,100]; function getSplitInterval(data){ let max = Math.ceil(Math.max(...data) / 100) * 100; if(max===0){max=100} return max } let ymax = getSplitInterval(yData) let zmax = getSplitInterval(zData)
当然,肯定会有同学产生疑问:为什么要与100进行运算?这个实际上是为了后面的刻度分隔提供便利,后面我是把刻度分成了5段,刚好可以被100整除。
也不一定是非要选择100,只要左后刻度均匀即可。
y轴属性设置如下:
yAxis:[ { ... min: 0, max: ymax, splitNumber: 5, minInterval:1, interval: ymax / 5, ... }, { ... min: 0, max: zmax, splitNumber: 5, minInterval:1, interval: zmax / 5, ... } ]