- 分组
- 证据 · 同一指标的两种测法
- 组件
Dumbbell·#dumbbell- 交互
- 先出现 a 点，连线从 a 生长到 b，b 点随后弹出。
适合
- 同一指标在两种条件下的值：API 与 App、去年与今年、对照与实验
- 差距本身是论点
不适合
- 只有一种条件：用 MetricBars
- 超过 5 行：拆页或只留最有代表性的几行
内容上限
| 1 | rows 2–5 行：label ≤ 8 字，sub ≤ 14 个字符 |
| 2 | legend 两项各 ≤ 8 字 |
| 3 | max 默认 100；unit 默认 %，差值自动写成“个百分点” |
| 4 | footnote ≤ 60 字 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
legend · 必填 | [string, string] | a 与 b 的名称 |
rows · 必填 | { label, sub?, a, b }[] | 两个测量值 |
max | number | 坐标上限 |
unit | string | 数值单位 |
footnote | string | 图下注释 |
示例代码
<Dumbbell
kicker="在哪里测"
title={['API 测到的，', '不是用户看到的']}
legend={['API 推荐率', 'App 命中率']}
rows={[
{ label: '通义千帆', a: 78, b: 53 },
{ label: '深言', a: 69, b: 1 },
{ label: '青柚', a: 3, b: 99 },
]}
source="示例知识库 · 用提示词抽样测量 AI 可见度"
/>