开发预览更新于 2026-05-10

AreaChart 面积图

面积图，支持堆叠模式与平滑曲线。

基础用法

数据通过 props 传入，纯 SVG 渲染，无第三方图表库依赖。配色取自 --viz-1..8 token，色盲友好。

<CfAreaChart ... />

<CfAreaChart ... />

stacked = true 把 series 累加显示（每条数据值是前面所有 series 的累加值），适合展示组成；默认 false 重叠显示，适合比较趋势。

stacked = false（重叠）

stacked = true

<CfAreaChart :series="series" stacked smooth />

<CfAreaChart series={series} stacked smooth />

属性	类型	默认值	说明
`series`	`AreaSeries[]`	`—`	{ name?, data: number[] }[]
`stacked`	`boolean`	`false`	堆叠模式
`smooth`	`boolean`	`false`	平滑
`width / height / showGrid / showLabels`	“	“	同 LineChart