百度echarts X轴内容太长的四种解决方案

1、xAxis，axisLabel中倾斜45%

复制代码xAxis: {
	nameLocation:'end',//坐标轴名称显示位置
	axisLabel : {//坐标轴刻度标签的相关设置
		interval:0,
		rotate:"45"
	}
}
1
2
3
4
5
6
7

2、换行显示（限制每行显示的字数）

复制代码axisLabel : {
	formatter : function(params){
	   var newParamsName = "";// 最终拼接成的字符串
		var paramsNameNumber = params.length;// 实际标签的个数
		var provideNumber = 4;// 每行能显示的字的个数
		var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
		// 条件等同于rowNumber>1
		if (paramsNameNumber > provideNumber) {
			/** 循环每一行,p表示行 */
			for (var p = 0; p < rowNumber; p++) {
				var tempStr = "";// 表示每一次截取的字符串
				var start = p * provideNumber;// 开始截取的位置
				var end = start + provideNumber;// 结束截取的位置
				// 此处特殊处理最后一行的索引值
				if (p == rowNumber - 1) {
					// 最后一次不换行
					tempStr = params.substring(start, paramsNameNumber);
				} else {
					// 每一次拼接字符串并换行
					tempStr = params.substring(start, end) + "\n";
				}
				newParamsName += tempStr;// 最终拼成的字符串
			}

		} else {
			// 将旧标签的值赋给新标签
			newParamsName = params;
		}
		return newParamsName
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

3、文字竖直显示（不推荐）

复制代码axisLabel: {  
   interval: 0,  
   formatter:function(value)  
   {  
	   return value.split("").join("\n");  
   }  
} 
1
2
3
4
5
6
7

4、隔一个换行（可以试一下）

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

}
1
2
3
4
5
6
7
8
9
10
11
12