echarts:双y轴图表刻度均匀分布问题

今天分享一个小问题，内容不多。

双y轴图表中，为了图表的美观，经常会隐藏一侧的y轴刻度线，仅显示一侧的刻度线。那么问题就来了，两个y轴的数据数值大小不同，常常会导致刻度线的刻度分布不均匀，该如何解决呢？

这里分享下我在项目中所作的处理：

首先是要找出当前y轴数据的最大值，与100相除，再对得到的商进行向上取整，最后把结果乘100。
有一点要注意，取整这里必须是向上取整(Math.ceil)。
备注：Math.round是四舍五入取整，Math.floor是向下取整，使用这两个方法可能会导致数据显示不全
并且要注意极端情况：当得到的结果为0，也即是最大值小于100的时候，我们要把最终的结果设置成100。
简单代码如下：

?

1 2 3 4 5 6 7 8 9 10

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轴属性设置如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

yAxis:[ {   ...   min: 0,   max: ymax,   splitNumber: 5,   minInterval:1,   interval: ymax / 5,   ... }, {   ...   min: 0,   max: zmax,   splitNumber: 5,   minInterval:1,   interval: zmax / 5,   ... } ]