Statistic
Display statistics.
Basic usage To highlight a number or a group of numbers, such as statistical value, amount, and ranking, you can add elements such as icon and unit before and after the number and title. And use vueuse to add animated transitions to value.
Daily active users
268,500
Total Transactions
172,000
export function StatisticBasic() { return ( <ElRow gutter={16}> <ElCol xs={24} sm={12} md={6} style={colStyle}> <ElStatistic title="Daily active users" value={268500} /> </ElCol> <ElCol xs={24} sm={12} md={6} style={colStyle}> <ElStatistic value={138} title={ <div style={{ display: "inline-flex", alignItems: "center" }}> Ratio of men to women <ElIcon size={12} style={{ marginLeft: 4 }}> <Male /> </ElIcon> </div> } suffix="/100" /> </ElCol> <ElCol xs={24} sm={12} md={6} style={colStyle}> <ElStatistic title="Total Transactions" value={172000} /> </ElCol> <ElCol xs={24} sm={12} md={6} style={colStyle}> <ElStatistic title="Feedback number" value={562} suffix={ <ElIcon style={{ verticalAlign: "-0.125em" }}> <ChatLineRound /> </ElIcon> } /> </ElCol> </ElRow> ); } Countdown Countdown component, support to add other components control countdown.
Remaining VIP time
00:00:00
Reset 00 days 00:00:00
2026-11-01
export function StatisticCountdown() { const [value] = useState(() => Date.now() + 1000 * 60 * 60 * 7); const [value1, setValue1] = useState( () => Date.now() + 1000 * 60 * 60 * 24 * 2, ); const [value2] = useState(() => dayjs().add(1, "month").startOf("month")); const reset = () => { setValue1(Date.now() + 1000 * 60 * 60 * 24 * 2); }; return ( <ElRow gutter={16}> <ElCol xs={24} sm={12} md={8} style={colStyle}> <ElCountdown title="Start to grab" value={value} /> </ElCol> <ElCol xs={24} sm={12} md={8} style={colStyle}> <ElCountdown title="Remaining VIP time" format="HH:mm:ss" value={value1} /> <ElButton type="primary" style={footerStyle} onClick={reset}> Reset </ElButton> </ElCol> <ElCol xs={24} sm={12} md={8} style={colStyle}> <ElCountdown format="DD [days] HH:mm:ss" value={value2} title={ <span style={{ display: "inline-flex", alignItems: "center" }}> <ElIcon size={12} style={{ marginRight: "4px" }}> <Calendar /> </ElIcon> Still to go until next month </span> } /> <div style={footerStyle}>{value2.format("YYYY-MM-DD")}</div> </ElCol> </ElRow> ); } In formatting it is suggested to be in the range of days
Card usage Card usage display, can be freely combined
export function StatisticCard() { return ( <div style={{ width: "100%", backgroundColor: "var(--el-fill-color)" }}> <ElRow gutter={16}> <ElCol xs={24} sm={12} md={8} style={cardColStyle}> <div style={cardStyle}> <ElStatistic value={98500} style={statisticStyle} title={cardTitle( "Daily active users", "Number of users who logged into the product in one day", )} /> <div style={statisticFooter}> <div style={footerItem}> <span>than yesterday</span> <span style={{ ...footerValue, color: "var(--el-color-success)" }}> 24% <ElIcon> <CaretTop /> </ElIcon> </span> </div> </div> </div> </ElCol> <ElCol xs={24} sm={12} md={8} style={cardColStyle}> <div style={cardStyle}> <ElStatistic value={693700} style={statisticStyle} title={cardTitle( "Monthly Active Users", "Number of users who logged into the product in one month", )} /> <div style={statisticFooter}> <div style={footerItem}> <span>month on month</span> <span style={{ ...footerValue, color: "var(--el-color-error)" }}> 12% <ElIcon> <CaretBottom /> </ElIcon> </span> </div> </div> </div> </ElCol> <ElCol xs={24} sm={12} md={8} style={cardColStyle}> <div style={cardStyle}> <ElStatistic value={72000} style={statisticStyle} title={ <div style={{ display: "inline-flex", alignItems: "center" }}> New transactions today </div> } /> <div style={statisticFooter}> <div style={footerItem}> <span>than yesterday</span> <span style={{ ...footerValue, color: "var(--el-color-success)" }}> 16% <ElIcon> <CaretTop /> </ElIcon> </span> </div> <div style={footerItem}> <ElIcon size={14}> <ArrowRight /> </ElIcon> </div> </div> </div> </ElCol> </ElRow> </div> ); } Statistic API
Statistic Attributes
Attribute Description Type Default value Numerical content number0 decimal-separator Setting the decimal point string. formatter Custom numerical presentation Function— group-separator Sets the thousandth identifier string, precision numerical precision number0 prefix Sets the prefix of a number string— suffix Sets the suffix of a number string— title Numeric titles string— value-style Styles numeric values stringobject—
Statistic Slots
Name Description prefix Numeric prefix suffix Suffixes for numeric values title Numeric titles
Statistic Exposes
Name Description Type displayValue current display value object
Countdown API
Countdown Attributes
Attribute Description Type Default value target time numberDayjs— format Formatting the countdown display stringHH:mm:ss prefix Sets the prefix of a countdown string— suffix Sets the suffix of a countdown string— title countdown titles string— value-style Styles countdown values stringobject—
Countdown Events
Name Description Type change Time difference change event Functionfinish countdown end event Function
Countdown Slots
Name Description prefix countdown value prefix suffix countdown value suffix title countdown title
Countdown Exposes
Name Description Type displayValue current display value object
