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

  • 相关阅读:
    Pandas包对多个数据表(DataFrame)的常用整合功能。
    pandas numpy 简单应用 loandata
    榛果 美团 登录 爬虫 requests session
    python 日期循环
    opencv 验证码 识别
    运行MapReduce任务
    CenOS安装MySQL服务
    leetcode 67. 二进制求和
    最近对一些领域比较感兴趣,这里列举出来供以后查阅
    leet code 1014. 最佳观光组合
  • 原文地址:https://www.cnblogs.com/pengfei25/p/9020981.html
Copyright © 2011-2022 走看看