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

问题现象

在使用 Ant Design Charts 绘制面积图时，当开发者手动设置 Y 轴的最小值（非零值）时，会出现面积图区域遮盖 X 轴的现象。这种情况通常发生在设置了 scale.y.domain 属性后，即使数据中的最小值已经大于或等于设置的 domain 最小值。

技术背景

面积图（Area Chart）是一种特殊的折线图，它通过填充折线与坐标轴之间的区域来强调数量随时间变化的程度。在 Ant Design Charts 中，面积图的实现基于 G2 绘图引擎，其视觉表现受到数据范围和坐标轴设置的共同影响。

问题原因分析

1. 坐标轴与图形渲染顺序：面积图的填充区域是基于数据点和坐标轴基线绘制的。当设置 Y 轴最小值时，系统会以该最小值为基线进行填充，如果这个值不为零，就会导致填充区域向下延伸到坐标轴下方。

2. domain 设置的影响：scale.y.domain 属性强制设定了坐标轴的显示范围，这会导致图表忽略数据的自然分布，严格按照设定的范围渲染图形。

3. 视觉层叠问题：面积图的填充区域默认会覆盖在坐标轴之上，当填充区域延伸到坐标轴位置时，就会出现遮盖现象。

解决方案

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

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

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

方案二：调整图形样式

如果必须设置特定范围，可以通过调整样式避免遮盖：

style: {
  fill: 'linear-gradient(-90deg, white 0%, darkgreen 100%)',
  // 添加半透明效果
  fillOpacity: 0.7
}

方案三：使用折线图+区域填充

对于需要从特定基线开始的渐变效果，可以组合使用折线图和区域填充：

{
  type: 'line',
  // 其他配置...
  area: {
    style: {
      fill: 'linear-gradient(-90deg, white 0%, darkgreen 100%)',
    }
  }
}

最佳实践建议

1. 除非有特殊需求，否则建议让图表自动计算坐标轴范围，这能保证最佳的视觉呈现。

2. 当需要强调变化幅度而非绝对值时，可以考虑使用相对百分比而非绝对值。

3. 对于需要精确控制坐标轴范围的情况，建议同时考虑添加适当的边距或调整图形透明度，以避免视觉冲突。

4. 渐变填充效果可以通过调整色标位置来优化，确保在设定的基线位置有适当的过渡。

通过理解这些原理和解决方案，开发者可以更灵活地使用 Ant Design Charts 创建符合需求的可视化图表。