解决echartsX轴坐标文字过长的几种方法

1. 将X轴坐标斜着展示

效果图

话不多说，贴上X轴代码

xAxis: [{
		type: 'category',
		data: [],
		axisTick: {
			alignWithLabel: true
		},
		axisLabel: {    //重点在这一块，其余可以忽略
			interval: 0,   //这个一定要有，别忘记了
			rotate: 15,
			textStyle: {
				color: '#000',
				fontSize: 10
			}
		},
		axisLine: {
			show: true,
			interval: 0,
			lineStyle: {
				color: "RGB(210,221,217)"
			}
		}
	}],

2. 将X轴坐标换行展示

不知道什么意思的，请看图

直接贴代码啦

xAxis: [{
		type: 'category',
		data: [],
		axisTick: {
			alignWithLabel: true
		},
		axisLabel: {  /*****重点还是在这里哦**///
			textStyle: {
				color: '#7c8893',
				fontSize: 12
			},
			interval: 0,  
			formatter: function(params) {
				var newParamsName = ""; // 最终拼接成的字符串
				var paramsNameNumber = params.length; // 实际标签的个数
				var provideNumber = 6; // 每行能显示的字的个数
				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
			}
		},
		splitLine: {
			show: true,
			lineStyle: {
				type: 'dashed'
			}
		},
		triggerEvent: true,
		axisLine: {
			show: true,
			interval: 0,
			lineStyle: {
				color: "RGB(210,221,217)"
			}
		}
	}],

axisLabel.formatter这一块函数这里，是不是可以复用性很高啊

3.X轴单字换行显示（这个比较少见），但是，我还是遇到了。
看图！

那就贴代码吧，这次我就直接贴axisLabel的了，大家都懂的，不懂得就看看上面怎么写的，好吧！！

axisLabel: {
			interval:0,
			textStyle: {
				color: '#7c8893',
				fontSize: 12
			},
			formatter: function(value) {
				return value.split("").join("\n");
			}
		},

这个和第二种的意思是差不多哈