关于echarts x轴标签文字过多导致显示不全问题

                             关于echarts x轴标签文字过多导致显示不全问题

 

如图：数据过多，导致 x轴 标签文件显示不全。

解决办法一： 可以通过xAxis.axisLabel 属性将其 x 轴文字倾斜；

axisLabel: {  
     interval:0,  
    rotate:40  
  }

如图：

解决办法二：使用formatter让文字竖直显示

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

如图：

当标签文件显示过多时，我们可以通过双行显示：

axisLabel: {  
	 interval: 0,  
	 formatter:function(value)  
	 {  
		 debugger  
		 var ret = "";//拼接加\n返回的类目项  
		 var maxLength = 2;//每项显示文字个数  
		 var valLength = value.length;//X轴类目项的文字个数  
		 var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
		 if (rowN > 1)//如果类目项的文字大于3,  
		 {  
			 for (var i = 0; i < rowN; i++) {  
				 var temp = "";//每次截取的字符串  
				 var start = i * maxLength;//开始截取的位置  
				 var end = start + maxLength;//结束截取的位置  
				 //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
				 temp = value.substring(start, end) + "\n";  
				 ret += temp; //凭借最终的字符串  
			 }  
			 return ret;  
		 }  
		 else {  
			 return value;  
		 }  
	 }  
 }  

如图：