如何实现Area Chart非求和Y轴域并填充max-min温度区间？

直接用Area组件的base属性就能搞定，不用设置stackId，具体操作如下：

• 不给任何Area加stackId，给代表max的Area指定base为对应数据项的min值，这样填充区域就会从max线延伸到min线，而非默认的0轴
• 如果需要显示min的线条，可以单独加一个不填充的Area或者Line组件

举个实际代码例子：

// 示例温度数据
const tempData = [
  { date: '1/1', min: 2, max: 12 },
  { date: '1/2', min: 4, max: 15 },
  { date: '1/3', min: 3, max: 13 },
  { date: '1/4', min: 5, max: 16 },
];

<AreaChart width={700} height={350} data={tempData}>
  <XAxis dataKey="date" />
  <YAxis />
  {/* 定义渐变填充样式 */}
  <defs>
    <linearGradient id="tempFill" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stopColor="#f97316" stopOpacity={0.7} />
      <stop offset="100%" stopColor="#f97316" stopOpacity={0.3} />
    </linearGradient>
  </defs>
  {/* 核心：填充max到min的区域 */}
  <Area
    type="monotone"
    dataKey="max"
    base={(entry) => entry.min} // 关键：把填充基线设为当前数据项的min值
    stroke="#f97316"
    fill="url(#tempFill)"
  />
  {/* 绘制min的线条（可选） */}
  <Line
    type="monotone"
    dataKey="min"
    stroke="#3b82f6"
    strokeWidth={2}
  />
</AreaChart>

问题根源说明 #

之前的两种操作都有问题的原因：

• 不设stackId时，两个Area都是从0轴填充到各自数值，重叠区域颜色混合（比如红+蓝变紫）
• 设stackId后，Recharts会自动堆叠两个Area的数值计算，导致Y轴刻度变成求和后的数值

用base属性指定填充基线为min值后，填充区域仅存在于max和min之间，既不会和其他区域重叠混色，也不需要堆叠计算，Y轴自然保持原始的单值刻度。

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