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

1、将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)"
			}
		}
	}],

3、X轴单字换行显示

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

4、用省略号展示，悬浮移上去展示全部https://www.cnblogs.com/xisuo/p/9040622.html

 formatter: function(value) {
            	return (value.length > 5 ? (value.slice(0,5)+"...") : value )
            },

 

funtion extension(mychart) {
　　　　　　　　　　　//判断是否创建过div框,如果创建过就不再创建了
					var id = document.getElementById("extension");
					if(!id) {
						var div = "<div id = 'extension' sytle=\"display:none\"></div>"
						$('html').append(div);
					}

					mychart.on('mouseover', function(params) {
						if(params.componentType == "xAxis") {
							$('#extension').css({
								"position": "absolute",
								"color": "#333",
								"background:":"#fff",
								"font-size": "12px",
								"padding": "5px",
								"display": "inline",
						        "border":"1px solid #333",
								"z-index":"100"
							}).text(params.value);

							$("html").mousemove(function(event) {
								var xx = event.pageX - 30;
								var yy = event.pageY + 20;
								$('#extension').css('top', yy).css('left', xx);
							});
						}
					});

					mychart.on('mouseout', function(params) {
						if(params.componentType == "xAxis") {
							$('#extension').css('display', 'none');
						}
					});
				}