Antd折线图为何出现多余X轴宽度？如何移除18:30-18:47冗余轴段

要移除18:30之后的多余X轴部分，核心是手动指定X轴的时间范围，不让图表自动扩展超出数据的区间。可以按以下方式修改配置：

• 先从数据res中提取时间边界：

  • 取数据里最早的时间作为X轴起始（可选，不需要限制左边界可忽略）
  • 取数据里最晚的时间（即18:30对应的时间值）作为X轴终点

• 在xAxis配置中添加min和max属性，强制限定X轴的显示范围：

修改后的完整配置代码：

// 从数据中提取最大时间（即最后一条数据的time字段）
const maxTime = res.length > 0 ? res[res.length - 1].time : null;
// 可选：提取最小时间
const minTime = res.length > 0 ? res[0].time : null;

const config = {
    width: window.innerWidth - 100,
    data: res,
    xField: 'time',
    yField: 'value',
    seriesField: 'key',
    yAxis: {
      title: { position: 'center', text: labelText, autoRotate: true },
      grid: {
        line: {
          style: {
            stroke: '#ddd',
          },
        },
      },
    },
    xAxis: {
      type: 'time',
      mask: 'HH:mm Z',
      // 新增min和max限定X轴范围
      min: minTime,
      max: maxTime,
      label: {
        formatter: (value) => {
          if (timezone === 'utc') {
            return moment(value, 'HH:mm ZZ').utc().format('HH:mm Z');
          }
          return moment(value, 'HH:mm').format('HH:mm Z');
        },
      },
      grid: {
        line: {
          style: {
            stroke: '#ddd',
          },
        },
      },
    },
    tooltip: {
      customItems: (originalItems) => {
        return originalItems.sort(function (a, b) {
          return b.value - a.value;
        });
      },
    },
  };

配置完成后，图表X轴会严格匹配数据实际覆盖的时间区间，不会再出现多余的空白部分。

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