@ug666/react 文档演示

Statistic 数据统计卡

用于展示核心业务指标，支持前缀、后缀、趋势箭头与变化文案，适合数据看板与分析页面。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Statistic } from '@ug666/react'

今日订单与收入

基础统计卡展示，支持纯数字与带前缀格式。

今日订单

1,234单

总收入

¥98,765.43

活跃用户

8,821人

趋势展示

up 显示绿色上升箭头，down 显示红色下降箭头，flat 显示灰色横线。

本周订单

1,234单

+12.5%

退单率

3.2%

-0.8%

转化率

24.0%

持平

三种尺寸网格展示

sm / default / lg 适应不同密度的卡片布局。

size=sm

日活用户

1,024人

+5%

size=default

日活用户

1,024人

+5%

size=lg

日活用户

1,024人

+5%

代码示例

推荐在数据看板顶部卡片区域使用网格布局排列多个统计指标。

import { Statistic } from '@ug666/react'

export function DashboardStats() {
  return (
    <div className="grid grid-cols-3 gap-6">
      <Statistic title="今日订单" value={1234} suffix="单" trend="up" change="+12.5%" />
      <Statistic title="总收入" value={98765.43} precision={2} prefix="¥" />
      <Statistic title="退单率" value={3.2} precision={1} suffix="%" trend="down" change="-0.8%" />
    </div>
  )
}

Props 说明

属性	类型	默认值	说明
title	ReactNode	—	统计卡片标题。
value	number \| string	必填	统计数值，number 类型会自动格式化。
precision	number	—	小数位数，仅 value 为 number 时生效。
prefix	ReactNode	—	数值前缀，如货币符号。
suffix	ReactNode	—	数值后缀，如单位文字。
trend	'up' \| 'down' \| 'flat'	—	趋势方向，展示对应趋势图标与颜色。
change	string	—	趋势说明文案，如 "+12.5%"。
size	'sm' \| 'default' \| 'lg'	'default'	卡片尺寸，影响字号。