在 Echarts 的 barChart 中,xAxis 标签重叠可以通过以下方式进行解决:
- 使用轴名称:在 xAxis 中通过设置 name 属性来添加轴名称,在 axisLabel 中设置 interval 属性来控制标签显示的间隔。这样可以将部分标签隐藏,让轴名称更显眼。
option = {
xAxis: {
type: 'category',
data: ['标签1', '标签2', '标签3', '标签4', '标签5', '标签6'],
name: 'X 轴名称',
axisLabel: {
interval: 0, // 不隐藏标签(缩写也可以)
formatter: function (value) {
return value.split("").join("\n"); // 换行显示
}
}
},
series: [{
name: '数据',
type: 'bar',
data: [10, 20, 30, 40, 50, 60]
}]
}
- 旋转标签:在 xAxis 中通过设置 axisLabel 的 rotate 属性来控制标签旋转的角度。一定角度以内的标签可以直接显示,超过一定角度的标签可以旋转一定角度来显示,从而减少标签重叠。
option = {
xAxis: {
type: 'category',
data: ['标签1', '标签2', '标签3', '标签4', '标签5', '标签6'],
axisLabel: {
rotate: 45 // 旋转角度
}
},
series: [{
name: '数据',
type: 'bar',
data: [10, 20, 30, 40, 50, 60]
}]
}
- 自适应调整:在 xAxis 中通过设置 boundaryGap 属性为 false 来让标签不限制在坐标轴上,自适应调整显示位置。
option = {
xAxis: {
type: 'category',
data: ['标签1', '标签2', '标签3', '标签4', '标签5', '标签6'],
boundaryGap: false // 标签不限制在坐标轴上
},
series: [{
name: '数据',
type: 'bar',
data: [10, 20, 30, 40, 50, 60]
}]
}