Chart

chart

图表 · recharts 直裹 + chart token 皮肤(Area/Bar) + horizontal 类目轴 CJK 自适应宽(yAxisWidth 逃生舱)

用法

面积图

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" />
</>

图例

多序列图不给图例，读者无从知道哪条线是哪条序列。legend 开一行色点（走 Dot 的 color，与序列色同源）；"top" / "bottom" 选位置。height 仍是组件总高——画布相应变矮，不会把总高撑高。

营收(千元)订单

tsx

<AreaChart data={data} series={series} xKey="month" legend />

堆叠

stacked 让多序列堆叠（Area/Bar 生效）。

tsx

<BarChart data={data} series={series} xKey="month" stacked />

横向柱状（CJK 类目自适应轴宽）

horizontal 把类目移到 Y 轴，轴宽默认按最长标签自适应（CJK 全角估宽，48–160px），不再截断中文；要精确控制传 yAxisWidth。

tsx

<BarChart
  horizontal
  data={[
    { stage: "音频解码", p50: 105 },
    { stage: "ASR识别", p50: 620 },
    { stage: "LLM首句", p50: 890 },
    { stage: "TTS首音", p50: 760 },
  ]}
  xKey="stage"
  series={[{ key: "p50", label: "P50 耗时(ms)" }]}
/>

饼图 / 环形

扁平 {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。

导入

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 生效）
legend	`boolean \| "top" \| "bottom"`	`false`（Radar 为 `true`）	序列图例（色点 + `label`）。`true` 等价 `"bottom"`，`false` 关掉。色点走 Dot 的 `color`，与序列色同源。默认值按图种分两档：笛卡尔三件默认关，Radar 默认开（历来自带图例，保持零改动）
legendScroll	`boolean`	`false`	图例恒为单行 + 横向滚动（对齐 echarts `legend.type: "scroll"`）。缺省是换行居中，序列一多就堆成多行挤扁画布；序列 >8 条开这个
horizontal	`boolean`	`false`	BarChart 专属：横向柱状
yAxisWidth	`number`	自适应	BarChart 专属：horizontal 类目轴宽 px；默认按最长标签自适应（CJK 全角估宽·48–160，纯函数 `categoryAxisWidth` 可测），超长标签或精确控制时显式传
radiusAxis	`boolean`	`true`	RadarChart 专属：半径轴的刻度数字（`0 15 30 …`）。传 `false` 只留环线与角轴名，即 echarts radar 的默认形态（它的 `axisLabel.show` 默认就是 `false`）。如果你的雷达图序列较多或数据填得满，建议关掉——见下方注意事项
className	`string`	—	透传类名（宽度在此设，如 `w-[32rem]`）

PieChart / RadialChart（扁平数据类）

名称	类型	默认	说明
data*	`ChartDatum[]`	—	扁平数据点 `{ name, value, color? }`
donut	`boolean`	`false`	PieChart：环形图（中心挖空）
height	`number`	`280`	高度
legend	`boolean \| "top" \| "bottom"`	`true`	图例（色点 + `data[].name`），语义同上但默认开（这两件历来自带图例）。传 `false` 关掉——自绘图例时必须关，否则两份图例并排
legendScroll	`boolean`	`false`	同上：图例恒为单行 + 横向滚动
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]]。
horizontal 类目轴宽自适应有 160px 上限（防超长标签吃掉图区）——类目 >12 个全角字仍会截断，此时消费侧截短标签或显式传 yAxisWidth。
legend 开启后 height 仍是组件总高：图例占一行，画布相应变矮，不会把总高撑高。序列多到换行时图例会堆成多行、继续挤压画布——这时候不要靠调大 `height` 硬扛（28 条序列的图例是 5 行，把雷达盘撑回可读尺寸得把总高翻倍），开 legendScroll 让图例恒为单行横滚。
极坐标三件（Pie/Radar/Radial）的 legend 默认是 `true`，与笛卡尔三件相反——它们历来自带图例，改默认会破坏存量版式。自绘图例前先 legend={false}，否则两份图例并排。
自绘图例时色点用 <Dot color={...} />，不要写 <Dot style={{ color }} />——那是静默失效（圆点是背景色），见 Dot 的坑。
RadarChart 的半径轴刻度（radiusAxis，默认开）画在数据区里而不是外面：刻度锚点沿一条水平半径均匀排开，正好从雷达盘中心穿到边缘，而且每个数字被 recharts 旋转 90° 竖排。序列一多、数据填得满，前几个刻度就整个落在数据多边形内部，既压住图形又难读。这一条看版式是发现不了「选错了」的——图能正常渲染，只是糊在一起。多序列雷达图建议直接 radiusAxis={false}：雷达图读的是形状对比，精确取值有 tooltip。

Playground

图表类型

<AreaChart data={series} series={[{ key: "revenue" }, { key: "orders" }]} xKey="month" />

用法

面积图

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" />
</>

图例

营收(千元)订单

tsx

