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

1、xAxis,axisLabel中倾斜45%


xAxis: {
	nameLocation:'end',//坐标轴名称显示位置
	axisLabel : {//坐标轴刻度标签的相关设置
		interval:0,
		rotate:"45"
	}
}

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
	}
}

3、文字竖直显示(不推荐)


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

4、隔一个换行(可以试一下)


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

}
以上是编程学习网小编为您介绍的“百度echarts X轴内容太长的四种解决方案”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。

本文标题为:百度echarts X轴内容太长的四种解决方案

基础教程推荐