堆叠面积图 <StackedArea />
2–6 层面积叠成总量（或 100%），右端标每层名称与最新值；逐条展开时从底层往上一层层加。
Template and style descriptions are currently available in Chinese only.
- Group
- 数据 · 构成随时间变化
- Component
StackedArea·#stacked-area
Good for
- 总量的构成怎样随时间变化
- 某一层在变厚或变薄
Avoid when
- 只看一两条趋势：用 LineChart
- 只有一个时间点：用 Treemap 或 Donut
Content limits
| 1 | x 4–30 个点，标签 ≤ 6 个字符；多于 12 个时用 ticks 只标一部分 |
| 2 | series 2–6 层，name ≤ 6 字 |
| 3 | unit ≤ 10 字 |
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 }[] | 从下到上 |
mode | 'value' | 'share' | share 按 100% 堆叠 |
ticks | number[] | 要标注的 x 下标 |
unit | string | 单位说明 |
focus | string | 强调色的层 |
Example
<StackedArea kicker="结构" title="…" x={years} series={[{ name: '煤电', values: […] }, …]} mode="share" focus="太阳能" />