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

在使用 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']
        }
    ],

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

本文所展示和解决的问题是 X 轴刻度多内容长而且需要所有刻度都显示，如下图：

解决方法又很多种：

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

方法一：刻度内容倾斜

修改 xAxis.axisLabel 的属性

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

效果如下图：
由于倾斜之后会需要占用很多 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");  
    }  
} 

效果如下：

方法三、刻度内容换行

跟方法二差不多，让刻度内容在特定长度拼接 \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;
		} 
    }  
} 

效果如下：

先根据内容长度和限制长度获取循环次数，然后提取出需要换行的内容拼接上 ‘\n’。

方法四、刻度间隔换行

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

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

效果如下：