Radial Chart 径向图

同心的径向条，可选轨道与中心标签。

基础用法

SRadialChart({ config: browsers, data: rows, valueKey: 'visitors' })

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

文字

SRadialChart({
  config: browsers, data: [new SparkChartRow('safari', { 'visitors': 200 })], valueKey: 'visitors',
  maxValue: 280, endAngle: 250, innerRatio: 0.7, centerValue: '200', centerLabel: 'Visitors'
})

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

形状

部分扫角、方形端点、无轨道。

SRadialChart({ config: browsers, data: rows, valueKey: 'visitors', endAngle: 270, rounded: false, track: false })

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

API

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

SRadialChart

shadcn 的「径向图」：每个数据行对应一个同心圆弧（第一行在最内层；行标签即 config 中的键），其扫过的角度与 valueKey / maxValue 成正比，范围从 startAngle 到 endAngle（单位为度，0 指向 12 点钟方向，顺时针）。可选弱化的底轨、圆角端点和中央标签。圆弧在出现时扫入。

属性	类型	默认值	说明
config	SparkChartConfig	new SparkChartConfig([])
data	SparkChartRow[]	[]
valueKey	string	'value'
startAngle	number	0
endAngle	number	360
maxValue	number	0	填满整个圆环的数值；0 表示使用最大值
innerRatio	number	0.3	内半径占外半径的比例
ringGap	number	4	圆环之间的间隔，单位 vp
track	boolean	true
rounded	boolean	true
chartHeight	number	250
centerValue	string	''
centerLabel	string	''
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	() => { }