Apache eCharts - 条形图中的自定义宽度

Question

我正在从 ChartJS 迁移到 apache echarts。

以前，我有这个条形图，其中每年有两个数据集。我们客户的要求是，每当一个值为零时，剩余的条形应该拥有 bin 中的所有空间。

如何用echarts实现这一点？使用自定义数据集是唯一的选择吗？

Answer 1

您可以将数据分为 4 个系列：

1. 仅存在数据集 1 的数据
2. 仅存在数据集 2 的数据
3. 两者都存在时的数据集 1 数据
4. 数据集 2 数据（两者都存在时）

现在，您使用

show: false

定义第二个 xAxis，以便系列 1,2 和系列 3,4 共享一个 xAxis，并利用 barGap 重叠同一轴上的条。

示例：

option = {
  xAxis: [
    {
      type: 'category',
      data: ['2012', '2013', '2014', '2015', '2016']
    },
    {
      type: 'category',
      show: false,
      data: ['2012', '2013', '2014', '2015', '2016']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '1',
      type: 'bar',
      barGap: '-100%',
      data: [120, 0, 0, 0, 0]
    },
    {
      name: '2',
      type: 'bar',
      data: [0, 0, 0, 330, 370]
    },
    {
      name: '1',
      type: 'bar',
      xAxisIndex: 1,
      barGap: 0,
      data: [0, 232, 270, 0, 0]
    },
    {
      name: '2',
      type: 'bar',
      xAxisIndex: 1,
      data: [0, 180, 270, 0, 0]
    }
  ]
}