如何在echarts中设置多级x轴？

Question

我正在构建一个以日期为x轴的图表，我们使用百度echarts来构建它们。

在10-15天的范围内，我只需通过xAxis.data绘制它们，它就能正常工作。但是当我有一个更大的范围时，比如2-3个月，日期会堆叠在一起，或者太挤了，因为有很多日期。在看了网上的一些想法后，我想把它们组织成如下形式(这些天是按月份分组的，并以8-10天的均匀间隔分开)：

2    12    22    2    12    22    2    12    22
     Dec               Jan             Feb

我知道xAxis.axisLabel.formatter但当我想要格式化单个条目时，这似乎是有帮助的，而不是我想要的。在echarts中，有没有可能有一个多级x轴，其中top是单个条目，而最下面的一行基本上代表了它们的组？

希望这是有意义的。

Answer 1

下面是一个例子：https://gallery.echartsjs.com/editor.html?c=xBk7TY_hWx

一般来说，您需要在xAxis(或yAxis在本例中)和另一个系列，如：

{
    type: 'bar',
    data:['-', '-', '-', '-', '-'],
    yAxisIndex: 2
}

Answer 2

对于分组类别轴的更一般的实现，希望这个例子能对你有所帮助。

https://jsfiddle.net/borguenon/kyj2pxhz/13/

xAxis: [
    {
        position: "bottom",
        data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
    },
    {
        position: "bottom",
        data: ["group1", "", "", "group2", "", ""],
      interval: 1,
      axisLine: {
        show: false
      },
      axisTick: {
        alignWithLabel: false,
        length: 40,
        align: "left",
        interval: function(index, value) {
          return value ? true : false;
        }
      },
      axisLabel: {
        margin: 30
      },
      splitLine: {
        show: true,
        interval: function(index, value) {
          return value ? true : false;
        }
      }
    }
  ]

分组类别轴