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;  
                } 
            }
        }
    },