- 分组
- 数据 · 构成随时间变化
- 组件
StackedArea·#stacked-area
适合
- 总量的构成怎样随时间变化
- 某一层在变厚或变薄
不适合
- 只看一两条趋势：用 LineChart
- 只有一个时间点：用 Treemap 或 Donut
内容上限
| 1 | x 4–30 个点，标签 ≤ 6 个字符；多于 12 个时用 ticks 只标一部分 |
| 2 | series 2–6 层，name ≤ 6 字 |
| 3 | unit ≤ 10 字 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
x · 必填 | string[] | 时间点 |
series · 必填 | { name, values }[] | 从下到上 |
mode | 'value' | 'share' | share 按 100% 堆叠 |
ticks | number[] | 要标注的 x 下标 |
unit | string | 单位说明 |
focus | string | 强调色的层 |
示例代码
<StackedArea kicker="结构" title="…" x={years} series={[{ name: '煤电', values: […] }, …]} mode="share" focus="太阳能" />