1. 先上全部

import React from 'react';
import { Area } from '@ant-design/charts';

interface Props {
  data: any[];
}

const RangeAreaChart: React.FC<Props> = (props) => {
  const { data } = props;

  const config = {
    data,
    xField: (d) => new Date(d.timestamp * 1000),
    yField: ['low', 'high'], // 指定多個Y軸字段
    style: {
      fillOpacity: 0.3,
      fill: '#64b5f6',
    },
    line: {
      yField: 'value',
      style: {
        stroke: '#FF6B3B',
      },
    },
  };

  return <Area {...config} />;
};

export default RangeAreaChart;

2. data的格式：data為數組

const data = [
    { timestamp: 1704067200, value: 3, low: 1, high: 5 },
    { timestamp: 1706745600, value: 4, low: 2, high: 6 },
    { timestamp: 1709164800, value: 3.5, low: 1.5, high: 5.5 },
    { timestamp: 1711843200, value: 5, low: 3, high: 7 },
    { timestamp: 1714435200, value: 4.9, low: 2.9, high: 6.9 },
    { timestamp: 1717113600, value: 6, low: 4, high: 8 },
    { timestamp: 1719705600, value: 7, low: 5, high: 9 },
    { timestamp: 1722384000, value: 9, low: 7, high: 11 },
    { timestamp: 1725062400, value: 13, low: 11, high: 15 },
    { timestamp: 1727654400, value: 15, low: 13, high: 17 },
    { timestamp: 1730332800, value: 17, low: 15, high: 19 },
    { timestamp: 1733011200, value: 19, low: 17, high: 21 },
  ];

3. line用于添加額外的折線圖。可以用此方法在區間曲線面積圖上疊加更多的圖表

    line: {
      yField: 'value',
      style: {
        stroke: '#FF6B3B',
      },