Ant Design Charts 面积图 Y 轴最小值设置问题解析

问题现象

在使用 Ant Design Charts 的面积图组件时，当开发者手动设置 Y 轴的最小值（domainMin）不为 0 时，会出现面积图的底部区域遮盖 X 轴的情况。这种视觉问题会影响图表的可读性和美观性。

问题原因分析

1. 面积图绘制原理：面积图本质上是在折线图的基础上，从数据点向下填充到某个基准线形成的区域。在默认情况下，这个基准线是 Y 轴的 0 值位置。

2. domain 设置影响：当开发者通过 scale.y.domain 显式设置 Y 轴范围时，图表会严格按照这个范围绘制，而不会自动调整基准线位置。如果设置的最小值（如 100）高于数据中的最小值，就会导致填充区域从 100 开始向下延伸，从而遮盖 X 轴。

3. 视觉设计原则：从数据可视化的角度，面积图通常建议从 0 开始，这样能准确反映数据的相对比例关系。非 0 基准可能会误导数据解读。

解决方案

方案一：保持默认自动缩放

移除手动设置的 domain 配置，让图表自动计算合适的 Y 轴范围：

scale: {
  y: {
    type: 'linear',
    // 不设置 domain，让图表自动计算
    tickMethod: () => [100, 300, 750]
  }
}

方案二：使用折线图+渐变填充

如果需要非 0 基准的渐变效果，可以使用折线图配合区域填充：

{
  type: 'line',
  style: {
    fill: 'linear-gradient(-90deg, white 0%, darkgreen 100%)',
    fillOpacity: 0.6,
    stroke: 'darkgreen'
  }
}

方案三：调整基准线位置

通过计算使基准线与 Y 轴最小值对齐：

scale: {
  y: {
    type: 'linear',
    domain: [100, 750],
    tickMethod: () => [100, 300, 750]
  }
},
style: {
  fill: ({ y }) => y >= 100 ? 'url(#gradient)' : 'transparent'
}

最佳实践建议

1. 对于面积图，尽量保持 Y 轴从 0 开始，这是数据可视化的一致建议。

2. 如果需要强调数据变化而非绝对数值，考虑使用折线图。

3. 当必须使用非 0 基准的面积图时，确保添加清晰的视觉提示（如基准线标注），避免误导读者。

4. 对于渐变效果，可以通过自定义渐变定义和填充规则来实现更精细的控制。

通过理解这些原理和解决方案，开发者可以更灵活地使用 Ant Design Charts 创建既美观又准确的数据可视化图表。