Area Chart 面积图

填充面积，可选堆叠或渐变填充。

基础用法

SAreaChart({ config: config, data: rows, indicator: 'line' })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

堆叠

SAreaChart({ config: devices, data: rows, stacked: true, legend: true })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

渐变

SAreaChart({ config: devices, data: rows, stacked: true, gradient: true })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

坐标轴

SAreaChart({ config: devices, data: rows, curve: 'linear', valueAxis: true })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SAreaChart

shadcn 的「面积图」：填充区域（可选 stacked 堆叠、gradient 渐变填充）。

属性	类型	默认值	说明
config	SparkChartConfig	new SparkChartConfig([])
data	SparkChartRow[]	[]
chartHeight	number	0
curve	SparkChartCurve SparkChartCurve = 'linear' | 'monotone' | 'step'	'monotone'
stacked	boolean	false
gradient	boolean	false	使用垂直渐变填充，而非纯色的 areaOpacity 填充
areaOpacity	number	0.4
dots	boolean	false
lineWidth	number	2
grid	boolean	true
categoryAxis	boolean	true
valueAxis	boolean	false
tooltip	boolean	true
legend	boolean	false
indicator	SparkChartIndicator SparkChartIndicator = 'dot' | 'line' | 'dashed'	'dot'
labelFormatter	(label: string) => string	identityLabel
valueFormatter	(value: number) => string	defaultValue
emptyText	ResourceStr	$r('app.string.spark_no_data')

事件	类型	默认值	说明
onActiveChange	(index: number) => void	() => { }