统计数值 Statistic

基本单位在卡片中使用倒计时APIStatistic统计数值展示统计数值。

何时使用#当需要突出某个或某组数字时。

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

代码演示Active Users112,893Account Balance (CNY)112,893.00RechargeActive Users基本简单的展示。

TypeScriptJavaScriptimport { Button, Col, Row, Statistic } from 'antd';

import React from 'react';

const App: React.FC = () => (

Recharge

);

export default App;Active11.28%Idle9.30%在卡片中使用在卡片中展示统计数值。

TypeScriptJavaScriptimport { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';

import { Card, Col, Row, Statistic } from 'antd';

import React from 'react';

const App: React.FC = () => (

);

export default App;.site-statistic-demo-card {

padding: 30px;

background: #ececec;

}Feedback1,128Unmerged93/ 100单位通过前缀和后缀添加单位。

TypeScriptJavaScriptimport { LikeOutlined } from '@ant-design/icons';

import { Col, Row, Statistic } from 'antd';

import React from 'react';

const App: React.FC = () => (

} />

);

export default App;Countdown48:00:29Million Seconds48:00:29:999Day Level2 天 0 时 0 分 29 秒Countdown00:00:10倒计时倒计时组件。

TypeScriptJavaScriptimport { Col, Row, Statistic } from 'antd';

import type { countdownValueType } from 'antd/es/statistic/utils';

import React from 'react';

const { Countdown } = Statistic;

const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; // Moment is also OK

const App: React.FC = () => {

const onFinish = () => {

console.log('finished!');

};

const onChange = (val: countdownValueType) => {

if (4.95 * 1000 < val && val < 5 * 1000) {

console.log('changed!');

}

};

return (

);

};

export default App;API#Statistic#参数说明类型默认值版本decimalSeparator设置小数点string.formatter自定义数值展示(value) => ReactNode-groupSeparator设置千分位标识符string,loading数值是否加载中booleanfalse4.8.0precision数值精度number-prefix设置数值的前缀ReactNode-suffix设置数值的后缀ReactNode-title数值的标题ReactNode-value数值内容string | number-valueStyle设置数值区域的样式CSSProperties-Statistic.Countdown#参数说明类型默认值版本format格式化倒计时展示，参考 momentstringHH:mm:ssprefix设置数值的前缀ReactNode-suffix设置数值的后缀ReactNode-title数值的标题ReactNode-value数值内容number | moment-valueStyle设置数值区域的样式CSSProperties-onFinish倒计时完成时触发() => void-onChange倒计时时间变化时触发(value: number) => void-4.16.0