如何在 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属性用于设置标签文字的颜色。