Echarts的x轴标签文本长度修改

问题描述

我们在制作图表时，总会遇到下面这种由于x轴标签文本长度过长而导致显示不完整的问题

解决方法

方法一 添加interval

xAxis: {
	type: 'category',
	data: ['开花沼泽1999.05', '像河与海1998.09', '画画的叶子1999.12', '风止意难平2000.01', '关掉星星1998.06'],
	axisLabel: {
	// 标签的显示间隔，0为强制显示全部，n为隔n标签显示一个标签
		interval: 0
	}
}

方法二 竖直显示

找到xAxis.axisLabel， 然后重写他的formatter

xAxis: {
	type: 'category',
	data: ['开花沼泽1999.05', '像河与海1998.09', '画画的叶子1999.12', '风止意难平2000.01', '关掉星星1998.06'],
	axisLabel: {
		interval: 0, 
		formatter: function(value) {
			return value.split('').join('\n');
		}
	}
}

方法三 倾斜显示

找到xAxis.axisLabe，然后添加rotate，并修改值

xAxis: {
	type: 'category',
	data: ['开花沼泽1999.05', '像河与海1998.09', '画画的叶子1999.12', '风止意难平2000.01', '关掉星星1998.06'],
	axisLabel: {
		interval: 0,
		rotate: "50"
	}
}

方法四 隔行显示

找到xAxis.axisLabel， 然后重写他的formatter

xAxis: {
	type: 'category',
	data: ['开花沼泽1999.05', '像河与海1998.09', '画画的叶子1999.12', '风止意难平2000.01', '关掉星星1998.06'],
	axisLabel: {
		interval: 0,
		formatter: function(params, index) {
			if (index % 2 != 0) {
				return '\n' + params
			}
			else {
				return params
			}
		}
	}
}

方法五 换行显示

找到xAxis.axisLabel，然后重写他的formatter

xAxis: {
	type: 'category',
	data: ['开花沼泽1999.05', '像河与海1998.09', '画画的叶子1999.12', '风止意难平2000.01', '关掉星星1998.06'],
	axisLabel: {
		formatter: function(params) {
			var newParamsName = "";
			var paramsNameNumber = params.length;
			// 设置一行显示多少字
			var provideNumber = 6;
			var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
			if (paramsNameNumber > provideNumber) {
				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
		}
	}
}