揭秘ECharts巧妙居中多个柱状图，轻松驾驭Null值处理

2023-10-31 01:17:50

在 ECharts 中打造完美的柱状图：居中对齐和优雅处理 Null 值

ECharts 是一款强大的数据可视化库，它以丰富的图表类型和灵活的自定义功能而著称。绘制柱状图时，常常会遇到两个棘手的问题：如何将多个柱状图居中对齐？如何优雅地处理 Null 值？本文将深入探索 ECharts 的奥秘，为你揭示这些难题的巧妙解决方案。

居中对齐多个柱状图

坐标轴对齐

ECharts 中的柱状图可以通过设置坐标轴的 align 属性实现居中对齐。此属性支持 left、center 和 right 三个值，分别对应于柱状图的左对齐、居中对齐和右对齐。

要居中对齐多个柱状图，只需将所有柱状图的坐标轴 align 属性设置为 center 即可。代码示例如下：

option = {
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C'],
    align: 'center'
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'bar',
    data: [1, 2, 3]
  }, {
    type: 'bar',
    data: [4, 5, 6]
  }]
};

间距调整

居中对齐后，柱状图之间可能存在间隙，影响美观度。为了消除间隙，需要调整柱状图的 barGap 属性。此属性指定柱状图之间的间距，取值范围为 0 到 1，其中 0 表示无间距，1 表示柱状图完全重叠。

在实际应用中，可以通过微调 barGap 属性来找到合适的间距值。例如，以下代码设置柱状图之间的间距为 0.2：

option = {
  ...
  series: [{
    type: 'bar',
    data: [1, 2, 3],
    barGap: 0.2
  }, {
    type: 'bar',
    data: [4, 5, 6],
    barGap: 0.2
  }]
};

Null 值处理

实际数据中经常会出现 Null 值。为了避免 Null 值导致图表显示异常，ECharts 提供了多种 Null 值处理策略。

忽略 Null 值

最简单的方法是忽略 Null 值。ECharts 提供了 axisPointer.type: 'shadow' 属性，可以忽略提示框中 x 轴坐标为空的情况。

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'bar',
    data: [1, null, 3]
  }, {
    type: 'bar',
    data: [4, 5, null]
  }]
};

填充缺失值

如果 Null 值不能忽略，则需要填充缺失值。ECharts 提供了 series.data.replaceNull 属性，可以指定用什么值填充 Null 值。

option = {
  ...
  series: [{
    type: 'bar',
    data: [1, null, 3],
    replaceNull: 0
  }, {
    type: 'bar',
    data: [4, 5, null],
    replaceNull: 0
  }]
};

显示为缺口

对于时间序列数据，Null 值通常表示缺失值，此时可以将其显示为缺口。ECharts 提供了 series.step: 'start' 属性，可以将 Null 值显示为缺口。

option = {
  ...
  series: [{
    type: 'bar',
    data: [1, null, 3],
    step: 'start'
  }, {
    type: 'bar',
    data: [4, 5, null],
    step: 'start'
  }]
};