如何避免ECharts使用time类型轴时自动补全缺失日期

我用ECharts制作基础图表，用于展示不同日期的统计数量。将X轴类型设置为time后，ECharts会自动补全时间区间内的缺失日期，导致出现空日期对应的空白柱形，请问如何避免这种自动补全行为？

原配置代码如下：

{
  dataset: {
    id: 'mydata',
    source: [
      {
        "date": "2022-07-01T00:00:00Z",
        "count": 1
      },
      {
        "date": "2022-05-01T00:00:00Z",
        "count": 15
      },
      {
        "date": "2022-02-01T00:00:00Z",
        "count": 2
      },
      {
        "date": "2022-01-01T00:00:00Z",
        "count": 1
      },
      {
        "date": "2021-12-01T00:00:00Z",
        "count": 1
      },
      {
        "date": "2021-11-01T00:00:00Z",
        "count": 2
      },
      {
        "date": "2021-09-01T00:00:00Z",
        "count": 2
      }
    ]
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    name: 'date',
    type: 'time',
    axisLabel: { formatter: "{MMM} {yyyy}" },
    splitLine: {
      show: false
    }
  },
  yAxis: { name: 'count', type: 'value' },
  series: [
    {
      type: 'bar',
      showBackground: true,
      encode: {
        x: 'date',
        y: 'count '
      }
    }
  ]
}

核心思路是将X轴类型从time改为category，让ECharts仅渲染数据中存在的日期，而非自动补全时间区间。具体修改如下：

• 把xAxis.type的值改为'category'
• 给xAxis添加data属性，手动指定数据中存在的所有日期（或通过代码动态提取）
• 保留原有的axisLabel.formatter控制日期显示格式

修改后的完整配置 #

{
  dataset: {
    id: 'mydata',
    source: [
      {
        "date": "2022-07-01T00:00:00Z",
        "count": 1
      },
      {
        "date": "2022-05-01T00:00:00Z",
        "count": 15
      },
      {
        "date": "2022-02-01T00:00:00Z",
        "count": 2
      },
      {
        "date": "2022-01-01T00:00:00Z",
        "count": 1
      },
      {
        "date": "2021-12-01T00:00:00Z",
        "count": 1
      },
      {
        "date": "2021-11-01T00:00:00Z",
        "count": 2
      },
      {
        "date": "2021-09-01T00:00:00Z",
        "count": 2
      }
    ]
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    name: 'date',
    type: 'category',
    data: [
      "2022-07-01T00:00:00Z",
      "2022-05-01T00:00:00Z",
      "2022-02-01T00:00:00Z",
      "2022-01-01T00:00:00Z",
      "2021-12-01T00:00:00Z",
      "2021-11-01T00:00:00Z",
      "2021-09-01T00:00:00Z"
    ],
    axisLabel: { formatter: "{MMM} {yyyy}" },
    splitLine: {
      show: false
    }
  },
  yAxis: { name: 'count', type: 'value' },
  series: [
    {
      type: 'bar',
      showBackground: true,
      encode: {
        x: 'date',
        y: 'count'
      }
    }
  ]
}

动态提取日期的优化方案 #

如果不想手动维护xAxis.data，可以通过ECharts API动态从dataset中提取日期：

// 假设myChart是你的ECharts实例
const dataset = myChart.getOption().dataset[0].source;
const dateList = dataset.map(item => item.date);
myChart.setOption({
  xAxis: {
    data: dateList
  }
});

内容的提问来源于stack exchange，提问作者Gustavo Sanchez