如何在 ECharts 中设置轴标签

在 ECharts 中，轴标签（Axis Label）是指 X 轴或 Y 轴上的刻度标签，用于显示轴上的数据值或分类名称。你可以通过配置 xAxis（X 轴）或 yAxis（Y 轴）的 axisLabel 属性来设置轴标签的样式、格式化方式等。

以下是一个基本的例子，展示了如何在 ECharts 中设置 X 轴和 Y 轴的轴标签：

javascript复制代码

	var myChart = echarts.init(document.getElementById('main'));
	var option = {
	xAxis: {
	type: 'category', // 设置为类别轴
	data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // X 轴上的数据
	axisLabel: {
	rotate: 45, // 标签旋转角度
	interval: 0, // 标签的显示间隔，为0时显示所有标签
	formatter: '{value} 周', // 标签格式化函数，'{value}'是标签的默认值
	color: 'red' // 标签文字颜色
	}
	},
	yAxis: {
	type: 'value', // 设置为数值轴
	axisLabel: {
	formatter: '{value} 元', // 同样可以格式化 Y 轴标签
	color: 'blue' // Y 轴标签文字颜色
	}
	},
	series: [{
	data: [120, 200, 150, 80, 70, 110, 130],
	type: 'bar' // 数据类型为柱状图
	}]
	};
	myChart.setOption(option);

在这个例子中，xAxis 的 axisLabel 属性被用来设置 X 轴标签的旋转角度、显示间隔、格式化函数和文字颜色。同样地，yAxis 的 axisLabel 属性也被用来设置 Y 轴标签的格式化函数和文字颜色。

注意：

• rotate 属性用于设置标签的旋转角度，这对于避免标签之间重叠特别有用。
• interval 属性用于设置标签的显示间隔，当轴上的数据点非常多时，可以通过设置 interval 来减少显示的标签数量，避免图表过于拥挤。interval 的值可以是具体的数字（表示每隔几个数据点显示一个标签），也可以是函数（根据数据点位置、值等自定义显示逻辑）。
• formatter 属性是一个回调函数或字符串模板，用于格式化标签的显示内容。在回调函数中，你可以通过参数访问到当前数据点的信息（如值、索引等），并返回自定义的字符串作为标签内容。在字符串模板中，{value} 是一个占位符，代表当前数据点的值。
• color 属性用于设置标签文字的颜色。