Line Chart 折线图

按类目展示趋势；支持平滑（"natural"）、直线或阶梯曲线。

基础用法

SLineChart({ config: config, data: rows, labelFormatter: (s: string) => s.substring(0, 3) })

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

直线 + 数据点

SLineChart({ config: config, data: rows, curve: 'linear', dots: true })

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

阶梯

SLineChart({ config: config, data: rows, curve: 'step' })

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

多系列

多个系列、数值轴与图例（点按切换）。

SLineChart({ config: devices, data: rows, valueAxis: true, legend: true, dots: true })

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

API

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

SLineChart

shadcn 的「折线图」：config 的每个数据系列对应一条线，类目取自 data 的各行。

悬停（指针）、点按或水平拖动即可显示十字准线与提示框。

属性	类型	默认值	说明
config	SparkChartConfig	new SparkChartConfig([])
data	SparkChartRow[]	[]
chartHeight	number	0	高度，单位 vp；0 表示根据测得的宽度采用响应式 16:9（160–320）
curve	SparkChartCurve SparkChartCurve = 'linear' | 'monotone' | 'step'	'monotone'	'monotone'（shadcn 的「natural」）、'linear' 或 'step'
dots	boolean	false
lineWidth	number	2
grid	boolean	true
categoryAxis	boolean	true	类目标签（x 轴）
valueAxis	boolean	false	数值刻度（y 轴）
tooltip	boolean	true
legend	boolean	false
indicator	SparkChartIndicator SparkChartIndicator = 'dot' | 'line' | 'dashed'	'line'
labelFormatter	(label: string) => string	identityLabel
valueFormatter	(value: number) => string	defaultValue
emptyText	ResourceStr	$r('app.string.spark_no_data')

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