Chart 图表

用 ArkUI Path 原生绘制的精美图表，使用 chart-1…5 Token 着色。用 SparkChartConfig 描述一次数据系列；每个图表都会测量自身宽度、自动稀疏标签、以动效 key "chart" 入场，并在悬停、点按或横向拖动时显示 shadcn 风格的提示框。

基础用法

// 1. describe the series (shadcn ChartConfig)
const config = new SparkChartConfig([
  new SparkChartSeries('desktop', 'Desktop', 'chart-1'),
  new SparkChartSeries('mobile', 'Mobile', 'chart-2')
]);
// 2. rows: a category label + a value per series key
const data: SparkChartRow[] = [
  new SparkChartRow('January', { 'desktop': 186, 'mobile': 80 }),
  new SparkChartRow('February', { 'desktop': 305, 'mobile': 200 }),
  // …
];

// 3. draw — the container shares legend toggles with the chart
SChartContainer({ config: config, legend: true }) {
  SBarChart({ config: config, data: this.data, labelFormatter: (s: string) => s.substring(0, 3) })
}

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

响应式

没有断点：直角坐标图默认采用自身宽度的 16:9 区域（160–320vp），跳过会重叠的类目标签，并根据高度调整数值刻度的数量。

迷你走势图

用于统计卡片和表格单元格的小型内联走势。

SSparkline({ values: [12, 18, 15, 22, 19, 28, 26], color: 'chart-1' })
SSparkline({ values: [30, 26, 27, 21, 23, 18, 15], color: 'destructive', curve: 'linear' })

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

空状态

SChartContainer({ empty }) 显示一个弱化的占位。

SChartContainer({ config: config, empty: rows.length === 0, emptyText: 'No data for this period' }) {
  SAreaChart({ config: config, data: rows })
}

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

API

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

SChartContainer

shadcn 的 ChartContainer：围绕一个或多个图表的卡片式外框。与其中的图表共享数据系列的显示状态（SparkContext），并渲染图例（legend，点击即可切换）以及空状态。它会测量自身宽度：容器较窄时图例会收紧。

属性	类型	默认值	说明
config	SparkChartConfig	new SparkChartConfig([])
legend	boolean	false
legendPlacement	SparkChartLegendPlacement SparkChartLegendPlacement = 'top' | 'bottom'	'bottom'
legendToggle	boolean	true	图例项切换其数据系列
empty	boolean	false	显示空状态，而不是内容
emptyText	ResourceStr	$r('app.string.spark_no_data')
emptyHeight	number	200

插槽: 子组件（尾随闭包）

SChartLegend

shadcn 的 ChartLegend + ChartLegendContent：居中、可换行的色块图例。设置 interactive 后，点击某一项即可隐藏 / 显示对应的数据系列（通过 state 共享）。

属性	类型	默认值	说明
config	SparkChartConfig	new SparkChartConfig([])
state	SparkChartState | undefined	undefined
keys	string[] | undefined	undefined	需要列出的键（默认：配置中的每个数据系列）；饼图传入其扇区的键
interactive	boolean	true
compact	boolean	false

SChartTooltipCard

shadcn 的 ChartTooltipContent：标签 + 每个数据系列一行（指示器、名称、数值）。

属性	类型	默认值	说明
title	string	''
items	SparkChartTooltipItem[]	[]
indicator	SparkChartIndicator SparkChartIndicator = 'dot' | 'line' | 'dashed'	'dot'

SChartEmpty

弱化的「无数据」区块。

属性	类型	默认值	说明
text	ResourceStr	$r('app.string.spark_no_data')
boxHeight	number	200

SSparkline

微型内联趋势线（无坐标轴、无提示框）——例如放在统计卡片或表格单元格内。填满所获得的宽度；数值范围取数据的实际范围（不会强制经过 0）。与其他图表一样带入场绘制动画。

属性	类型	默认值	说明
values	number[]	[]
color	string	'chart-1'	令牌名称（'chart-1'、'primary' 等）或 '#hex'
filled	boolean	true
curve	SparkChartCurve SparkChartCurve = 'linear' | 'monotone' | 'step'	'monotone'
chartHeight	number	32
lineWidth	number	1.5
endDot	boolean	false	最后一个数值处的圆点