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,

  ...

}

]

巴特西

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

最新文章

热门文章