Bar Chart 柱状图

分组或堆叠的柱形，纵向或横向，带圆角（默认 --radius-md）。

基础用法

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

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

多系列

SBarChart({ config: devices, data: rows, indicator: 'dashed' })

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

堆叠 + 图例

只有堆叠的最外端是圆角。

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

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

横向

SBarChart({ config: config, data: rows, horizontal: true, valueAxis: true })

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

负值

柱形从零线向两个方向生长。

SBarChart({ config: visitors, data: profit, valueAxis: true, barRadius: 4 })

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

交互

切换数据系列时，新的柱形会生长出来。

@Local series: string = 'desktop';

SToggleGroup({ type: 'single', value: [this.series], onValueChange: … }) {
  SToggleGroupItem({ value: 'desktop', text: 'Desktop' })
  SToggleGroupItem({ value: 'mobile', text: 'Mobile' })
}
SBarChart({ config: this.series === 'desktop' ? desktopConfig : mobileConfig, data: rows })

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

API

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

SBarChart

shadcn 的「柱状图」：分组或 stacked 堆叠的柱形，纵向或 horizontal 横向，带圆角（barRadius，默认 --radius-md；堆叠柱形只有最外端是圆角）。

属性	类型	默认值	说明
config	SparkChartConfig	new SparkChartConfig([])
data	SparkChartRow[]	[]
chartHeight	number	0
stacked	boolean	false
horizontal	boolean	false	横向柱形（类目位于纵轴；对应 Recharts 的 layout="vertical"）
barRadius	number	-1	圆角半径，单位 vp；-1 表示使用主题的 radius-md
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	() => { }