Chart
chart图表 · recharts 直裹 + chart token 皮肤(Area/Bar)
用法
面积图
data + series + xKey 三件套；多序列叠加，色彩走 chart token 自适应明暗。
tsx
<AreaChart
data={data}
series={[{ key: "revenue", label: "营收(千元)" }, { key: "orders", label: "订单" }]}
xKey="month"
/>折线 / 柱状
同一份数据可换 LineChart / BarChart 渲染。
tsx
<>
<LineChart data={data} series={series} xKey="month" />
<BarChart data={data} series={series} xKey="month" />
</>堆叠
stacked 让多序列堆叠（Area/Bar 生效）。
tsx
<BarChart data={data} series={series} xKey="month" stacked />饼图 / 环形
扁平 {name,value} 数据；donut 中心挖空。
tsx
<>
<PieChart data={[{ name: "搜索", value: 420 }, { name: "直接", value: 280 }]} />
<PieChart donut data={[{ name: "搜索", value: 420 }, { name: "直接", value: 280 }]} />
</>雷达图
多维能力对比，xKey 为维度字段，多序列叠加。
tsx
<RadarChart
data={radarData}
series={[{ key: "当前" }, { key: "基准" }]}
xKey="dim"
/>何时用
仪表盘里画趋势/分布/对比图（面积、柱、线、饼、环、雷达、径向），自动套瑚琏 chart token 配色。要展示单个 KPI 数字用 Stat/Statistic；要轻量内联趋势走 [Sparkline]；本组件是完整的多序列坐标图，基于 recharts。
导入
ts
import { AreaChart, BarChart, LineChart, PieChart, RadarChart, RadialChart, chartColor } from "@hulianui/ui"Props
AreaChart / BarChart / LineChart / RadarChart（笛卡尔类）
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| data* | TDatum[] | — | 行数据数组 |
| series* | ChartSeries[] | — | 序列定义 { key, label?, color? }；color 缺省按 index 取 var(--color-chart-N)，可传语义色名/CSS 颜色覆盖 |
| xKey* | string | — | 横轴字段名 |
| height | number | 280 | 高度（SSR 安全：宽走 ResponsiveContainer，高需显式值） |
| stacked | boolean | false | 多序列堆叠（Area/Bar 生效） |
| horizontal | boolean | false | BarChart 专属：横向柱状 |
| className | string | — | 透传类名（宽度在此设，如 w-[32rem]） |
PieChart / RadialChart（扁平数据类）
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| data* | ChartDatum[] | — | 扁平数据点 { name, value, color? } |
| donut | boolean | false | PieChart：环形图（中心挖空） |
| height | number | 280 | 高度 |
| className | string | — | 透传类名 |
禁忌 / 坑
- 宽度交给父容器 / className，高度必须显式（
height默认 280）——宽走 ResponsiveContainer 但高拿不到会塌成 0。 - 在收缩的 flex 容器里 ResponsiveContainer 可能量不到宽，需给容器显式宽度，见 [[recharts-responsive-container-needs-explicit-width-in-shrink-flex]]。
- headless 截图常出现「只剩坐标轴、数据区空白」——不是 bug，是入场动画的 clipPath 被 rAF 饿死，设
prefers-reduced-motion: reduce再截即显，见 [[recharts-headless-screenshot-blank-clippath-animation-starved]]。
相关
Stat · Statistic · Meter · Timeline · NumberTicker · WorldMap
Playground
<AreaChart data={series} series={[{ key: "revenue" }, { key: "orders" }]} xKey="month" />