Statistic 統計數值

儀表板上的關鍵指標數字。使用 Element Plus 的 el-statistic 與 el-countdown。

設計準則

• 用於儀表板、總覽頁的關鍵指標(KPI):一排 3–4 個,不要十幾個擠在一起
• 千分位由元件自動處理;小數位數用 precision 統一(同一排指標位數要一致)
• 單位放 suffix(%、元、封),趨勢箭頭放 prefix 並跟語意色(升 success / 降 danger,注意「降」不一定是壞事,語意看指標)
• 倒數計時(el-countdown)用於活動開始/結束這類有明確截止時間的場景

基本用法

loading

前綴與後綴

loading

倒數計時

loading

倒數計時搭配按鈕

倒數旁放動作按鈕,讓使用者不必等(立即同步、立即發送);按了之後倒數重新計算:

loading

統計卡片

儀表板 KPI 的標準版型:卡片(shadow="never")+ 數值 + 分隔線 + 趨勢; 趨勢色看指標語意,不是一律綠漲紅跌:

loading

Do / Don't

✅ Do	❌ Don't
一排 3–4 個關鍵指標	十幾個數字牆
同排小數位數一致	38.6% 旁邊放 42%
趨勢色看指標語意	退訂率上升也給綠色

給工程師

完整 API 見 Element Plus Statistic 文件。 本站規範優先於 EP 文件中的視覺建議。