解决echarts纵坐标数字太长，导致遮挡的问题

傷城~ 2022-12-26 04:43 535阅读 0赞

![20201203111541756.png][]

数字位数过多时，在小屏手机会出现数字显示不全，被遮挡的问题。此处记录下，在摸索下有两种办法解决这个问题。

## 1.改变距离左边的距离 ##

这种办法，可用于处理数字位数不太多，经过测试，八位数一下都可以使用这种办法，八位数以上，会影响整体布局，出现曲线显示较少的问题。

grid: {
            left: '18%',}

![20201203112315218.png][]

## 2.使用科学计数法 ##

这种方法可以用来处理位数过多的问题，缺点就是数字不够直观。

yAxis: {
                    type: 'value',
                    // 科学记数法
                    axisLabel: {
                        formatter: function (value) {
                            if (Math.abs(value) > 100000) {
                                if (value == 0) {
                                    return "0";
                                } else if ((value + '').indexOf('e') > 0) {
                                    return (value + '').replace(/e/, "E");
                                } else {
                                    var res = value.toString();
                                    var numN1 = 0;
                                    var numN2 = 0;
                                    var num1 = 0;
                                    var num2 = 0;
                                    var t1 = 1;
    
                                    for (var k = 0; k < res.length; k++) {
                                        if (res[k] == ".")
                                            t1 = 0;
                                        if (t1)
                                            num1++;
                                        else
                                            num2++;
                                    }
    
                                    // 均转换为科学计数法表示
    
                                    if (Math.abs(value) < 1) {
                                        // 小数点后一位开始计算
                                        for (var i = 2; i < res.length; i++) {
                                            if (res[i] == "0") {
                                                numN2++; //记录10的负指数值（默认值从1开始）
                                            } else if (res[i] == ".")
                                                continue;
                                            else
                                                break;
                                        }
    
                                        var v = parseFloat(value);
                                        v = v * Math.pow(10, numN2);
                                        v = v.toFixed(1); //四舍五入 仅保留一位小数位数
                                        return v.toString() + "e-" + numN2;
                                    } else if (num1 > 1) {
                                        numN1 = num1 - 1;
                                        var v = parseFloat(value);
                                        v = v / Math.pow(10, numN1);
                                        if (num2 > 1) {
                                            v = v.toFixed(1);
                                        }
                                        return v.toString() + "e" + numN1;
                                    }
    
                                }
                            } else {
                                return value;
                            }
                        }
                    }
                },

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x2aGFveWU_size_16_color_FFFFFF_t_70][]

## 3.文字倾斜 ##

yAxis: {
           
            axisLabel: {
              interval: 0,
              rotate: 45,
            }
              
          },

[20201203111541756.png]: /images/20221120/9657bed0d0754cc8906d927fb3282a11.png
[20201203112315218.png]: /images/20221120/4323b6e908db4fabb9889a45567171d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x2aGFveWU_size_16_color_FFFFFF_t_70]: /images/20221120/4108085e671348f28dce2fd54b8a991e.png