如何处理echats双y轴刻度不一致（不对齐）问题

双y轴刻度不一致处理之前，如下图所示

为了解决上图问题，最先想到使用最大公约数来解决刻度不一致问题，话不多说，上代码

  //yMax1 第一条y轴的最大值   yMax2 第二条y轴的最大值
  var divisor = 5;
  var lcmVal = chartlcm(yMax1, yMax2)//获取两条y轴的最大公约数
  var Ymaxval_interval = YmaxvalAndinterval(yMax1, yMax2, lcmVal, divisor);//计算y轴最大值和间隔值

   yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                textStyle: {
                                    color: '#5E5E5E'
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#BFBFBF',
                                }
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: ['#BFBFBF'],
                                    width: 1,
                                    opacity: 0.5,
                                }
                            },
                            min: 0,//最小值
                            max: Ymaxval_interval.max1,//最大值
                            interval: Ymaxval_interval.interval1,//每个刻度的间隔值
                        },
                        {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} %',
                                textStyle: {
                                    color: '#5E5E5E'
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#BFBFBF',
                                }
                            },
                            min: 0,
                            max: Ymaxval_interval.max2,
                            interval: Ymaxval_interval.interval2,
                        }
                    ],

//echarts专用求最大公约数 不含小数
chartlcm = function (a, b) {
    var result = 1;
    for (var i = 1; i <= a && i <= b; i++) {

        if (a % i == 0 && b % i == 0) {
            result = i;
        }
        if (result > 1 && i >= 10)//公约数大于10的时候 直接跳出 避免y轴刻度太多  (如果不介意刻度太多可以把这一段去掉）
            break;
    }
    return result;
}


//获取echarts  多Y轴的最大值和间隔值 lcmval 最大公约数   divisor 间隔数量
YmaxvalAndinterval = function (m, n, lcmval, divisor) {

    var interval1 = Math.ceil(m / lcmval);
    var interval2 = Math.ceil(n / lcmval);

    if (lcmval != 1 && lcmval != 0 && lcmval <= 10)
    {
        return { max1: m, max2: n, interval1: interval1, interval2: interval2 }
    }

    if (divisor == undefined || divisor == null)
        divisor = 5;

    //var mval = m % divisor;
    //if (mval > 0) {
    //    m = ((m - mval) / divisor + 1) * divisor
    //}
    m = Math.ceil(m / divisor) * divisor

    n = Math.ceil(n / divisor) * divisor

    interval1 = Math.ceil(m / divisor );

    interval2 = Math.ceil(n / divisor);

    return { max1: m, max2: n, interval1: interval1, interval2: interval2 }

}

 

 

处理之后 ，如下图所示