echarts分享(四):双y轴图表刻度均匀分布问题

本文主要是介绍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,...
}
]