Pie Chart 饼图

饼图与环形图。扇区以扫掠方式入场，悬停 / 点按的扇区会放大，图例可以切换扇区。

基础用法

// row label = slice key in the config (label + colour)
SPieChart({ config: browsers, data: rows, valueKey: 'visitors' })

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

带文字的环形图

SDonutChart({ config: browsers, data: rows, valueKey: 'visitors', centerValue: '1,125', centerLabel: 'Visitors' })

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

分离 + 图例

SPieChart({ config: browsers, data: rows, valueKey: 'visitors', padAngle: 2, legend: true })

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

API

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

SPieChart

shadcn 的「饼图」/「环形图」：每个数据行对应一个扇区（行标签即 config 中的扇区键，它决定标签与颜色），大小由 valueKey 决定。扇区在出现时扫入，数据或图例变化时变形。点按 / 悬停扇区可显示其提示框；选中的扇区会放大（activeGrow）。

属性	类型	默认值	说明
config	SparkChartConfig	new SparkChartConfig([])
data	SparkChartRow[]	[]
valueKey	string	'value'	用作扇区大小的数据行数值
innerRatio	number	0	内半径占外半径的比例（0 为饼图，约 0.6 为环形图）
padAngle	number	0	扇区之间的间隔，单位为度
chartHeight	number	250	最大直径，单位 vp（图表为正方形，且永远不会宽于其容器）
centerValue	string	''	环形图中央的大号文字（例如总计）
centerLabel	string	''
activeGrow	boolean	true
tooltip	boolean	true
legend	boolean	false
indicator	SparkChartIndicator SparkChartIndicator = 'dot' | 'line' | 'dashed'	'dot'
valueFormatter	(value: number) => string	defaultValue
emptyText	ResourceStr	$r('app.string.spark_no_data')

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

SDonutChart

中空的 SPieChart（innerRatio 为 0.6），并可选中央标签（shadcn 的「饼图 - 环形文字」）。

属性	类型	默认值	说明
config	SparkChartConfig	new SparkChartConfig([])
data	SparkChartRow[]	[]
valueKey	string	'value'
innerRatio	number	0.6
padAngle	number	0
chartHeight	number	250
centerValue	string	''
centerLabel	string	''
activeGrow	boolean	true
tooltip	boolean	true
legend	boolean	false
indicator	SparkChartIndicator SparkChartIndicator = 'dot' | 'line' | 'dashed'	'dot'
valueFormatter	(value: number) => string	defaultValue
emptyText	ResourceStr	$r('app.string.spark_no_data')

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