echarts中如何设置多级x轴？

Question

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

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

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

我知道 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;
        }
      }
    }
  ]

Grouped category axis

echarts中如何设置多级x轴？

How to set multi-level x-axis in echarts?

echarts