• 关于echart x轴溢出的解决办法


    现象

      溢出挤在一起,或者默认多余的不显示,如果需要强制显示,需要设置

    axisLabel: {  
         interval: 0,    
     }  

    解决办法:

    一、旋转一定的角度

    axisLabel: {  
       interval:0,  
       rotate:40  
    }  

    二、文字溢出就换行

      1、直接换行,设置一行最多多少个字

    yAixs:[
        type:'category',
        data:key,
        axisLabel: {  
            interval: 0,  
            formatter:function(value)  
            {  
                debugger  
                var ret = "";//拼接加
    返回的类目项  
                var maxLength = 2;//每项显示文字个数  
                var valLength = value.length;//X轴类目项的文字个数  
                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
                if (rowN > 1)//如果类目项的文字大于3,  
                {  
                    for (var i = 0; i < rowN; i++) {  
                        var temp = "";//每次截取的字符串  
                        var start = i * maxLength;//开始截取的位置  
                        var end = start + maxLength;//结束截取的位置  
                        //这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧  
                        temp = value.substring(start, end) + "
    ";  
                        ret += temp; //凭借最终的字符串  
                    }  
                    return ret;  
                }  
                else {  
                    return value;  
                }  
            }  
        } 
    ]

     2、遇到有特殊字符,比如括号的,如果将括号放在同一行,就不太好看了,解决办法

    yAxis:[
        {
            type:'category',
            data:key,
            axisLabel: {  
                interval: 0,  
                formatter:function(value)  
                {  
                    var str=value;
                    var str1="";
                    var i=0;
                    while(i<str.length){
                        if(str[i]==="("){
                            str1+="
    "+str[i];
                        }else{
                            str1+=str[i];
                        }
                        i++;
                    } 
                    return str1;
                }  
            }
        }
    ]

      推荐一下比较全面的做法: http://blog.csdn.net/kebi007/article/details/68488694

  • 相关阅读:
    浏览器拦截跨域请求处理方法
    如何保护java程序不被反编译
    python面对对象面试题
    面向对象之继承
    面向对象之多态
    面向对象之组合
    面向对象初始
    python之匿名函数
    python之内置函数
    azure连接redis
  • 原文地址:https://www.cnblogs.com/pengfei25/p/9020981.html
Copyright © 2020-2023  润新知