百度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雷达图radar根据分数点显示每个不同颜色

百度ECharts文档官网介绍

百度echarts柱状图设置不同颜色（每根柱子一种颜色）

百度echarts图表数据为空如何展示"暂无数据"

百度echarts柱状图/折线图x轴显示全部文本（太长自动换行）

标签： axisLabel, xAxis, X轴, 不换行, 百度echarts

上面是“百度echarts X轴内容太长的四种解决方案”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_1474.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！