Statistic 指标
EwStatistic 展示关键数字:用户量、可用性、评分等。数值用强字重展示体并带 等宽数字(tabular-nums),多值并排时构成页面中最有说服力的一行。
基础用法
并排数据位
120K+
注册用户
99.99%
服务可用性
4.9
应用商店评分
vue
<EwStatistic value="120K+" label="注册用户" align="center" />
<EwStatistic value="99.99%" label="服务可用性" align="center" />数字滚动
animated 入视口滚动
数值进入视口时从 0 缓动滚到目标值(easeOutExpo:起步迅猛收尾徐缓);自动解析前后缀。点「重新播放」复现。
1,200+
周下载
99.99%
可用性
¥68
客单价
vue
<EwStatistic value="1,200+" label="周下载" align="center" animated :duration="1600" />场景建议
数字位通常出现在定价区上方或页脚之前,搭配 EwLogoCloud 构成完整的信任背书段落。 更多动效见动效指南。
API
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 数值 | string / number | — |
| label | 标签 | string | — |
| align | 对齐 | 'left' | 'center' | 'left' |
| animated | 进入视口时数字从 0 滚动到目标值 | boolean | false |
| duration | 滚动时长 ms | number | 1200 |
插槽
| 插槽 | 说明 |
|---|---|
| value | 数值覆写(如追加动画计数) |
| label | 标签覆写 |