在Echarts的barChart中，xAxis的标签如何不重叠显示？

在 Echarts 的 barChart 中，xAxis 标签重叠可以通过以下方式进行解决：

1. 使用轴名称：在 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]
  }]
}

2. 旋转标签：在 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]
  }]
}

3. 自适应调整：在 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]
  }]
}