ProComponents
  • English

      • StatisticCard - Indicator Card

      The Indicator Card combines statistical values to display the core indicators of a certain topic. It integrates with Ant Design Charts to enrich the numerical content and meet the requirements of most data display scenarios.

      Note: All chart examples in the demo can be found on the official website of charts. Here, only images are used instead of actual code examples, so there is no related interaction.

      If the content of the card is expanded, please set the content width to 100% or set a fixed width.

      When to use

        1. Display important information in important positions within a page;
        1. Display system functions on overview pages.

      Code Demo

      Basic Usage

      Use the statistic and chart properties to configure the numerical statistics and chart to create a basic indicator card.

      Department One
      ¥1,102,893
      Actual Completion
      82.3%
      Current Target
      ¥6000
      chart

      StatisticCard Props 说明：

      • title: 卡片标题，可以是字符串或 React 节点
      • extra: 卡片右上角操作区域，可以是字符串或 React 节点
      • statistic: 统计信息配置对象
      • chart: 图表区域，可以是图片或图表组件
      • style: 卡片样式对象

      Statistic 配置对象属性：

      • value: 统计数值，可以是数字或字符串
      • prefix: 数值前缀，如货币符号 '¥'
      • suffix: 数值后缀，如单位 '%'
      • description: 统计描述，可以是字符串或 React 节点
      • precision: 数值精度，控制小数位数

      Statistic 子组件 Props：

      • title: 统计项标题
      • value: 统计项数值
      • prefix: 统计项前缀
      • suffix: 统计项后缀

      Chart 区域说明：

      • 图片图表: 使用 img 标签显示静态图表
      • 动态图表: 可以集成 ECharts、AntV 等图表库
      • 响应式: 图表会自动适配容器宽度

      使用场景：

      • 数据展示: 展示关键业务指标和统计数据
      • 仪表盘: 构建数据仪表盘和监控面板
      • 报表: 生成各类统计报表
      import { EllipsisOutlined, RightOutlined } from '@ant-design/icons';
import { StatisticCard } from '@ant-design/pro-components';
import { Space, theme } from 'antd';

const { Statistic } = StatisticCard;

