echarts的x轴文字展示不全

当x轴文字过长时,可能会出现重叠现象,如图:

echarts的x轴文字展示不全

 

 解决文字过长展示不全的问题,可以有以下解决方式:

方法一:设置x轴文字倾斜一定角度,可防止文字重叠

        xAxis: [
            {
                name: '部门',
                type:'category',
                axisLabel: {
                    interval:0,
                    rotate:40,
                }
            }
        ]

  如此便可避免重叠,效果如图:

echarts的x轴文字展示不全

 

 但这里还有个问题,如果文字还是太长,会显示不全,可以尝试设置echarts图整体向上挪一下:

grid:{
            bottom:140+'px',
        },

效果如图:

echarts的x轴文字展示不全

 

 但整体看不是那么美观,如果像让x轴分多列折叠,可以设置以下属性:

axisLabel: {
                    interval:0,
                    // rotate:40,
                    formatter:function(value){
            
                        var ret = "";  //拼接加\n返回的类目项
                        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) + "\n";
                                ret += temp; //凭借最终的字符串
                            }
                            return ret;
                        }else {
                            return value;
                        }
                    }
                }

  

效果如图:

echarts的x轴文字展示不全

 

上一篇:力扣第三题——无重复字符的最长子串


下一篇:监听文字个数