<AreaChart data={data} series={series} xKey="month" legend />

堆叠

stacked 让多序列堆叠（Area/Bar 生效）。

tsx

<BarChart data={data} series={series} xKey="month" stacked />

横向柱状（CJK 类目自适应轴宽）

horizontal 把类目移到 Y 轴，轴宽默认按最长标签自适应（CJK 全角估宽，48–160px），不再截断中文；要精确控制传 yAxisWidth。

tsx

<BarChart
  horizontal
  data={[
    { stage: "音频解码", p50: 105 },
    { stage: "ASR识别", p50: 620 },
    { stage: "LLM首句", p50: 890 },
    { stage: "TTS首音", p50: 760 },
  ]}
  xKey="stage"
  series={[{ key: "p50", label: "P50 耗时(ms)" }]}
/>

饼图 / 环形

扁平 {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"
/>

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 生效）
legend	`boolean \| "top" \| "bottom"`	`false`（Radar 为 `true`）	序列图例（色点 + `label`）。`true` 等价 `"bottom"`，`false` 关掉。色点走 Dot 的 `color`，与序列色同源。默认值按图种分两档：笛卡尔三件默认关，Radar 默认开（历来自带图例，保持零改动）
legendScroll	`boolean`	`false`	图例恒为单行 + 横向滚动（对齐 echarts `legend.type: "scroll"`）。缺省是换行居中，序列一多就堆成多行挤扁画布；序列 >8 条开这个
horizontal	`boolean`	`false`	BarChart 专属：横向柱状
yAxisWidth	`number`	自适应	BarChart 专属：horizontal 类目轴宽 px；默认按最长标签自适应（CJK 全角估宽·48–160，纯函数 `categoryAxisWidth` 可测），超长标签或精确控制时显式传
radiusAxis	`boolean`	`true`	RadarChart 专属：半径轴的刻度数字（`0 15 30 …`）。传 `false` 只留环线与角轴名，即 echarts radar 的默认形态（它的 `axisLabel.show` 默认就是 `false`）。如果你的雷达图序列较多或数据填得满，建议关掉——见下方注意事项
className	`string`	—	透传类名（宽度在此设，如 `w-[32rem]`）

PieChart / RadialChart（扁平数据类）

名称	类型	默认	说明
data*	`ChartDatum[]`	—	扁平数据点 `{ name, value, color? }`
donut	`boolean`	`false`	PieChart：环形图（中心挖空）
height	`number`	`280`	高度
legend	`boolean \| "top" \| "bottom"`	`true`	图例（色点 + `data[].name`），语义同上但默认开（这两件历来自带图例）。传 `false` 关掉——自绘图例时必须关，否则两份图例并排
legendScroll	`boolean`	`false`	同上：图例恒为单行 + 横向滚动
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]]。

horizontal 类目轴宽自适应有 160px 上限（防超长标签吃掉图区）——类目 >12 个全角字仍会截断，此时消费侧截短标签或显式传 yAxisWidth。

legend 开启后 height 仍是组件总高：图例占一行，画布相应变矮，不会把总高撑高。序列多到换行时图例会堆成多行、继续挤压画布——这时候不要靠调大 `height` 硬扛（28 条序列的图例是 5 行，把雷达盘撑回可读尺寸得把总高翻倍），开 legendScroll 让图例恒为单行横滚。

极坐标三件（Pie/Radar/Radial）的 legend 默认是 `true`，与笛卡尔三件相反——它们历来自带图例，改默认会破坏存量版式。自绘图例前先 legend={false}，否则两份图例并排。

自绘图例时色点用 <Dot color={...} />，不要写 <Dot style={{ color }} />——那是静默失效（圆点是背景色），见 Dot 的坑。

RadarChart 的半径轴刻度（radiusAxis，默认开）画在数据区里而不是外面：刻度锚点沿一条水平半径均匀排开，正好从雷达盘中心穿到边缘，而且每个数字被 recharts 旋转 90° 竖排。序列一多、数据填得满，前几个刻度就整个落在数据多边形内部，既压住图形又难读。这一条看版式是发现不了「选错了」的——图能正常渲染，只是糊在一起。多序列雷达图建议直接 radiusAxis={false}：雷达图读的是形状对比，精确取值有 tooltip。

Chart

用法

面积图

折线 / 柱状

图例

堆叠

横向柱状（CJK 类目自适应轴宽）

饼图 / 环形

雷达图

何时用

导入

Props

AreaChart / BarChart / LineChart / RadarChart（笛卡尔类）

PieChart / RadialChart（扁平数据类）

禁忌 / 坑

相关

Playground

Chart

用法

面积图

折线 / 柱状

图例

堆叠

横向柱状（CJK 类目自适应轴宽）

饼图 / 环形

雷达图

何时用

导入

Props

AreaChart / BarChart / LineChart / RadarChart（笛卡尔类）

PieChart / RadialChart（扁平数据类）

禁忌 / 坑

相关

Playground