Echarts x轴文本内容太长的几种解决方案

转载自:原文链接

echarts x轴标签文字过多导致显示不全

解决办法 1. xAxis.axisLabel 属性

axisLabel: {  
    interval:0,      //坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
    rotate:-20    //标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
  }

如果x轴的文字如果太长会受到遮挡，这个时候可以用grid属性解决。
设置grid属性定义图的大小来释放空间，使得axislabel有足够的空间

grid: {
        x: 40,  //左
        y: 40,  //上
        x2: 40, //右
        y2: 50  //下
    },
    xAxis: {
        data: ['衬衫', "羊毛衫", "雪纺衫文字加长", "裤子文字加长", "高跟鞋文字加长", "袜子", "棉服", "毛呢外套"],
        axisLabel: {
            interval: 0,
            rotate: -20
        }
    },

解决方法 2. 调用formatter文字竖直显示

当文字不是特别长的情况下可设置文字自动换行，调用formatter回调函数实现。

xAxis: {
        data: ['衬衫', "羊毛衫", "雪纺衫文字加长", "裤子文字加长", "高跟鞋文字加长", "袜子", "棉服", "毛呢外套"],
        axisLabel: {
            interval: 0,
            formatter:function(value){  
               return value.split("").join("\n");  
            }
        }
    },

试一下两个字换行。如下：

xAxis: {
        data: ['衬衫', "羊毛衫", "雪纺衫文字加长", "裤子文字加长", "高跟鞋文字加长", "袜子", "棉服", "毛呢外套"],
        axisLabel: {
            interval: 0,
            formatter:function(value){  
                var str = ""; 
                var num = 2; //每行显示字数 
                var valLength = value.length; //该项x轴字数  
                var rowNum = Math.ceil(valLength / num); // 行数  
                
                if(rowNum > 1) {
                    for(var i = 0; i < rowNum; i++) {
                        var temp = "";
                        var start = i * num;
                        var end = start + num;
                        
                        temp = value.substring(start, end) + "\n";
                        str += temp; 
                    }
                    return str;
                } else {
                    return value;
                } 
            }
        }
    },

解决办法 3. X轴类目项隔一个换行(使用formatter中index参数)

 xAxis: {
        data: ['衬衫', "羊毛衫", "雪纺衫文字加长", "裤子文字加长", "高跟鞋文字加长", "袜子", "棉服", "毛呢外套"],
        axisLabel: {
            interval: 0,
            formatter:function(value,index){  
                if (index % 2 != 0) {  
                    return '\n\n' + value;  
                }  
                else {  
                    return value;  
                } 
            }
        }
    },