← 所有版型

堆叠面积图 <StackedArea />

2–6 层面积叠成总量（或 100%），右端标每层名称与最新值；逐条展开时从底层往上一层层加。

版型與風格的說明目前僅提供簡體中文。

在範例簡報中查看 →

分組: 数据 · 构成随时间变化
元件: 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="太阳能" />