• Statistic统计数值
    • 何时使用
    • 代码演示
    • API
      • Statistic
      • Statistic.Countdown

    Statistic统计数值

    展示统计数值。

    何时使用

    • 当需要突出某个或某组数字时。

    • 当需要展示带描述的统计类数据时使用。

    代码演示

    Statistic 统计数值 - 图1

    基本

    简单的展示。

    1. import { Statistic, Row, Col, Button } from 'antd';
    2. ReactDOM.render(
    3. <Row gutter={16}>
    4. <Col span={12}>
    5. <Statistic title="Active Users" value={112893} />
    6. </Col>
    7. <Col span={12}>
    8. <Statistic title="Account Balance (CNY)" value={112893} precision={2} />
    9. <Button style={{ marginTop: 16 }} type="primary">
    10. Recharge
    11. </Button>
    12. </Col>
    13. </Row>,
    14. mountNode,
    15. );

    Statistic 统计数值 - 图2

    在卡片中使用

    在卡片中展示统计数值。

    1. import { Statistic, Card, Row, Col, Icon } from 'antd';
    2. ReactDOM.render(
    3. <div style={{ background: '#ECECEC', padding: '30px' }}>
    4. <Row gutter={16}>
    5. <Col span={12}>
    6. <Card>
    7. <Statistic
    8. title="Active"
    9. value={11.28}
    10. precision={2}
    11. valueStyle={{ color: '#3f8600' }}
    12. prefix={<Icon type="arrow-up" />}
    13. suffix="%"
    14. />
    15. </Card>
    16. </Col>
    17. <Col span={12}>
    18. <Card>
    19. <Statistic
    20. title="Idle"
    21. value={9.3}
    22. precision={2}
    23. valueStyle={{ color: '#cf1322' }}
    24. prefix={<Icon type="arrow-down" />}
    25. suffix="%"
    26. />
    27. </Card>
    28. </Col>
    29. </Row>
    30. </div>,
    31. mountNode,
    32. );

    Statistic 统计数值 - 图3

    单位

    通过前缀和后缀添加单位。

    1. import { Statistic, Row, Col, Icon } from 'antd';
    2. ReactDOM.render(
    3. <Row gutter={16}>
    4. <Col span={12}>
    5. <Statistic title="Feedback" value={1128} prefix={<Icon type="like" />} />
    6. </Col>
    7. <Col span={12}>
    8. <Statistic title="Unmerged" value={93} suffix="/ 100" />
    9. </Col>
    10. </Row>,
    11. mountNode,
    12. );

    Statistic 统计数值 - 图4

    倒计时

    倒计时组件。

    1. import { Statistic, Row, Col } from 'antd';
    2. const Countdown = Statistic.Countdown;
    3. const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; // Moment is also OK
    4. function onFinish() {
    5. console.log('finished!');
    6. }
    7. ReactDOM.render(
    8. <Row gutter={16}>
    9. <Col span={12}>
    10. <Countdown title="Countdown" value={deadline} onFinish={onFinish} />
    11. </Col>
    12. <Col span={12}>
    13. <Countdown title="Million Seconds" value={deadline} format="HH:mm:ss:SSS" />
    14. </Col>
    15. <Col span={24} style={{ marginTop: 32 }}>
    16. <Countdown title="Day Level" value={deadline} format="D 天 H 时 m 分 s 秒" />
    17. </Col>
    18. </Row>,
    19. mountNode,
    20. );

    API

    Statistic

    参数说明类型默认值
    decimalSeparator设置小数点string.
    formatter自定义数值展示(value) => ReactNode-
    groupSeparator设置千分位标识符string,
    precision数值精度number-
    prefix设置数值的前缀string | ReactNode-
    suffix设置数值的后缀string | ReactNode-
    title数值的标题string | ReactNode-
    value数值内容string | number-
    valueStyle设置数值的样式style-

    Statistic.Countdown

    参数说明类型默认值
    format格式化倒计时展示,参考 momentstring'HH:mm:ss'
    onFinish倒计时完成时触发() => void-
    prefix设置数值的前缀string | ReactNode-
    suffix设置数值的后缀string | ReactNode-
    title数值的标题string | ReactNode-
    value数值内容number | moment-
    valueStyle设置数值的样式style-