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轴，其中顶部是单个条目，底部行基本上代表了它们的组？

希望有道理。

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轴？

2 个答案: