StatisticCard 指标卡

指标卡结合统计数值用于展示某主题的核心指标，结合 Ant Design Charts 图表库丰富数值内容，满足大多数数值展示的场景。

注意 demo 中的所有图表示例可以到 charts 的官网中找到，这里不再给出实际代码示例，仅以图片进行代替，所以相关交互是没有的。

若有内容撑开卡片的情况请设置内容宽度为 100% 或设置定宽。

何时使用

1）在页面内的重要位置，展示重要信息；
2）在概览页面展示系统功能。

代码演示

基本使用

使用数值统计配置 statistic 和 chart 完成基本的指标卡。

Department One

¥1,102,893

Actual Completion

82.3%

Current Target

¥6000

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>
);

只有图表

当图表单独展示在卡片中时。

Market Trend

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>
);

额外指标

footer 用于设置额外的指标展示区域。
你可以设置 Statistic 组件的布局方式layout 为 horizontal 来展示横向指标。

总分 / 主次关系

Total Traffic (Visits)

601,986,875

Paid Traffic

3,701,928

Proportion

61.5%

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>
);

总分 / 业绩目标

Fiscal Year Performance Target

82.6Billion

Daily Comparison

6.47%

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%

Total Market Revenue

1,982,312

Daily Comparison

6.15%

Daily Ranking

Daily Comparison

3.85%

Revenue in the Last 7 Days

17,458

Daily Comparison

6.47%

Fiscal Year Performance Revenue Ranking

Daily Comparison

6.47%

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>
);

分组指标

你可以嵌套指标卡组件来将指标分组，以及 Divider 子组件来分隔这些指标。

分组指标带图表

Frozen Amount

20,190,102.00Yuan

Design Resources

234

Information Completeness

5/ 100

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>
);

公式计算指标

Operation 可以接受子元素，借此可以实现各种各样的公式计算指标。

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 展示其状态。

All

Unpublished

Publishing

Publishing Error

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 展示其图标。

Payment Amount

2,176

Number of Visitors

475

Number of Successful Orders

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>
);

卡片布局

配合 ProCard 的卡片切分能力可以实现复杂的卡片布局。

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

Traffic Usage

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>
);

图表在右

配置 chartPlacement 为 right 可以指定图表在数值统计的右边。默认为上下结构。

Frozen Amount

112,893.00Yuan

Weekly Comparison

6.47%

Monthly Comparison

6.47%

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>
);

图表在左

配置 chartPlacement 为 left 可以指定图表在数值统计的左边。

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>
);

指标页签联动

结合 Statistic 可以实现带指标统计的页签。

All

Unpublished

Publishing

Publishing Error

Published Successfully

环比趋势

你可以使用 Statistic 组件配置布局 layout 为 inline 以及 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

参数	说明	类型	默认值
title	卡片标题	`string\|ReactNode`	-
extra	卡片右上角的操作区域	`string\|ReactNode`	-
loading	当卡片内容还在加载中时，可以用 loading 展示一个占位	boolean	false
bordered	是否有边框	boolean	true
chart	图表卡片	ReactNode	-
statistic	数值统计配置，布局默认为 `vertical`	参数见下 Statistic	-
chartPlacement	图表位置，相对于 statistic 的位置	`left \| right \| bottom`	-
footer	额外指标展示	`ReactNode`	-

更多参考 ProCard，支持 ProCard 的所有 API。

Statistic

参数	说明	类型	默认值
prefix	设置数值的前缀	string \| ReactNode	-
suffix	设置数值的后缀	string \| ReactNode	-
title	数值的标题	string \| ReactNode	-
tip	标题提示	string\| ReactNode	-
value	数值内容	string \| number	-
icon	图标	ReactNode	-
status	设置状态点，同 Badge 组件	`Enum{ 'success', 'processing, 'default', 'error', 'warning' }`	-
valueStyle	设置数值的样式	style	-
description	描述性标签	React.ReactNode \| () => React.ReactNode	-
layout	布局	`horizontal \| vertical \| inline`	`inline`
trend	趋势	`up \| down`	-

更多 API 参考 Statistic，支持 Statistic 的所有 API。

Divider

用于在将数值统计进行分组时进行分隔。

参数	说明	类型	默认值
orientation	分隔类型	`horizontal \| vertical`	-

Operation

用于操作符渲染。

Group

属性同 StatisticCard，会取消卡片内容边距，用于将多个卡片进行分组。

#StatisticCard 指标卡

#何时使用

#代码演示

#基本使用

StatisticCard Props 说明：

Statistic 配置对象属性：

Statistic 子组件 Props：

Chart 区域说明：

使用场景：

#只有图表

StatisticCard Chart Props 说明：

Chart 属性说明：

Img 标签属性：

图表类型支持：

使用场景：

#额外指标

#总分 / 主次关系

StatisticCard ChartPlacement Props 说明：

ChartPlacement 属性说明：

嵌套 Statistic 组件：

响应式布局特点：

布局效果：

使用场景：

最佳实践：

#总分 / 业绩目标

ProCard 复杂布局 Props 说明：

StatisticCard 配置：

StatisticCard.Group 配置：

嵌套 Statistic 组件：

响应式布局特点：

栅格系统说明：

使用场景：

最佳实践：

#分组指标

#分组指标带图表

StatisticCard.Group 图表分组 Props 说明：

StatisticCard 配置：

Divider 配置：

响应式布局特点：

图表展示特点：

使用场景：

最佳实践：

#公式计算指标

StatisticCard Operation Props 说明：

Operation 组件特点：

StatisticCard 配置：

公式展示效果：

使用场景：

最佳实践：

#状态展示

StatisticCard Status Props 说明：

Status 状态说明：

状态显示特点：

Divider 组件：

使用场景：

最佳实践：

#图标展示

StatisticCard Icon Props 说明：

StatisticCard.Group Props：

RcResizeObserver Props：

响应式布局特点：

Icon 使用方式：

使用场景：

#卡片布局

ProCard 嵌套布局 Props 说明：

StatisticCard 嵌套配置：

嵌套 Statistic 组件：

响应式布局特点：

布局结构：

使用场景：

最佳实践：

#图表在右

StatisticCard Horizontal Layout Props 说明：

Statistic 配置：

嵌套 Statistic 组件：

ChartPlacement="right" 特点：

布局效果：

使用场景：

最佳实践：

#图表在左

StatisticCard 指标卡

何时使用

代码演示

基本使用

只有图表

额外指标

总分 / 主次关系

总分 / 业绩目标

分组指标

分组指标带图表

公式计算指标

状态展示

图标展示

卡片布局

图表在右

图表在左

指标页签联动

环比趋势

API

StatisticCard

Statistic

Divider

Operation

Group