使用Echarts时，X轴文本太长的解决方案

谁践踏了优雅 2022-09-04 10:59 254阅读 0赞

在使用 Echarts 展示各种可视化数据的时候，经常会遇到 X 轴数据过多或者每一个刻度名称太长而导致的 X 轴混乱的问题。

其实 Echarts 默认的配置是 X 轴刻度太多时回默认隐藏一部分，其他的正常显示，如下图：

xAxis: [
            { 
                type: 'category',
                data: ['2021-01-11', '2021-01-12', '2021-01-13', '2021-01-14', '2021-01-15', '2021-01-16', '2021-01-17', '2021-01-18', '2021-01-19', '2021-01-20', '2021-01-21', '2021-01-22']
            }
        ],

![在这里插入图片描述][4d61a61becf3480ead9fc1bf5729f9f8.jpg_pic_left]

如上图所示，data 数据多而且每一项内容也长，这个时候 Echarts 会自动隐藏中级的刻度，鼠标移入的时候在显示出来，从而让整个 X 轴刻度正常展示。

本文所展示和解决的问题是 X 轴刻度多内容长而且需要所有刻度都显示，如下图：  
![在这里插入图片描述][529c6f66e5d746a88f10b907b86d50eb.jpg_pic_left]  
**解决方法又很多种：**

> 1、刻度内容倾斜  
> 2、刻度内容垂直展示  
> 3、刻度内容换行  
> 4、刻度间隔换行

##### 方法一：刻度内容倾斜 #####

修改 xAxis.axisLabel 的属性

xAxis:[{ 
    	axisLabel:{ 
    		interval:0, //控制X轴刻度全部显示
    		rotate:45 //倾斜角度
    	}
    }]

效果如下图：![在这里插入图片描述][e484213dcf2f4a768b00f104472de192.jpg_pic_left]  
由于倾斜之后会需要占用很多 Echarts 下面的空间，所以建议对表格下边距进行调整，xAxis 同级添加 grid 配置。

grid:{ //直角坐标系内绘图网格
        show:true,//是否显示直角坐标系网格。[ default: false ]
        left:"20%",//grid 组件离容器左侧的距离。
        right:"30px",
        borderColor:"#c45455",//网格的边框颜色
        bottom:"20%" //
    },

##### 方法二、刻度内容垂直展示 #####

需要调节 axisLabel 对象里面的 formatter 方法，给文字直接添加换行符 \\n

axisLabel: {   
        interval: 0,  
        formatter:function(value){  
            return value.split("").join("\n");  
        }  
    }

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5OTE4MA_size_16_color_FFFFFF_t_70_pic_left]

##### 方法三、刻度内容换行 #####

跟方法二差不多，让刻度内容在特定长度拼接 \\n 让其换行

axisLabel: {   
        interval: 0,  
        formatter:function(value){  
            let len = value.length;
            let length = 4; //控制一行显示个数
            let num = Math.ceil(len/length);//循环次数
            if(num > 1){ 
            	let str = '';
            	for(let i = 0;i<num;i++){ 
            		str += value.substring(i*length,(i+1)*length) + '\n';
            	}
            	return str;
            }else{ 
    			return value;
    		} 
        }  
    }

效果如下：  
![在这里插入图片描述][e05357d7f8184b6d81c663768d70a88b.jpg_pic_left]  
先根据内容长度和限制长度获取循环次数，然后提取出需要换行的内容拼接上 ‘\\n’。

##### 方法四、刻度间隔换行 #####

配合 index 参数使用，index为偶数的刻度拼接 \\n\\n 让刻度换行

axisLabel: {   
        interval: 0,  
        formatter:function(value,index){  
        	if(index % 2 != 0){ 
    			return '\n\n' + value;
    		}else{ 
    			return value;
    		}
        }  
    }

效果如下：  
![在这里插入图片描述][a3c1b385532e4f72a44d78313475dd25.jpg_pic_left]

[4d61a61becf3480ead9fc1bf5729f9f8.jpg_pic_left]: /images/20220829/89129deea9fc4398b6b8237c803a9c0f.png
[529c6f66e5d746a88f10b907b86d50eb.jpg_pic_left]: /images/20220829/302a234daa444bcf9bb0ee989d040a12.png
[e484213dcf2f4a768b00f104472de192.jpg_pic_left]: /images/20220829/1f14f982de0c4ae6b481741ca6e913aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5OTE4MA_size_16_color_FFFFFF_t_70_pic_left]: /images/20220829/4f9a5798b1de49859270b1f080cd1475.png
[e05357d7f8184b6d81c663768d70a88b.jpg_pic_left]: /images/20220829/3e17c1e5a509492e84831ff211dcf33d.png
[a3c1b385532e4f72a44d78313475dd25.jpg_pic_left]: /images/20220829/51e46b543db74e9d89628df40e23c110.png