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,
  ...
}
]