← 全部模板

指标看板 <KpiBoard />

左侧一张深色大卡放北极星指标(大数字和走势线),右侧 4 或 6 张小卡放输入指标,每张有数值、变化、可选走势线或口径说明。

分组
衡量 · 北极星与输入指标
组件
KpiBoard · #kpi-board
交互
卡片依次淡入,走势线从左向右擦出;悬停小卡时抬起。

适合

  • 周会、月报、复盘的核心指标
  • 想表达“一个结果指标由几个输入指标推动”

不适合

  • 只有 1–3 个数字:用 BigStat 或 MetricBars
  • 要比较多个对象的同一指标:用 MetricBars

内容上限

1star 1 个;items 4 或 6 个
2label ≤ 10 字;value ≤ 7 个字符
3delta ≤ 6 个字符,good 决定颜色(不写则中性)
4trend 6–12 个点;没有走势就写 note(≤ 18 字),两者选一个

字段

字段类型
kicker · 必填string标题上方的小节名,2–8 字
title · 必填string | string[]页面标题;传数组可手动断行,每项一行
leadstring一到两句导语,≤ 60 字
sourcestring事实出处;页面上有任何数据或事实时必填
hintReactNode页眉中间的操作提示,可用 <kbd>
star · 必填Kpi北极星指标
items · 必填{ label, value, delta?, good?, trend?, note? }[]输入指标

示例代码

<KpiBoard
  kicker="指标看板"
  title="一个北极星,六个输入指标"
  star={{ label: '每周活跃看板数', value: '1,240', delta: '+18%', good: true, trend: [420, 560, 700, 910, 1240] }}
  items={[
    { label: 'CAC 回收期', value: '16 月', delta: '−2 月', good: true, note: '中型客户目标 < 18 个月' },
    …
  ]}
  source="示意"
/>