echarts柱状图如何在顶部和底部各显示x轴数据

可以通过设置 `grid.bottom` 和 `grid.top` 以及 `xAxis.axisLabel` 的 `interval` 来实现在底部和顶部同时显示 x 轴数据。

具体实现步骤如下：

1. 设置 `grid.bottom` 和 `grid.top` 的值，使得图表空间能够容纳下 x 轴的标签。

grid: {
  top: '10%',
  left: '3%',
  right: '4%',
  bottom: '15%', // 可根据实际情况调整
  containLabel: true
},

2. 设置 `xAxis.axisLabel.interval` 的值，控制 x 轴标签的间隔。如果设置为 0，则所有标签都会显示；如果设置为 1，则每隔一个标签显示一个；以此类推。

xAxis: {
  type: 'category',
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  axisLabel: {
    interval: 0, // 显示所有标签
    formatter: function(value) {
      return '{a|' + value + '}\n{b|' + value + '}'; // 使用换行符分隔顶部和底部标签
    },
    rich: { // 设置样式
      a: {
        fontSize: 14,
        color: '#666'
      },
      b: {
        fontSize: 12,
        color: '#999'
      }
    }
  }
},

3. 设置 `axisLabel.rich`，使得顶部和底部的标签可以有不同的样式。

完整代码示例：

option = {
  grid: {
    top: '10%',
    left: '3%',
    right: '4%',
    bottom: '15%', // 可根据实际情况调整
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLabel: {
      interval: 0, // 显示所有标签
      formatter: function(value) {
        return '{a|' + value + '}\n{b|' + value + '}'; // 使用换行符分隔顶部和底部标签
      },
      rich: { // 设置样式
        a: {
          fontSize: 14,
          color: '#666'
        },
        b: {
          fontSize: 12,
          color: '#999'
        }
      }
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar'
  }]
};