解决ECharts双座标左右分隔线无法重合问题

当我们两组数据在一张图上时经常遇到左右两个Y轴的问题,如果最大值不能整除则会出现分隔线不重叠影响视觉效果的问题,

如图:

解决方法:

解决思路通过简单的计算,让左右Y轴变成可以整除的倍数关系既可,我的算法代码如下:

// 计算左右轴可整除的最大值
calculateMax() {
  // 业绩最大值
  let resultMax = Math.max(...this.resultArr);
  // 排名最大值
  let orderMax = Math.max(...this.orderByArr);
  // 定义余数
  let remainderNum = 0;
  // 如果业绩大于排名
  if (resultMax >= orderMax) {
    remainderNum = resultMax % orderMax;
    // 小值加余数让其可整除
    orderMax += remainderNum;
    // 大值乘以向上取整的倍数让其也可以整除
    resultMax = Math.ceils(resultMax / orderMax) * orderMax;
  } else {
    remainderNum = orderMax % resultMax;
    resultMax += remainderNum;
    orderMax = Math.ceil(orderMax / resultMax) * resultMax;
  }
  return {
    resultMax,
    orderMax,
  };

最后来看下效果: