echarts中如何设置多级x轴？

Question

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

对于 10-15 天的范围，我只需通过 xAxis.data 绘制它们即可。但是，当我的范围更大时，比如 2-3 个月，日期就会堆积起来，或者因为空间太多而挤满了。在网上查看了一些想法后，我正在考虑将它们格式化如下（日期按月分组，并以 8-10 天的统一间隔分隔）：

2 12 22 2 12 22 2 12 22
     十二月 一月 二月

我知道xAxis.axisLabel.formatter但当我想要格式化单个条目而不是我想要的格式时，这似乎很有帮助。echarts 中是否可以有一个多级 x 轴，其中顶部是各个条目，底部行基本上代表它们的组？

希望这是有道理的。

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;
        }
      }
    }
  ]

分组类别轴