折线图 <LineChart />

1–3 条折线，一条焦点线用强调色并带面积底色和数值标签，最后一个点放大；1–2 条注释挂在线下方，用虚线连到数据点；右栏可写解读。

Template and style descriptions are currently available in Chinese only.

Group: 趋势 · 随时间的变化
Component: LineChart · #line-chart
Interaction: 折线从左向右展开，数据点依次弹出，注释最后淡入。

Good for

4–12 个时间点的变化：版本、年份、季度、月份
要指出某个时间点发生了什么

Avoid when

只有 2–3 个点：用 MetricBars 或 DeltaBars
比较的是同一时刻的不同对象：用 MetricBars
各期之间是加减关系：用 Waterfall

Content limits

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 字

Fields

Field	Type
`kicker` · required	`string`	标题上方的小节名，2–8 字
`title` · required	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`x` · required	`string[]`	横轴标签
`series` · required	`{ name, values, labels?, focus? }[]`	数据系列；values 里 null 表示缺失
`yFrom`	`number`	纵轴起点，默认 0
`unit`	`string`	单位，写在横轴下方
`digits`	`number`	自动标签的小数位
`annotations`	`{ at, text }[]`	注释，at 为横轴序号
`notes`	`{ key, text }[]`	右栏解读

Example

<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 各版本发布公告"
/>