zoukankan      html  css  js  c++  java
  • 关于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

  • 相关阅读:
    枚举转SelectList扩展方法
    关于Log4Net的使用和配置
    关于Task的认识
    Android Studio 创建不同分辨率的图标
    Android 修改应用图标(Android Studio)
    Android 去除应用标题栏(Android Studio)
    Android Studio 快捷键
    Java 构造器 遇到多个构造器时要考虑用构建器
    Java 构造器 考虑用静态构造方法代替构造器
    Java 深复制和浅复制
  • 原文地址:https://www.cnblogs.com/pengfei25/p/9020981.html
Copyright © 2011-2022 走看看