背景

由于项目需要，展示的Echarts折线图需要实现刻度线对齐，且0刻度对齐这两项功能。

过程

基于这个需求，主要拆解成两步

1. 刻度线对齐 由于Echarts提供了对应的属性，所以可以在yAxis设置alignTicks: true

2. 0刻度对齐（当前Echarts版本5.4.2没有对应的属性设置）

主要分为以下几步：

2.1. 求出最大最小值

由于一般会存在双y轴，每个y轴存在正负值，所以需要先计算出每个y轴的最大值，最小值(max1, min1, max2, min2)。

求出最大最小值 absMaxMin1 absMaxMin2

2.2. 算出最大位数

需要了解该数值的位数

const mag1 = 10 ** Math.floor(Math.log10(absMaxMin1));

2.3. 最大位数向上取整

由于启动了对齐分割线，因此，数据在分隔时候，有时并不会按最大值展示

比如现在y1的最大值为value1，y2的最大值为value2。可能会出现y2的最大值比value2小的情况，所以，我们需要计算最大值并向上取整

let absComputeMax1 = Math.ceil(absMaxMin1 / mag1) * mag1; // 计算最大值的取整
if (absComputeMax1 == absMaxMin1) {
  absComputeMax1 = absComputeMax1 + mag1;
}

2.4. 由于存在正负数，所以此时实现为3的整数倍，可以使数据较好的分隔

由于echarts的源码是用算法算出来的分隔线，因此，通过实践，最好是3的倍数能更优雅的展示出来

while (!Number.isNaN(absComputeMax1) && absComputeMax1 % 3 !== 0) {
  absComputeMax1 += mag1;
}

效果