← All templates

数字滚轮 <Odometer />

1–3 个大数字，每一位像里程表一样滚到终值；数字下有标签和一行说明。DOM 里始终是真实的终值文字，滚轮只是叠在上面的装饰。

Template and style descriptions are currently available in Chinese only.

See it in the demo deck →

Group
数据 · 1–3 个大数字
Component
Odometer · #odometer
Interaction
每个数字是一个 build 步骤，出现时滚动到终值

Good for

  • 少数几个需要“数出来”的大数字
  • 距离、人数、时长这类量级数字

Avoid when

  • 数字之间要比较大小：用 BarChart
  • 超过 3 个数字：用 StatRow

Content limits

1title ≤ 18 字
2stats 1–3 个：value ≤ 7 个字符，unit ≤ 4 个字符，label ≤ 12 字，note ≤ 28 字

Fields

FieldType
kicker · requiredstring小节名，2–8 字
title · requiredstring | string[]标题
stats · required{ value, unit?, label, note? }[]数字
sourcestring事实出处

Example

<Odometer kicker="三个数字" title="远、久、看的人多" stats={[{ value: '384,400', unit: 'km', label: '地月平均距离' }, …]} />