const Demo = () => {
  const { token } = theme.useToken();
  return (
    <>
      <StatisticCard
        title={
          <Space>
            <span>Department One</span>
            <RightOutlined style={{ color: token.colorTextHeading }} />
          </Space>
        }
        extra={<EllipsisOutlined />}
        statistic={{
          value: 1102893,
          prefix: '¥',
          description: (
            <Space>
              <Statistic title="Actual Completion" value="82.3%" />
              <Statistic title="Current Target" value="¥6000" />
            </Space>
          ),
        }}
        chart={
          <>
            <img
              src="https://gw.alipayobjects.com/zos/alicdn/BA_R9SIAV/charts.svg"
              alt="chart"
              width="100%"
            />
          </>
        }
        style={{ width: 268 }}
      />

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>StatisticCard Props 说明：</h4>
        <ul>
          <li>
            <strong>title</strong>: 卡片标题，可以是字符串或 React 节点
          </li>
          <li>
            <strong>extra</strong>: 卡片右上角操作区域，可以是字符串或 React
            节点
          </li>
          <li>
            <strong>statistic</strong>: 统计信息配置对象
          </li>
          <li>
            <strong>chart</strong>: 图表区域，可以是图片或图表组件
          </li>
          <li>
            <strong>style</strong>: 卡片样式对象
          </li>
        </ul>
        <h4>Statistic 配置对象属性：</h4>
        <ul>
          <li>
            <strong>value</strong>: 统计数值，可以是数字或字符串
          </li>
          <li>
            <strong>prefix</strong>: 数值前缀，如货币符号 '¥'
          </li>
          <li>
            <strong>suffix</strong>: 数值后缀，如单位 '%'
          </li>
          <li>
            <strong>description</strong>: 统计描述，可以是字符串或 React 节点
          </li>
          <li>
            <strong>precision</strong>: 数值精度，控制小数位数
          </li>
        </ul>
        <h4>Statistic 子组件 Props：</h4>
        <ul>
          <li>
            <strong>title</strong>: 统计项标题
          </li>
          <li>
            <strong>value</strong>: 统计项数值
          </li>
          <li>
            <strong>prefix</strong>: 统计项前缀
          </li>
          <li>
            <strong>suffix</strong>: 统计项后缀
          </li>
        </ul>
        <h4>Chart 区域说明：</h4>
        <ul>
          <li>
            <strong>图片图表</strong>: 使用 img 标签显示静态图表
          </li>
          <li>
            <strong>动态图表</strong>: 可以集成 ECharts、AntV 等图表库
          </li>
          <li>
            <strong>响应式</strong>: 图表会自动适配容器宽度
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>数据展示</strong>: 展示关键业务指标和统计数据
          </li>
          <li>
            <strong>仪表盘</strong>: 构建数据仪表盘和监控面板
          </li>
          <li>
            <strong>报表</strong>: 生成各类统计报表
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

      Chart Only

      When the chart is displayed alone in the card.

      Market Trend
      Bar Chart

      StatisticCard Chart Props 说明：

      • title: 卡片标题
      • tooltip: 提示信息，鼠标悬停时显示
      • style: 卡片样式对象
      • extra: 卡片右上角操作区域
      • chart: 图表区域，可以是图片或图表组件

      Chart 属性说明：

      • 图片图表: 使用 img 标签显示静态图表
      • 动态图表: 可以集成 ECharts、AntV 等图表库
      • 响应式: 图表会自动适配容器宽度

      Img 标签属性：

      • src: 图片源地址
      • alt: 图片替代文本，用于无障碍访问
      • width: 图片宽度，'100%' 表示占满容器宽度

      图表类型支持：

      • 静态图片: SVG、PNG、JPG 等格式的图表图片
      • ECharts: 可以集成 ECharts 动态图表
      • AntV: 可以集成 AntV 图表库
      • 自定义组件: 可以传入自定义的图表组件

      使用场景：

      • 数据可视化: 展示各类统计图表
      • 趋势分析: 展示数据趋势和变化
      • 对比分析: 展示数据对比和分布
      import { EllipsisOutlined } from '@ant-design/icons';
import { StatisticCard } from '@ant-design/pro-components';

const Demo = () => {
  return (
    <>
      <StatisticCard
        title="Market Trend"
        tooltip="Market Description"
        style={{ maxWidth: 480 }}
        extra={<EllipsisOutlined />}
        chart={
          <img
            src="https://gw.alipayobjects.com/zos/alicdn/a-LN9RTYq/zhuzhuangtu.svg"
            alt="Bar Chart"
            width="100%"
          />
        }
      />

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>StatisticCard Chart Props 说明：</h4>
        <ul>
          <li>
            <strong>title</strong>: 卡片标题
          </li>
          <li>
            <strong>tooltip</strong>: 提示信息，鼠标悬停时显示
          </li>
          <li>
            <strong>style</strong>: 卡片样式对象
          </li>
          <li>
            <strong>extra</strong>: 卡片右上角操作区域
          </li>
          <li>
            <strong>chart</strong>: 图表区域，可以是图片或图表组件
          </li>
        </ul>
        <h4>Chart 属性说明：</h4>
        <ul>
          <li>
            <strong>图片图表</strong>: 使用 img 标签显示静态图表
          </li>
          <li>
            <strong>动态图表</strong>: 可以集成 ECharts、AntV 等图表库
          </li>
          <li>
            <strong>响应式</strong>: 图表会自动适配容器宽度
          </li>
        </ul>
        <h4>Img 标签属性：</h4>
        <ul>
          <li>
            <strong>src</strong>: 图片源地址
          </li>
          <li>
            <strong>alt</strong>: 图片替代文本，用于无障碍访问
          </li>
          <li>
            <strong>width</strong>: 图片宽度，'100%' 表示占满容器宽度
          </li>
        </ul>
        <h4>图表类型支持：</h4>
        <ul>
          <li>
            <strong>静态图片</strong>: SVG、PNG、JPG 等格式的图表图片
          </li>
          <li>
            <strong>ECharts</strong>: 可以集成 ECharts 动态图表
          </li>
          <li>
            <strong>AntV</strong>: 可以集成 AntV 图表库
          </li>
          <li>
            <strong>自定义组件</strong>: 可以传入自定义的图表组件
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>数据可视化</strong>: 展示各类统计图表
          </li>
          <li>
            <strong>趋势分析</strong>: 展示数据趋势和变化
          </li>
          <li>
            <strong>对比分析</strong>: 展示数据对比和分布
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

      Extra Indicators

      • The footer property is used to set the area for displaying additional indicators.
      • You can set the layout property of the Statistic component to horizontal to display the indicators horizontally.

      Total Score/Primary and Secondary Relationship

      Total Traffic (Visits)
      601,986,875
      Percentage
      Paid Traffic
      3,701,928
      Proportion
      61.5%
      Percentage
      Free Traffic
      1,806,062
      Proportion
      38.5%

      StatisticCard ChartPlacement Props 说明：

      • statistic.title: 统计项标题
      • statistic.value: 统计数值
      • statistic.description: 统计描述，可以是 Statistic 组件
      • chart: 图表区域
      • chartPlacement: 图表位置，'left' 表示左侧，'right' 表示右侧

      ChartPlacement 属性说明：

      • left: 图表显示在左侧，统计信息显示在右侧
      • right: 图表显示在右侧，统计信息显示在左侧
      • 默认值: 不设置时图表默认显示在右侧

      嵌套 Statistic 组件：

      • title: 子统计项标题
      • value: 子统计项数值

      响应式布局特点：

      • 断点控制: 当容器宽度小于 596px 时切换为垂直布局
      • 分割线适配: 根据布局方向自动调整分割线类型
      • 图表适配: 图表会根据容器大小自动调整

      布局效果：

      • 左侧图表: 图表在左侧，统计信息在右侧，适合强调图表
      • 右侧图表: 统计信息在左侧，图表在右侧，适合强调数据
      • 响应式: 在小屏幕上自动调整为垂直布局

      使用场景：

      • 数据对比: 展示不同类别的数据对比
      • 比例展示: 展示各部分占总体的比例
      • 趋势分析: 结合图表展示数据趋势

      最佳实践：

      • 图表选择: 根据数据类型选择合适的图表类型
      • 布局平衡: 合理分配图表和统计信息的空间
      • 视觉层次: 通过布局突出重要的信息
      import { StatisticCard } from '@ant-design/pro-components';
import RcResizeObserver from '@rc-component/resize-observer';
import { useState } from 'react';

const { Statistic, Divider } = StatisticCard;

const Demo = () => {
  const [responsive, setResponsive] = useState(false);

  return (
    <>
      <RcResizeObserver
        key="resize-observer"
        onResize={(offset) => {
          setResponsive(offset.width < 596);
        }}
      >
        <StatisticCard.Group direction={responsive ? 'column' : 'row'}>
          <StatisticCard
            statistic={{
              title: 'Total Traffic (Visits)',
              value: 601986875,
            }}
          />
          <Divider orientation={responsive ? 'horizontal' : 'vertical'} />
          <StatisticCard
            statistic={{
              title: 'Paid Traffic',
              value: 3701928,
              description: <Statistic title="Proportion" value="61.5%" />,
            }}
            chart={
              <img
                src="https://gw.alipayobjects.com/zos/alicdn/ShNDpDTik/huan.svg"
                alt="Percentage"
                width="100%"
              />
            }
            chartPlacement="left"
          />
          <StatisticCard
            statistic={{
              title: 'Free Traffic',
              value: 1806062,
              description: <Statistic title="Proportion" value="38.5%" />,
            }}
            chart={
              <img
                src="https://gw.alipayobjects.com/zos/alicdn/6YR18tCxJ/huanlv.svg"
                alt="Percentage"
                width="100%"
              />
            }
            chartPlacement="left"
          />
        </StatisticCard.Group>
      </RcResizeObserver>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>StatisticCard ChartPlacement Props 说明：</h4>
        <ul>
          <li>
            <strong>statistic.title</strong>: 统计项标题
          </li>
          <li>
            <strong>statistic.value</strong>: 统计数值
          </li>
          <li>
            <strong>statistic.description</strong>: 统计描述，可以是 Statistic
            组件
          </li>
          <li>
            <strong>chart</strong>: 图表区域
          </li>
          <li>
            <strong>chartPlacement</strong>: 图表位置，'left' 表示左侧，'right'
            表示右侧
          </li>
        </ul>
        <h4>ChartPlacement 属性说明：</h4>
        <ul>
          <li>
            <strong>left</strong>: 图表显示在左侧，统计信息显示在右侧
          </li>
          <li>
            <strong>right</strong>: 图表显示在右侧，统计信息显示在左侧
          </li>
          <li>
            <strong>默认值</strong>: 不设置时图表默认显示在右侧
          </li>
        </ul>
        <h4>嵌套 Statistic 组件：</h4>
        <ul>
          <li>
            <strong>title</strong>: 子统计项标题
          </li>
          <li>
            <strong>value</strong>: 子统计项数值
          </li>
        </ul>
        <h4>响应式布局特点：</h4>
        <ul>
          <li>
            <strong>断点控制</strong>: 当容器宽度小于 596px 时切换为垂直布局
          </li>
          <li>
            <strong>分割线适配</strong>: 根据布局方向自动调整分割线类型
          </li>
          <li>
            <strong>图表适配</strong>: 图表会根据容器大小自动调整
          </li>
        </ul>
        <h4>布局效果：</h4>
        <ul>
          <li>
            <strong>左侧图表</strong>: 图表在左侧，统计信息在右侧，适合强调图表
          </li>
          <li>
            <strong>右侧图表</strong>: 统计信息在左侧，图表在右侧，适合强调数据
          </li>
          <li>
            <strong>响应式</strong>: 在小屏幕上自动调整为垂直布局
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>数据对比</strong>: 展示不同类别的数据对比
          </li>
          <li>
            <strong>比例展示</strong>: 展示各部分占总体的比例
          </li>
          <li>
            <strong>趋势分析</strong>: 结合图表展示数据趋势
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>图表选择</strong>: 根据数据类型选择合适的图表类型
          </li>
          <li>
            <strong>布局平衡</strong>: 合理分配图表和统计信息的空间
          </li>
          <li>
            <strong>视觉层次</strong>: 通过布局突出重要的信息
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

      Total Score/Performance Target

      Fiscal Year Performance Target
      82.6Billion
      Daily Comparison
      6.47%
      Progress Bar
      Fiscal Year Performance Completion Rate
      70.98%
      Performance Completion Rate Same Period Last Year
      86.98%
      Performance Completion Rate Same Period Year Before Last
      88.98%
      Total Revenue for the Fiscal Year
      601,987,768
      Daily Comparison
      6.15%
      Line Chart
      Total Market Revenue
      1,982,312
      Daily Comparison
      6.15%
      Daily Ranking
      6
      Daily Comparison
      3.85%
      Line Chart
      Revenue in the Last 7 Days
      17,458
      Daily Comparison
      6.47%
      Fiscal Year Performance Revenue Ranking
      2
      Daily Comparison
      6.47%
      Line Chart
      Monthly Payment Count
      601
      Daily Comparison
      6.47%

      ProCard 复杂布局 Props 说明：

      • split: 分割方式，根据响应式状态自动调整
      • children: StatisticCard 和 StatisticCard.Group 子组件

      StatisticCard 配置：

      • colSpan: 栅格列数，控制组件在栅格系统中的宽度
      • title: 卡片标题
      • statistic: 主要统计信息配置
      • chart: 图表区域
      • footer: 底部区域，包含多个 Statistic 组件

      StatisticCard.Group 配置：

      • colSpan: 栅格列数，控制整个组的宽度
      • direction: 排列方向，响应式时自动调整
      • children: 多个 StatisticCard 子组件

      嵌套 Statistic 组件：

      • layout: 布局方式，'vertical' 表示垂直布局，'horizontal' 表示水平布局
      • title: 统计项标题
      • value: 统计数值
      • description: 统计描述，可以是 Statistic 组件

      响应式布局特点：

      • 断点控制: 当容器宽度小于 596px 时切换布局
      • 栅格适配: colSpan 根据响应式状态自动调整
      • 方向切换: Group 的 direction 根据响应式状态调整

      栅格系统说明：

      • 24 栅格: 使用 24 栅格系统，colSpan 表示占用的列数
      • 响应式适配: 小屏幕时 colSpan 自动调整为 24（占满宽度）
      • 比例控制: 通过 colSpan 控制各部分的宽度比例

      使用场景：

      • 数据仪表盘: 构建复杂的数据仪表盘
      • 报表系统: 展示多维度统计报表
      • 监控面板: 构建系统监控面板
      • 分析页面: 数据分析和可视化页面

      最佳实践：

      • 栅格规划: 合理规划 colSpan 值，确保布局平衡
      • 响应式设计: 确保在不同屏幕尺寸下都有良好的显示效果
      • 信息层次: 通过布局突出重要的信息
      import { ProCard, StatisticCard } from '@ant-design/pro-components';
import RcResizeObserver from '@rc-component/resize-observer';
import { useState } from 'react';

const { Statistic } = StatisticCard;

const Demo = () => {
  const [responsive, setResponsive] = useState(false);

  return (
    <>
      <RcResizeObserver
        key="resize-observer"
        onResize={(offset) => {
          setResponsive(offset.width < 596);
        }}
      >
        <ProCard split={responsive ? 'horizontal' : 'vertical'}>
          <StatisticCard
            colSpan={responsive ? 24 : 6}
            title="Fiscal Year Performance Target"
            statistic={{
              value: 82.6,
              suffix: 'Billion',
              description: (
                <Statistic title="Daily Comparison" value="6.47%" trend="up" />
              ),
            }}
            chart={
              <img
                src="https://gw.alipayobjects.com/zos/alicdn/PmKfn4qvD/mubiaowancheng-lan.svg"
                alt="Progress Bar"
                width="100%"
              />
            }
            footer={
              <>
                <Statistic
                  value="70.98%"
                  title="Fiscal Year Performance Completion Rate"
                  layout="horizontal"
                />
                <Statistic
                  value="86.98%"
                  title="Performance Completion Rate Same Period Last Year"
                  layout="horizontal"
                />
                <Statistic
                  value="88.98%"
                  title="Performance Completion Rate Same Period Year Before Last"
                  layout="horizontal"
                />
              </>
            }
          />
          <StatisticCard.Group
            colSpan={responsive ? 24 : 18}
            direction={responsive ? 'column' : undefined}
          >
            <StatisticCard
              statistic={{
                title: 'Total Revenue for the Fiscal Year',
                value: 601987768,
                description: (
                  <Statistic
                    title="Daily Comparison"
                    value="6.15%"
                    trend="up"
                  />
                ),
              }}
              chart={
                <img
                  src="https://gw.alipayobjects.com/zos/alicdn/zevpN7Nv_/xiaozhexiantu.svg"
                  alt="Line Chart"
                  width="100%"
                />
              }
            >
              <Statistic
                title="Total Market Revenue"
                value={1982312}
                layout="vertical"
                description={
                  <Statistic
                    title="Daily Comparison"
                    value="6.15%"
                    trend="down"
                  />
                }
              />
            </StatisticCard>
            <StatisticCard
              statistic={{
                title: 'Daily Ranking',
                value: 6,
                description: (
                  <Statistic
                    title="Daily Comparison"
                    value="3.85%"
                    trend="down"
                  />
                ),
              }}
              chart={
                <img
                  src="https://gw.alipayobjects.com/zos/alicdn/zevpN7Nv_/xiaozhexiantu.svg"
                  alt="Line Chart"
                  width="100%"
                />
              }
            >
              <Statistic
                title="Revenue in the Last 7 Days"
                value={17458}
                layout="vertical"
                description={
                  <Statistic
                    title="Daily Comparison"
                    value="6.47%"
                    trend="up"
                  />
                }
              />
            </StatisticCard>
            <StatisticCard
              statistic={{
                title: 'Fiscal Year Performance Revenue Ranking',
                value: 2,
                description: (
                  <Statistic
                    title="Daily Comparison"
                    value="6.47%"
                    trend="up"
                  />
                ),
              }}
              chart={
                <img
                  src="https://gw.alipayobjects.com/zos/alicdn/zevpN7Nv_/xiaozhexiantu.svg"
                  alt="Line Chart"
                  width="100%"
                />
              }
            >
              <Statistic
                title="Monthly Payment Count"
                value={601}
                layout="vertical"
                description={
                  <Statistic
                    title="Daily Comparison"
                    value="6.47%"
                    trend="down"
                  />
                }
              />
            </StatisticCard>
          </StatisticCard.Group>
        </ProCard>
      </RcResizeObserver>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProCard 复杂布局 Props 说明：</h4>
        <ul>
          <li>
            <strong>split</strong>: 分割方式，根据响应式状态自动调整
          </li>
          <li>
            <strong>children</strong>: StatisticCard 和 StatisticCard.Group
            子组件
          </li>
        </ul>
        <h4>StatisticCard 配置：</h4>
        <ul>
          <li>
            <strong>colSpan</strong>: 栅格列数，控制组件在栅格系统中的宽度
          </li>
          <li>
            <strong>title</strong>: 卡片标题
          </li>
          <li>
            <strong>statistic</strong>: 主要统计信息配置
          </li>
          <li>
            <strong>chart</strong>: 图表区域
          </li>
          <li>
            <strong>footer</strong>: 底部区域，包含多个 Statistic 组件
          </li>
        </ul>
        <h4>StatisticCard.Group 配置：</h4>
        <ul>
          <li>
            <strong>colSpan</strong>: 栅格列数，控制整个组的宽度
          </li>
          <li>
            <strong>direction</strong>: 排列方向，响应式时自动调整
          </li>
          <li>
            <strong>children</strong>: 多个 StatisticCard 子组件
          </li>
        </ul>
        <h4>嵌套 Statistic 组件：</h4>
        <ul>
          <li>
            <strong>layout</strong>: 布局方式，'vertical'
            表示垂直布局，'horizontal' 表示水平布局
          </li>
          <li>
            <strong>title</strong>: 统计项标题
          </li>
          <li>
            <strong>value</strong>: 统计数值
          </li>
          <li>
            <strong>description</strong>: 统计描述，可以是 Statistic 组件
          </li>
        </ul>
        <h4>响应式布局特点：</h4>
        <ul>
          <li>
            <strong>断点控制</strong>: 当容器宽度小于 596px 时切换布局
          </li>
          <li>
            <strong>栅格适配</strong>: colSpan 根据响应式状态自动调整
          </li>
          <li>
            <strong>方向切换</strong>: Group 的 direction 根据响应式状态调整
          </li>
        </ul>
        <h4>栅格系统说明：</h4>
        <ul>
          <li>
            <strong>24 栅格</strong>: 使用 24 栅格系统，colSpan 表示占用的列数
          </li>
          <li>
            <strong>响应式适配</strong>: 小屏幕时 colSpan 自动调整为
            24（占满宽度）
          </li>
          <li>
            <strong>比例控制</strong>: 通过 colSpan 控制各部分的宽度比例
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>数据仪表盘</strong>: 构建复杂的数据仪表盘
          </li>
          <li>
            <strong>报表系统</strong>: 展示多维度统计报表
          </li>
          <li>
            <strong>监控面板</strong>: 构建系统监控面板
          </li>
          <li>
            <strong>分析页面</strong>: 数据分析和可视化页面
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>栅格规划</strong>: 合理规划 colSpan 值，确保布局平衡
          </li>
          <li>
            <strong>响应式设计</strong>: 确保在不同屏幕尺寸下都有良好的显示效果
          </li>
          <li>
            <strong>信息层次</strong>: 通过布局突出重要的信息
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

      Grouped Indicators

      You can nest indicator card components to group indicators, and use the Divider component to separate these indicators.

      Grouped Indicators with Chart

      Frozen Amount
      20,190,102.00Yuan
      Histogram
      Design Resources
      234
      Histogram
      Information Completeness
      5/ 100
      Histogram

      StatisticCard.Group 图表分组 Props 说明：

      • direction: 排列方向，'row' 表示水平排列，'column' 表示垂直排列
      • children: StatisticCard 和 Divider 子组件

      StatisticCard 配置：

      • statistic.title: 统计项标题
      • statistic.value: 统计数值
      • statistic.precision: 数值精度，控制小数位数
      • statistic.suffix: 数值后缀，如单位或比例
      • chart: 图表区域，每个卡片都可以有自己的图表

      Divider 配置：

      • orientation: 分割线类型，根据响应式状态自动调整

      响应式布局特点：

      • 断点控制: 当容器宽度小于 596px 时切换为垂直布局
      • 分割线适配: 根据布局方向自动调整分割线类型
      • 图表适配: 图表会根据容器大小自动调整

      图表展示特点：

      • 独立图表: 每个统计卡片都有独立的图表
      • 统一风格: 所有图表使用相同的样式和尺寸
      • 响应式图表: 图表会随容器大小自动调整

      使用场景：

      • 多指标对比: 展示多个相关指标的对比
      • 数据仪表盘: 构建数据仪表盘和监控面板
      • 报表展示: 展示多维度统计报表
      • 分析页面: 数据分析和可视化页面

      最佳实践：

      • 图表一致性: 保持所有图表的风格一致
      • 数据关联: 确保分组中的统计数据有关联性
      • 视觉平衡: 合理分配各卡片的视觉空间
      import { StatisticCard } from '@ant-design/pro-components';
import RcResizeObserver from '@rc-component/resize-observer';
import { useState } from 'react';

const { Divider } = StatisticCard;

const Demo = () => {
  const [responsive, setResponsive] = useState(false);

  return (
    <>
      <RcResizeObserver
        key="resize-observer"
        onResize={(offset) => {
          setResponsive(offset.width < 596);
        }}
      >
        <StatisticCard.Group direction={responsive ? 'column' : 'row'}>
          <StatisticCard
            statistic={{
              title: 'Frozen Amount',
              value: 20190102,
              precision: 2,
              suffix: 'Yuan',
            }}
            chart={
              <img
                src="https://gw.alipayobjects.com/zos/alicdn/RLeBTRNWv/bianzu%25252043x.png"
                alt="Histogram"
                width="100%"
              />
            }
          />
          <Divider orientation={responsive ? 'horizontal' : 'vertical'} />
          <StatisticCard
            statistic={{
              title: 'Design Resources',
              value: 234,
            }}
            chart={
              <img
                src="https://gw.alipayobjects.com/zos/alicdn/RLeBTRNWv/bianzu%25252043x.png"
                alt="Histogram"
                width="100%"
              />
            }
          />
          <Divider orientation={responsive ? 'horizontal' : 'vertical'} />
          <StatisticCard
            statistic={{
              title: 'Information Completeness',
              value: 5,
              suffix: '/ 100',
            }}
            chart={
              <img
                src="https://gw.alipayobjects.com/zos/alicdn/RLeBTRNWv/bianzu%25252043x.png"
                alt="Histogram"
                width="100%"
              />
            }
          />
        </StatisticCard.Group>
      </RcResizeObserver>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>StatisticCard.Group 图表分组 Props 说明：</h4>
        <ul>
          <li>
            <strong>direction</strong>: 排列方向，'row' 表示水平排列，'column'
            表示垂直排列
          </li>
          <li>
            <strong>children</strong>: StatisticCard 和 Divider 子组件
          </li>
        </ul>
        <h4>StatisticCard 配置：</h4>
        <ul>
          <li>
            <strong>statistic.title</strong>: 统计项标题
          </li>
          <li>
            <strong>statistic.value</strong>: 统计数值
          </li>
          <li>
            <strong>statistic.precision</strong>: 数值精度，控制小数位数
          </li>
          <li>
            <strong>statistic.suffix</strong>: 数值后缀，如单位或比例
          </li>
          <li>
            <strong>chart</strong>: 图表区域，每个卡片都可以有自己的图表
          </li>
        </ul>
        <h4>Divider 配置：</h4>
        <ul>
          <li>
            <strong>orientation</strong>: 分割线类型，根据响应式状态自动调整
          </li>
        </ul>
        <h4>响应式布局特点：</h4>
        <ul>
          <li>
            <strong>断点控制</strong>: 当容器宽度小于 596px 时切换为垂直布局
          </li>
          <li>
            <strong>分割线适配</strong>: 根据布局方向自动调整分割线类型
          </li>
          <li>
            <strong>图表适配</strong>: 图表会根据容器大小自动调整
          </li>
        </ul>
        <h4>图表展示特点：</h4>
        <ul>
          <li>
            <strong>独立图表</strong>: 每个统计卡片都有独立的图表
          </li>
          <li>
            <strong>统一风格</strong>: 所有图表使用相同的样式和尺寸
          </li>
          <li>
            <strong>响应式图表</strong>: 图表会随容器大小自动调整
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>多指标对比</strong>: 展示多个相关指标的对比
          </li>
          <li>
            <strong>数据仪表盘</strong>: 构建数据仪表盘和监控面板
          </li>
          <li>
            <strong>报表展示</strong>: 展示多维度统计报表
          </li>
          <li>
            <strong>分析页面</strong>: 数据分析和可视化页面
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>图表一致性</strong>: 保持所有图表的风格一致
          </li>
          <li>
            <strong>数据关联</strong>: 确保分组中的统计数据有关联性
          </li>
          <li>
            <strong>视觉平衡</strong>: 合理分配各卡片的视觉空间
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

      Formula Calculation Indicator

      The Operation component can accept child elements, allowing you to implement various formula calculation indicators.

      Service Mesh Count
      500
      =
      Unpublished
      234
      +
      Publishing
      112
      +
      Published
      255

      StatisticCard Operation Props 说明：

      • children: 操作符内容，可以是数学符号如 '='、'+'、'-'、'×'、'÷' 等

      Operation 组件特点：

      • 数学公式: 用于在统计卡片之间显示数学运算符号
      • 公式展示: 展示数据之间的数学关系
      • 视觉连接: 通过操作符连接多个统计卡片

      StatisticCard 配置：

      • statistic.title: 统计项标题
      • statistic.value: 统计数值

      公式展示效果：

      • 等号: 表示总数等于各部分之和
      • 加号: 表示各部分相加
      • 减号: 表示减法运算
      • 乘除号: 表示乘除运算

      使用场景：

      • 数据分解: 展示总数与各组成部分的关系
      • 公式计算: 展示数学公式和数据计算过程
      • 数据验证: 验证数据之间的逻辑关系
      • 教学展示: 用于数据分析和教学场景

      最佳实践：

      • 公式清晰: 确保公式逻辑清晰易懂
      • 数据准确: 确保公式中的数值计算正确
      • 视觉平衡: 合理分配各部分的视觉权重
      import { StatisticCard } from '@ant-design/pro-components';

const { Operation } = StatisticCard;

const Demo = () => {
  return (
    <>
      <StatisticCard.Group>
        <StatisticCard
          statistic={{
            title: 'Service Mesh Count',
            value: 500,
          }}
        />
        <Operation>=</Operation>
        <StatisticCard
          statistic={{
            title: 'Unpublished',
            value: 234,
          }}
        />
        <Operation>+</Operation>
        <StatisticCard
          statistic={{
            title: 'Publishing',
            value: 112,
          }}
        />
        <Operation>+</Operation>
        <StatisticCard
          statistic={{
            title: 'Published',
            value: 255,
          }}
        />
      </StatisticCard.Group>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>StatisticCard Operation Props 说明：</h4>
        <ul>
          <li>
            <strong>children</strong>: 操作符内容，可以是数学符号如
            '='、'+'、'-'、'×'、'÷' 等
          </li>
        </ul>
        <h4>Operation 组件特点：</h4>
        <ul>
          <li>
            <strong>数学公式</strong>: 用于在统计卡片之间显示数学运算符号
          </li>
          <li>
            <strong>公式展示</strong>: 展示数据之间的数学关系
          </li>
          <li>
            <strong>视觉连接</strong>: 通过操作符连接多个统计卡片
          </li>
        </ul>
        <h4>StatisticCard 配置：</h4>
        <ul>
          <li>
            <strong>statistic.title</strong>: 统计项标题
          </li>
          <li>
            <strong>statistic.value</strong>: 统计数值
          </li>
        </ul>
        <h4>公式展示效果：</h4>
        <ul>
          <li>
            <strong>等号</strong>: 表示总数等于各部分之和
          </li>
          <li>
            <strong>加号</strong>: 表示各部分相加
          </li>
          <li>
            <strong>减号</strong>: 表示减法运算
          </li>
          <li>
            <strong>乘除号</strong>: 表示乘除运算
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>数据分解</strong>: 展示总数与各组成部分的关系
          </li>
          <li>
            <strong>公式计算</strong>: 展示数学公式和数据计算过程
          </li>
          <li>
            <strong>数据验证</strong>: 验证数据之间的逻辑关系
          </li>
          <li>
            <strong>教学展示</strong>: 用于数据分析和教学场景
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>公式清晰</strong>: 确保公式逻辑清晰易懂
          </li>
          <li>
            <strong>数据准确</strong>: 确保公式中的数值计算正确
          </li>
          <li>
            <strong>视觉平衡</strong>: 合理分配各部分的视觉权重
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

      Status Display

      You can set the status property for each numerical statistic to display its status.

      All
      10
      Unpublished
      5
      Publishing
      3
      Publishing Error
      2
      Published Successfully
      -

      StatisticCard Status Props 说明：

      • statistic.title: 统计项标题
      • statistic.tip: 提示信息，鼠标悬停时显示
      • statistic.value: 统计数值，可以是数字、字符串或 '-'
      • statistic.status: 状态指示，可选值：'default' | 'processing' | 'error' | 'success'

      Status 状态说明：

      • default: 默认状态，无特殊颜色标识
      • processing: 处理中状态，显示蓝色或橙色
      • error: 错误状态，显示红色
      • success: 成功状态，显示绿色

      状态显示特点：

      • 颜色区分: 不同状态使用不同的颜色进行区分
      • 视觉反馈: 通过颜色提供直观的状态反馈
      • 语义化: 状态值与业务语义相对应

      Divider 组件：

      • 默认分割线: 不设置 type 时使用默认分割线
      • 分隔作用: 用于分隔不同的统计项

      使用场景：

      • 状态统计: 统计不同状态下的数据量
      • 进度监控: 监控任务或流程的执行状态
      • 错误统计: 统计错误和成功的数据
      • 状态展示: 展示系统或业务的状态分布

      最佳实践：

      • 状态一致性: 保持状态值与业务逻辑的一致性
      • 颜色语义: 使用符合用户认知的颜色语义
      • 数据完整性: 确保所有状态的数据都有统计
      import { StatisticCard } from '@ant-design/pro-components';

const { Divider } = StatisticCard;

const Demo = () => {
  return (
    <>
      <StatisticCard.Group>
        <StatisticCard
          statistic={{
            title: 'All',
            tip: 'Help text',
            value: 10,
          }}
        />
        <Divider />
        <StatisticCard
          statistic={{
            title: 'Unpublished',
            value: 5,
            status: 'default',
          }}
        />
        <StatisticCard
          statistic={{
            title: 'Publishing',
            value: 3,
            status: 'processing',
          }}
        />
        <StatisticCard
          statistic={{
            title: 'Publishing Error',
            value: 2,
            status: 'error',
          }}
        />
        <StatisticCard
          statistic={{
            title: 'Published Successfully',
            value: '-',
            status: 'success',
          }}
        />
      </StatisticCard.Group>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>StatisticCard Status Props 说明：</h4>
        <ul>
          <li>
            <strong>statistic.title</strong>: 统计项标题
          </li>
          <li>
            <strong>statistic.tip</strong>: 提示信息，鼠标悬停时显示
          </li>
          <li>
            <strong>statistic.value</strong>: 统计数值，可以是数字、字符串或 '-'
          </li>
          <li>
            <strong>statistic.status</strong>: 状态指示，可选值：'default' |
            'processing' | 'error' | 'success'
          </li>
        </ul>
        <h4>Status 状态说明：</h4>
        <ul>
          <li>
            <strong>default</strong>: 默认状态，无特殊颜色标识
          </li>
          <li>
            <strong>processing</strong>: 处理中状态，显示蓝色或橙色
          </li>
          <li>
            <strong>error</strong>: 错误状态，显示红色
          </li>
          <li>
            <strong>success</strong>: 成功状态，显示绿色
          </li>
        </ul>
        <h4>状态显示特点：</h4>
        <ul>
          <li>
            <strong>颜色区分</strong>: 不同状态使用不同的颜色进行区分
          </li>
          <li>
            <strong>视觉反馈</strong>: 通过颜色提供直观的状态反馈
          </li>
          <li>
            <strong>语义化</strong>: 状态值与业务语义相对应
          </li>
        </ul>
        <h4>Divider 组件：</h4>
        <ul>
          <li>
            <strong>默认分割线</strong>: 不设置 type 时使用默认分割线
          </li>
          <li>
            <strong>分隔作用</strong>: 用于分隔不同的统计项
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>状态统计</strong>: 统计不同状态下的数据量
          </li>
          <li>
            <strong>进度监控</strong>: 监控任务或流程的执行状态
          </li>
          <li>
            <strong>错误统计</strong>: 统计错误和成功的数据
          </li>
          <li>
            <strong>状态展示</strong>: 展示系统或业务的状态分布
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>状态一致性</strong>: 保持状态值与业务逻辑的一致性
          </li>
          <li>
            <strong>颜色语义</strong>: 使用符合用户认知的颜色语义
          </li>
          <li>
            <strong>数据完整性</strong>: 确保所有状态的数据都有统计
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

      Icon Display

      You can set the icon property for each numerical statistic to display its icon.

      icon
      Payment Amount
      2,176
      icon
      Number of Visitors
      475
      icon
      Number of Successful Orders
      87
      icon
      Page Views
      1,754

      StatisticCard Icon Props 说明：

      • statistic.icon: 统计项图标，可以是图片或 React 节点
      • statistic.title: 统计项标题
      • statistic.value: 统计数值

      StatisticCard.Group Props：

      • direction: 排列方向，'row' 表示水平排列，'column' 表示垂直排列
      • children: StatisticCard 子组件

      RcResizeObserver Props：

      • onResize: 容器大小变化时的回调函数
      • offset: 包含 width 和 height 的对象

      响应式布局特点：

      • 断点控制: 当容器宽度小于 596px 时切换为垂直布局
      • 自动适配: 根据屏幕尺寸自动调整布局方向
      • 实时监听: 使用 ResizeObserver 实时监听容器大小变化

      Icon 使用方式：

      • 图片图标: 使用 img 标签显示图标图片
      • Ant Design 图标: 使用 @ant-design/icons 中的图标组件
      • 自定义图标: 使用 SVG 或其他自定义图标组件

      使用场景：

      • 数据仪表盘: 展示多个关键指标
      • 移动端适配: 在小屏幕设备上自动调整布局
      • 图标统计: 使用图标增强统计信息的可读性
      import { StatisticCard } from '@ant-design/pro-components';
import RcResizeObserver from '@rc-component/resize-observer';
import { useState } from 'react';

const imgStyle = {
  display: 'block',
  width: 42,
  height: 42,
};

const Demo = () => {
  const [responsive, setResponsive] = useState(false);

  return (
    <>
      <RcResizeObserver
        key="resize-observer"
        onResize={(offset) => {
          setResponsive(offset.width < 596);
        }}
      >
        <StatisticCard.Group direction={responsive ? 'column' : 'row'}>
          <StatisticCard
            statistic={{
              title: 'Payment Amount',
              value: 2176,
              icon: (
                <img
                  style={imgStyle}
                  src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*dr_0RKvVzVwAAAAAAAAAAABkARQnAQ"
                  alt="icon"
                />
              ),
            }}
          />
          <StatisticCard
            statistic={{
              title: 'Number of Visitors',
              value: 475,
              icon: (
                <img
                  style={imgStyle}
                  src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*-jVKQJgA1UgAAAAAAAAAAABkARQnAQ"
                  alt="icon"
                />
              ),
            }}
          />
          <StatisticCard
            statistic={{
              title: 'Number of Successful Orders',
              value: 87,
              icon: (
                <img
                  style={imgStyle}
                  src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*FPlYQoTNlBEAAAAAAAAAAABkARQnAQ"
                  alt="icon"
                />
              ),
            }}
          />
          <StatisticCard
            statistic={{
              title: 'Page Views',
              value: 1754,
              icon: (
                <img
                  style={imgStyle}
                  src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*pUkAQpefcx8AAAAAAAAAAABkARQnAQ"
                  alt="icon"
                />
              ),
            }}
          />
        </StatisticCard.Group>
      </RcResizeObserver>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>StatisticCard Icon Props 说明：</h4>
        <ul>
          <li>
            <strong>statistic.icon</strong>: 统计项图标，可以是图片或 React 节点
          </li>
          <li>
            <strong>statistic.title</strong>: 统计项标题
          </li>
          <li>
            <strong>statistic.value</strong>: 统计数值
          </li>
        </ul>
        <h4>StatisticCard.Group Props：</h4>
        <ul>
          <li>
            <strong>direction</strong>: 排列方向，'row' 表示水平排列，'column'
            表示垂直排列
          </li>
          <li>
            <strong>children</strong>: StatisticCard 子组件
          </li>
        </ul>
        <h4>RcResizeObserver Props：</h4>
        <ul>
          <li>
            <strong>onResize</strong>: 容器大小变化时的回调函数
          </li>
          <li>
            <strong>offset</strong>: 包含 width 和 height 的对象
          </li>
        </ul>
        <h4>响应式布局特点：</h4>
        <ul>
          <li>
            <strong>断点控制</strong>: 当容器宽度小于 596px 时切换为垂直布局
          </li>
          <li>
            <strong>自动适配</strong>: 根据屏幕尺寸自动调整布局方向
          </li>
          <li>
            <strong>实时监听</strong>: 使用 ResizeObserver 实时监听容器大小变化
          </li>
        </ul>
        <h4>Icon 使用方式：</h4>
        <ul>
          <li>
            <strong>图片图标</strong>: 使用 img 标签显示图标图片
          </li>
          <li>
            <strong>Ant Design 图标</strong>: 使用 @ant-design/icons
            中的图标组件
          </li>
          <li>
            <strong>自定义图标</strong>: 使用 SVG 或其他自定义图标组件
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>数据仪表盘</strong>: 展示多个关键指标
          </li>
          <li>
            <strong>移动端适配</strong>: 在小屏幕设备上自动调整布局
          </li>
          <li>
            <strong>图标统计</strong>: 使用图标增强统计信息的可读性
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

      Card Layout

      By using the card splitting capability of ProCard, you can achieve complex card layouts.

      Data Overview
      Friday, September 28, 2019
      Total Traffic Yesterday
      234
      Compared to Monthly Average Traffic
      8.04%
      Total Traffic This Month
      234
      Month-on-Month
      8.04%
      Ongoing Experiments
      12/56items
      Total Historical Experiments
      134items
      Traffic Trends
      Bar Chart
      Traffic Usage
      Dashboard

      ProCard 嵌套布局 Props 说明：

      • title: 卡片标题
      • extra: 卡片右上角额外信息
      • split: 分割方式，'horizontal' 表示水平分割，'vertical' 表示垂直分割
      • headerBordered: 是否显示头部边框
      • variant: 卡片变体样式，'outlined' 表示带边框

      StatisticCard 嵌套配置：

      • statistic.title: 统计项标题
      • statistic.value: 统计数值
      • statistic.description: 统计描述，可以是 Statistic 组件
      • statistic.suffix: 数值后缀
      • chart: 图表区域

      嵌套 Statistic 组件：

      • title: 子统计项标题
      • value: 子统计项数值
      • trend: 趋势指示，'up' 或 'down'

      响应式布局特点：

      • 断点控制: 当容器宽度小于 596px 时切换分割方式
      • 自适应分割: 根据屏幕尺寸自动调整分割方向
      • 嵌套支持: 支持多层嵌套的卡片布局

      布局结构：

      • 外层 ProCard: 整体容器，控制主要分割方向
      • 中层 ProCard: 中间容器，处理水平分割
      • 内层 ProCard: 内层容器，处理垂直分割
      • StatisticCard: 统计卡片，展示具体数据

      使用场景：

      • 数据仪表盘: 构建复杂的数据展示界面
      • 报表系统: 展示多维度统计报表
      • 监控面板: 构建系统监控面板
      • 分析页面: 数据分析和可视化页面

      最佳实践：

      • 合理嵌套: 避免过深的嵌套层级
      • 响应式设计: 确保在不同屏幕尺寸下都有良好的显示效果
      • 性能优化: 大量数据时考虑虚拟化或分页
      import { ProCard, StatisticCard } from '@ant-design/pro-components';
import RcResizeObserver from '@rc-component/resize-observer';
import { useState } from 'react';

const { Statistic } = StatisticCard;

const Demo = () => {
  const [responsive, setResponsive] = useState(false);

  return (
    <>
      <RcResizeObserver
        key="resize-observer"
        onResize={(offset) => {
          setResponsive(offset.width < 596);
        }}
      >
        <ProCard
          title="Data Overview"
          extra="Friday, September 28, 2019"
          split={responsive ? 'horizontal' : 'vertical'}
          headerBordered
          variant="outlined"
        >
          <ProCard split="horizontal">
            <ProCard split="horizontal">
              <ProCard split="vertical">
                <StatisticCard
                  statistic={{
                    title: 'Total Traffic Yesterday',
                    value: 234,
                    description: (
                      <Statistic
                        title="Compared to Monthly Average Traffic"
                        value="8.04%"
                        trend="down"
                      />
                    ),
                  }}
                />
                <StatisticCard
                  statistic={{
                    title: 'Total Traffic This Month',
                    value: 234,
                    description: (
                      <Statistic
                        title="Month-on-Month"
                        value="8.04%"
                        trend="up"
                      />
                    ),
                  }}
                />
              </ProCard>
              <ProCard split="vertical">
                <StatisticCard
                  statistic={{
                    title: 'Ongoing Experiments',
                    value: '12/56',
                    suffix: 'items',
                  }}
                />
                <StatisticCard
                  statistic={{
                    title: 'Total Historical Experiments',
                    value: '134',
                    suffix: 'items',
                  }}
                />
              </ProCard>
            </ProCard>
            <StatisticCard
              title="Traffic Trends"
              chart={
                <img
                  src="https://gw.alipayobjects.com/zos/alicdn/_dZIob2NB/zhuzhuangtu.svg"
                  width="100%"
                  alt="Bar Chart"
                />
              }
            />
          </ProCard>
          <StatisticCard
            title="Traffic Usage"
            chart={
              <img
                src="https://gw.alipayobjects.com/zos/alicdn/qoYmFMxWY/jieping2021-03-29%252520xiawu4.32.34.png"
                alt="Dashboard"
                width="100%"
              />
            }
          />
        </ProCard>
      </RcResizeObserver>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>ProCard 嵌套布局 Props 说明：</h4>
        <ul>
          <li>
            <strong>title</strong>: 卡片标题
          </li>
          <li>
            <strong>extra</strong>: 卡片右上角额外信息
          </li>
          <li>
            <strong>split</strong>: 分割方式，'horizontal'
            表示水平分割，'vertical' 表示垂直分割
          </li>
          <li>
            <strong>headerBordered</strong>: 是否显示头部边框
          </li>
          <li>
            <strong>variant</strong>: 卡片变体样式，'outlined' 表示带边框
          </li>
        </ul>
        <h4>StatisticCard 嵌套配置：</h4>
        <ul>
          <li>
            <strong>statistic.title</strong>: 统计项标题
          </li>
          <li>
            <strong>statistic.value</strong>: 统计数值
          </li>
          <li>
            <strong>statistic.description</strong>: 统计描述，可以是 Statistic
            组件
          </li>
          <li>
            <strong>statistic.suffix</strong>: 数值后缀
          </li>
          <li>
            <strong>chart</strong>: 图表区域
          </li>
        </ul>
        <h4>嵌套 Statistic 组件：</h4>
        <ul>
          <li>
            <strong>title</strong>: 子统计项标题
          </li>
          <li>
            <strong>value</strong>: 子统计项数值
          </li>
          <li>
            <strong>trend</strong>: 趋势指示，'up' 或 'down'
          </li>
        </ul>
        <h4>响应式布局特点：</h4>
        <ul>
          <li>
            <strong>断点控制</strong>: 当容器宽度小于 596px 时切换分割方式
          </li>
          <li>
            <strong>自适应分割</strong>: 根据屏幕尺寸自动调整分割方向
          </li>
          <li>
            <strong>嵌套支持</strong>: 支持多层嵌套的卡片布局
          </li>
        </ul>
        <h4>布局结构：</h4>
        <ul>
          <li>
            <strong>外层 ProCard</strong>: 整体容器，控制主要分割方向
          </li>
          <li>
            <strong>中层 ProCard</strong>: 中间容器，处理水平分割
          </li>
          <li>
            <strong>内层 ProCard</strong>: 内层容器，处理垂直分割
          </li>
          <li>
            <strong>StatisticCard</strong>: 统计卡片，展示具体数据
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>数据仪表盘</strong>: 构建复杂的数据展示界面
          </li>
          <li>
            <strong>报表系统</strong>: 展示多维度统计报表
          </li>
          <li>
            <strong>监控面板</strong>: 构建系统监控面板
          </li>
          <li>
            <strong>分析页面</strong>: 数据分析和可视化页面
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>合理嵌套</strong>: 避免过深的嵌套层级
          </li>
          <li>
            <strong>响应式设计</strong>: 确保在不同屏幕尺寸下都有良好的显示效果
          </li>
          <li>
            <strong>性能优化</strong>: 大量数据时考虑虚拟化或分页
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

      Chart on the Right

      Set the chartPlacement property to right to specify that the chart should be on the right side of the numerical statistic. The default is top-bottom layout.

      Frozen Amount
      112,893.00Yuan
      Weekly Comparison
      6.47%
      Monthly Comparison
      6.47%
      Line Chart

      StatisticCard Horizontal Layout Props 说明：

      • chartPlacement: 图表位置，'right' 表示图表显示在右侧
      • statistic: 统计信息配置对象
      • style: 卡片样式对象
      • chart: 图表区域

      Statistic 配置：

      • title: 统计项标题
      • value: 统计数值
      • precision: 数值精度，控制小数位数
      • suffix: 数值后缀，如单位
      • description: 统计描述，可以包含多个 Statistic 组件

      嵌套 Statistic 组件：

      • title: 子统计项标题
      • value: 子统计项数值
      • trend: 趋势指示，'up' 或 'down'

      ChartPlacement="right" 特点：

      • 右侧图表: 图表显示在右侧，统计信息显示在左侧
      • 强调数据: 左侧的统计信息更加突出
      • 空间利用: 充分利用水平空间

      布局效果：

      • 左侧信息: 主要统计信息和描述信息
      • 右侧图表: 可视化图表展示
      • 水平布局: 充分利用水平空间

      使用场景：

      • 数据展示: 展示主要数据指标
      • 趋势分析: 结合图表展示数据趋势
      • 对比分析: 展示多个时间段的对比数据
      • 仪表盘: 构建数据仪表盘

      最佳实践：

      • 信息层次: 确保主要信息和次要信息的层次清晰
      • 图表选择: 根据数据类型选择合适的图表
      • 空间平衡: 合理分配统计信息和图表的空间
      import { StatisticCard } from '@ant-design/pro-components';

const { Statistic } = StatisticCard;

const Demo = () => {
  return (
    <>
      <StatisticCard
        chartPlacement="right"
        statistic={{
          title: 'Frozen Amount',
          value: 112893,
          precision: 2,
          suffix: 'Yuan',
          description: (
            <>
              <Statistic title="Weekly Comparison" value="6.47%" trend="up" />
              <Statistic
                title="Monthly Comparison"
                value="6.47%"
                trend="down"
              />
            </>
          ),
        }}
        style={{ width: 584 }}
        chart={
          <img
            src="https://gw.alipayobjects.com/zos/alicdn/snEBTn9ax/zhexiantuchang.svg"
            alt="Line Chart"
            width="100%"
          />
        }
      />

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>StatisticCard Horizontal Layout Props 说明：</h4>
        <ul>
          <li>
            <strong>chartPlacement</strong>: 图表位置，'right'
            表示图表显示在右侧
          </li>
          <li>
            <strong>statistic</strong>: 统计信息配置对象
          </li>
          <li>
            <strong>style</strong>: 卡片样式对象
          </li>
          <li>
            <strong>chart</strong>: 图表区域
          </li>
        </ul>
        <h4>Statistic 配置：</h4>
        <ul>
          <li>
            <strong>title</strong>: 统计项标题
          </li>
          <li>
            <strong>value</strong>: 统计数值
          </li>
          <li>
            <strong>precision</strong>: 数值精度，控制小数位数
          </li>
          <li>
            <strong>suffix</strong>: 数值后缀，如单位
          </li>
          <li>
            <strong>description</strong>: 统计描述，可以包含多个 Statistic 组件
          </li>
        </ul>
        <h4>嵌套 Statistic 组件：</h4>
        <ul>
          <li>
            <strong>title</strong>: 子统计项标题
          </li>
          <li>
            <strong>value</strong>: 子统计项数值
          </li>
          <li>
            <strong>trend</strong>: 趋势指示，'up' 或 'down'
          </li>
        </ul>
        <h4>ChartPlacement="right" 特点：</h4>
        <ul>
          <li>
            <strong>右侧图表</strong>: 图表显示在右侧，统计信息显示在左侧
          </li>
          <li>
            <strong>强调数据</strong>: 左侧的统计信息更加突出
          </li>
          <li>
            <strong>空间利用</strong>: 充分利用水平空间
          </li>
        </ul>
        <h4>布局效果：</h4>
        <ul>
          <li>
            <strong>左侧信息</strong>: 主要统计信息和描述信息
          </li>
          <li>
            <strong>右侧图表</strong>: 可视化图表展示
          </li>
          <li>
            <strong>水平布局</strong>: 充分利用水平空间
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>数据展示</strong>: 展示主要数据指标
          </li>
          <li>
            <strong>趋势分析</strong>: 结合图表展示数据趋势
          </li>
          <li>
            <strong>对比分析</strong>: 展示多个时间段的对比数据
          </li>
          <li>
            <strong>仪表盘</strong>: 构建数据仪表盘
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>信息层次</strong>: 确保主要信息和次要信息的层次清晰
          </li>
          <li>
            <strong>图表选择</strong>: 根据数据类型选择合适的图表
          </li>
          <li>
            <strong>空间平衡</strong>: 合理分配统计信息和图表的空间
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

      Chart on the Left

      Set the chartPlacement property to left to specify that the chart should be on the left side of the numerical statistic.

      Line Chart
      Frozen Amount
      112,893.00Yuan
      Weekly Comparison
      6.47%
      Monthly Comparison
      6.47%

      StatisticCard Horizontal Left Layout Props 说明：

      • chartPlacement: 图表位置，'left' 表示图表显示在左侧
      • statistic: 统计信息配置对象
      • style: 卡片样式对象，使用 maxWidth 控制最大宽度
      • chart: 图表区域

      Statistic 配置：

      • title: 统计项标题
      • value: 统计数值
      • precision: 数值精度，控制小数位数
      • suffix: 数值后缀，如单位
      • description: 统计描述，可以包含多个 Statistic 组件

      嵌套 Statistic 组件：

      • title: 子统计项标题
      • value: 子统计项数值
      • trend: 趋势指示，'up' 或 'down'

      ChartPlacement="left" 特点：

      • 左侧图表: 图表显示在左侧，统计信息显示在右侧
      • 强调图表: 左侧的图表更加突出
      • 视觉引导: 从左到右的阅读习惯

      样式配置：

      • maxWidth: 设置最大宽度，避免在大屏幕上过宽
      • 响应式: 在小屏幕上会自动调整布局

      布局效果：

      • 左侧图表: 可视化图表展示
      • 右侧信息: 主要统计信息和描述信息
      • 水平布局: 充分利用水平空间

      使用场景：

      • 图表展示: 强调图表的重要性
      • 数据可视化: 突出数据可视化效果
      • 趋势分析: 结合图表展示数据趋势
      • 仪表盘: 构建数据仪表盘

      最佳实践：

      • 图表质量: 确保左侧图表清晰易懂
      • 信息层次: 右侧信息应该与图表相关
      • 空间平衡: 合理分配图表和信息的空间
      import { StatisticCard } from '@ant-design/pro-components';

const { Statistic } = StatisticCard;

const Demo = () => {
  return (
    <>
      <StatisticCard
        chartPlacement="left"
        statistic={{
          title: 'Frozen Amount',
          value: 112893,
          precision: 2,
          suffix: 'Yuan',
          description: (
            <>
              <Statistic title="Weekly Comparison" value="6.47%" trend="up" />
              <Statistic
                title="Monthly Comparison"
                value="6.47%"
                trend="down"
              />
            </>
          ),
        }}
        style={{ maxWidth: 584 }}
        chart={
          <img
            src="https://gw.alipayobjects.com/zos/alicdn/snEBTn9ax/zhexiantuchang.svg"
            alt="Line Chart"
            width="100%"
          />
        }
      />

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>StatisticCard Horizontal Left Layout Props 说明：</h4>
        <ul>
          <li>
            <strong>chartPlacement</strong>: 图表位置，'left' 表示图表显示在左侧
          </li>
          <li>
            <strong>statistic</strong>: 统计信息配置对象
          </li>
          <li>
            <strong>style</strong>: 卡片样式对象，使用 maxWidth 控制最大宽度
          </li>
          <li>
            <strong>chart</strong>: 图表区域
          </li>
        </ul>
        <h4>Statistic 配置：</h4>
        <ul>
          <li>
            <strong>title</strong>: 统计项标题
          </li>
          <li>
            <strong>value</strong>: 统计数值
          </li>
          <li>
            <strong>precision</strong>: 数值精度，控制小数位数
          </li>
          <li>
            <strong>suffix</strong>: 数值后缀，如单位
          </li>
          <li>
            <strong>description</strong>: 统计描述，可以包含多个 Statistic 组件
          </li>
        </ul>
        <h4>嵌套 Statistic 组件：</h4>
        <ul>
          <li>
            <strong>title</strong>: 子统计项标题
          </li>
          <li>
            <strong>value</strong>: 子统计项数值
          </li>
          <li>
            <strong>trend</strong>: 趋势指示，'up' 或 'down'
          </li>
        </ul>
        <h4>ChartPlacement="left" 特点：</h4>
        <ul>
          <li>
            <strong>左侧图表</strong>: 图表显示在左侧，统计信息显示在右侧
          </li>
          <li>
            <strong>强调图表</strong>: 左侧的图表更加突出
          </li>
          <li>
            <strong>视觉引导</strong>: 从左到右的阅读习惯
          </li>
        </ul>
        <h4>样式配置：</h4>
        <ul>
          <li>
            <strong>maxWidth</strong>: 设置最大宽度，避免在大屏幕上过宽
          </li>
          <li>
            <strong>响应式</strong>: 在小屏幕上会自动调整布局
          </li>
        </ul>
        <h4>布局效果：</h4>
        <ul>
          <li>
            <strong>左侧图表</strong>: 可视化图表展示
          </li>
          <li>
            <strong>右侧信息</strong>: 主要统计信息和描述信息
          </li>
          <li>
            <strong>水平布局</strong>: 充分利用水平空间
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>图表展示</strong>: 强调图表的重要性
          </li>
          <li>
            <strong>数据可视化</strong>: 突出数据可视化效果
          </li>
          <li>
            <strong>趋势分析</strong>: 结合图表展示数据趋势
          </li>
          <li>
            <strong>仪表盘</strong>: 构建数据仪表盘
          </li>
        </ul>
        <h4>最佳实践：</h4>
        <ul>
          <li>
            <strong>图表质量</strong>: 确保左侧图表清晰易懂
          </li>
          <li>
            <strong>信息层次</strong>: 右侧信息应该与图表相关
          </li>
          <li>
            <strong>空间平衡</strong>: 合理分配图表和信息的空间
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

      Linked Indicator Tabs

      By combining with Statistic, you can create tabs with indicator statistics.

      Related display content All
      import type { StatisticProps } from '@ant-design/pro-components';
import { ProCard, StatisticCard } from '@ant-design/pro-components';

const { Statistic } = StatisticCard;

const items = [
  { key: '1', title: 'All', value: 10, total: true },
  { key: '2', status: 'default', title: 'Unpublished', value: 5 },
  { key: '3', status: 'processing', title: 'Publishing', value: 3 },
  { key: '4', status: 'error', title: 'Publishing Error', value: 1 },
  { key: '5', status: 'success', title: 'Published Successfully', value: 1 },
];

const Demo = () => {
  return (
    <ProCard
      tabs={{
        onChange: (_key) => {},
        items: items.map((item) => {
          return {
            key: item.key,
            style: { width: '100%' },
            label: (
              <Statistic
                layout="vertical"
                title={item.title}
                value={item.value}
                status={item.status as StatisticProps['status']}
                style={{
                  width: 120,
                  borderInlineEnd: item.total ? '1px solid #f0f0f0' : undefined,
                }}
              />
            ),
            children: (
              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  backgroundColor: '#fafafa',
                  height: 100,
                }}
              >
                Related display content {item.title}
              </div>
            ),
          };
        }),
      }}
    />
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

      Sequential Trend

      You can use the Statistic component with the layout property set to inline and the trend property to display the sequential trend.

      Daily Comparison
      7.60%
      Weekly Comparison
      7.60%
      Weekly Comparison
      0.00%

      StatisticCard Trend Props 说明：

      • title: 统计项标题
      • value: 统计数值
      • trend: 趋势指示，可选值：'up' | 'down' | undefined

      Trend 属性说明：

      • up: 上升趋势，显示绿色上升箭头
      • down: 下降趋势，显示红色下降箭头
      • undefined: 无趋势，不显示箭头

      趋势显示特点：

      • 颜色区分: 上升趋势为绿色，下降趋势为红色
      • 箭头指示: 使用箭头图标直观显示趋势方向
      • 数值对比: 结合数值变化展示趋势信息

      使用场景：

      • 数据对比: 展示同比、环比等数据变化趋势
      • 指标监控: 监控关键业务指标的变化趋势
      • 报表分析: 在报表中展示数据趋势分析
      import { StatisticCard } from '@ant-design/pro-components';

const { Statistic } = StatisticCard;

const Demo = () => {
  return (
    <>
      <StatisticCard style={{ width: 160 }}>
        <Statistic title="Daily Comparison" value="7.60%" trend="up" />
        <Statistic title="Weekly Comparison" value="7.60%" trend="down" />
        <Statistic title="Weekly Comparison" value="0.00%" />
      </StatisticCard>

      <div
        style={{
          marginTop: '20px',
          padding: '20px',
          backgroundColor: '#f5f5f5',
          borderRadius: '6px',
        }}
      >
        <h4>StatisticCard Trend Props 说明：</h4>
        <ul>
          <li>
            <strong>title</strong>: 统计项标题
          </li>
          <li>
            <strong>value</strong>: 统计数值
          </li>
          <li>
            <strong>trend</strong>: 趋势指示，可选值：'up' | 'down' | undefined
          </li>
        </ul>
        <h4>Trend 属性说明：</h4>
        <ul>
          <li>
            <strong>up</strong>: 上升趋势，显示绿色上升箭头
          </li>
          <li>
            <strong>down</strong>: 下降趋势，显示红色下降箭头
          </li>
          <li>
            <strong>undefined</strong>: 无趋势，不显示箭头
          </li>
        </ul>
        <h4>趋势显示特点：</h4>
        <ul>
          <li>
            <strong>颜色区分</strong>: 上升趋势为绿色，下降趋势为红色
          </li>
          <li>
            <strong>箭头指示</strong>: 使用箭头图标直观显示趋势方向
          </li>
          <li>
            <strong>数值对比</strong>: 结合数值变化展示趋势信息
          </li>
        </ul>
        <h4>使用场景：</h4>
        <ul>
          <li>
            <strong>数据对比</strong>: 展示同比、环比等数据变化趋势
          </li>
          <li>
            <strong>指标监控</strong>: 监控关键业务指标的变化趋势
          </li>
          <li>
            <strong>报表分析</strong>: 在报表中展示数据趋势分析
          </li>
        </ul>
      </div>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

      API

      StatisticCard

      PropertyDescriptionTypeDefault
      titleTitle of the cardstring|ReactNode-
      extraExtra operations area on the top right of the cardstring|ReactNode-
      loadingWhether the card content is still loading, can be used to show a placeholder with loading iconbooleanfalse
      borderedWhether the card has a borderbooleantrue
      chartChart componentReactNode-
      statisticConfiguration for numerical statistics, default layout is verticalSee Statistic below-
      chartPlacementPosition of the chart relative to the statisticleft | right | bottom-
      footerExtra area for displaying additional indicatorsReactNode-

      Refer to ProCard for more details, supports all APIs of ProCard.

      Statistic

      PropertyDescriptionTypeDefault
      prefixPrefix of the valuestring | ReactNode-
      suffixSuffix of the valuestring | ReactNode-
      titleTitle of the valuestring | ReactNode-
      tipTooltip of the titlestring| ReactNode-
      valueContent of the valuestring | number-
      iconIconReactNode-
      statusStatus dot, same as Badge componentEnum{ 'success', 'processing, 'default', 'error', 'warning' }-
      valueStyleStyle of the valuestyle-
      descriptionDescription labelReact.ReactNode | () => React.ReactNode-
      layoutLayouthorizontal | vertical | inlineinline
      trendTrendup | down-

      Refer to Statistic for more APIs, supports all APIs of Statistic.

      Divider

      Used to separate numerical statistics when grouping.

      PropertyDescriptionTypeDefault
      orientationType of the dividerhorizontal | vertical-

      Operation

      Used for rendering operators.

      Group

      Same properties as StatisticCard, but cancels the content margin of the card, used to group multiple cards.