React - Rechart -如何在合成图表(Rechart.js)中填充区域的底部？

import React from 'react';
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

const data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 15 },
  { name: 'D', value: 25 },
];

const Chart = () => {
  return (
    <AreaChart width={400} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Area type="monotone" dataKey="value" fill="#8884d8" fillOpacity={0.3} />
    </AreaChart>
  );
};

export default Chart;