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

我不是女神ヾ 2022-10-17 00:35 497阅读 0赞

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

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bnNoaW5lQmxvZw_size_16_color_FFFFFF_t_70][]

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

//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 }
    
    }

> 处理之后 ，如下图所示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bnNoaW5lQmxvZw_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bnNoaW5lQmxvZw_size_16_color_FFFFFF_t_70]: /images/20221014/fc8928d9aac741e8930b54a9c96f829f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bnNoaW5lQmxvZw_size_16_color_FFFFFF_t_70 1]: /images/20221014/96b98114c19b4ad3adab5b9ca7b7a3bf.png