- 分组
- 趋势 · 随时间的变化
- 组件
LineChart·#line-chart- 交互
- 折线从左向右展开，数据点依次弹出，注释最后淡入。
适合
- 4–12 个时间点的变化：版本、年份、季度、月份
- 要指出某个时间点发生了什么
不适合
- 只有 2–3 个点：用 MetricBars 或 DeltaBars
- 比较的是同一时刻的不同对象：用 MetricBars
- 各期之间是加减关系：用 Waterfall
内容上限
| 1 | x 4–12 个标签，每个 ≤ 6 个字符 |
| 2 | series 1–3 条，且只有一条 focus；近似值用 labels 照原文写，如 43,000+ |
| 3 | annotations ≤ 2 条，text ≤ 16 字，不要放在最后一个点上 |
| 4 | yFrom 默认 0；抬高坐标起点要在 lead 里说明 |
| 5 | notes 2–3 条：key ≤ 8 字，text ≤ 30 字 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
x · 必填 | string[] | 横轴标签 |
series · 必填 | { name, values, labels?, focus? }[] | 数据系列；values 里 null 表示缺失 |
yFrom | number | 纵轴起点，默认 0 |
unit | string | 单位，写在横轴下方 |
digits | number | 自动标签的小数位 |
annotations | { at, text }[] | 注释，at 为横轴序号 |
notes | { key, text }[] | 右栏解读 |
示例代码
<LineChart
kicker="十年"
title="十年，软件包多了约六成"
x={['2015', '2017', '2019', '2021', '2023', '2025']}
series={[{ name: '软件包总数', focus: true, values: [43000, 51000, 59000, 59551, 64419, 69830], labels: ['43,000+', '51,000+', '59,000+'] }]}
unit="个"
annotations={[{ at: 1, text: '8–10 公告只给约数' }]}
source="Lumen 各版本发布公告"
/>