Chart

以 Recharts 绘制、采用 zzzUI 配色的图表：坐标轴与网格线为暗色，提示框是一块小面板，所有色块均为斜切小块。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/chart

示例

一周内承接的委托

chart-week.tsx

import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";import {  type ChartConfig,  ChartContainer,  ChartLegend,  ChartLegendContent,  ChartTooltip,  ChartTooltipContent,  chartMotion,} from "@/components/zero/chart";const week = [  { day: "Mon", rush: 4, regular: 9 },  { day: "Tue", rush: 6, regular: 7 },  { day: "Wed", rush: 3, regular: 11 },  { day: "Thu", rush: 8, regular: 6 },  { day: "Fri", rush: 9, regular: 10 },  { day: "Sat", rush: 5, regular: 4 },  { day: "Sun", rush: 2, regular: 3 },];const config = {  rush: { label: "Rush", color: "var(--zero-chart-1)" },  regular: { label: "Regular", color: "var(--zero-chart-3)" },} satisfies ChartConfig;export default function ChartWeek() {  return (    <ChartContainer config={config} className="w-full max-w-lg">      <BarChart data={week} accessibilityLayer>        <CartesianGrid vertical={false} />        <XAxis dataKey="day" tickLine={false} axisLine={false} tickMargin={8} />        <ChartTooltip content={<ChartTooltipContent />} cursor />        <ChartLegend content={<ChartLegendContent />} />        <Bar          dataKey="rush"          fill="var(--color-rush)"          stackId="jobs"          {...chartMotion}        />        <Bar          dataKey="regular"          fill="var(--color-regular)"          stackId="jobs"          {...chartMotion}        />      </BarChart>    </ChartContainer>  );}

行为

ChartContainer 在 config 中为各数据系列命名，并以 --color-<key> 的形式提供各系列的颜色，供图表各部分使用。组件自带五种系列色，均取自设计 token：--zero-chart-1 为强调色，2 为文字的白色，3 为次要文字的灰，4 为危险红，5 为按下状态的强调色。

图表本体用 Recharts 自带的组件搭建（BarChart、LineChart、XAxis……）；ChartTooltipContent 与 ChartLegendContent 为提示框和图例套用 zzzUI 的外观。

图表首次进入视野时才开始绘制，因此读者能看到数据标记增长的全过程。在每个数据系列上展开 chartMotion（<Bar {...chartMotion} />）即可采用 zzzUI 的动效：无延迟，时长 --zero-dur-draw，使用入场缓动。开启「减少动态效果」时直接显示完整图表。

现成的各类图表都在图表栏目中，每个都可单独安装。

属性

ChartContainer

属性	类型	默认值	说明
config	ChartConfig	—	各数据系列的名称、颜色与可选图标。

ChartTooltipContent

属性	类型	默认值	说明
indicator	"block" \| "line"	"block"	每行旁边色块的样式。
hideLabel / hideIndicator	boolean	false	隐藏标题或色块。
labelKey / nameKey	string	—	以 config 中对应条目的名称作为标题或各行的名称，代替数据的键名。
labelFormatter / formatter	function	—	自行生成标题文字或绘制每一行，函数签名与 Recharts 相同。

ChartLegendContent

属性	类型	默认值	说明
hideIcon	boolean	false	系列带图标时也改用色块。

ChartSwatch

属性	类型	默认值	说明
color	string	—	数据系列的颜色，用于自行绘制的行。
line	boolean	false	改为细长的竖条，而非色块。