Chart Topic
Bar Chart
Sat Mar 14 2026
用于类别比较的基础图表类型，适合做排行榜、渠道对比和维度之间的绝对值比较。
为什么先做它
柱状图几乎是所有业务图表里最稳的起点。它不需要用户学习额外的阅读方式，只要看高度，就能理解差异。
"use client";import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis,} from "recharts";import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig,} from "@/components/ui/chart";const data = [ { month: "Jan", desktop: 182, mobile: 124 }, { month: "Feb", desktop: 198, mobile: 142 }, { month: "Mar", desktop: 236, mobile: 168 }, { month: "Apr", desktop: 228, mobile: 174 }, { month: "May", desktop: 264, mobile: 193 },];const chartConfig = { desktop: { label: "Desktop", color: "var(--new-home-accent-2)", }, mobile: { label: "Mobile", color: "var(--new-home-accent-4)", },} satisfies ChartConfig;export function BarChartDemo() { return ( <ChartContainer config={chartConfig} className="min-h-[320px] w-full"> <BarChart data={data} margin={{ top: 18, right: 12, left: -12 }}> <CartesianGrid vertical={false} strokeDasharray="3 3" /> <XAxis dataKey="month" tickLine={false} axisLine={false} /> <YAxis tickLine={false} axisLine={false} width={36} /> <ChartTooltip content={<ChartTooltipContent indicator="dashed" />} /> <Bar dataKey="desktop" radius={[10, 10, 0, 0]} fill="var(--color-desktop)" > <LabelList position="top" className="fill-foreground text-[10px] font-medium" /> </Bar> <Bar dataKey="mobile" radius={[10, 10, 0, 0]} fill="var(--color-mobile)" /> </BarChart> </ChartContainer> );}适合什么场景
- 比较不同渠道、产品、国家、团队的表现差异
- 做榜单、Top N 排序、活动结果对比
- 给首页 dashboard 放一块“一眼能读懂”的核心指标图
不太适合的地方
- 类别太多时会拥挤，标签阅读成本会变高
- 想表达“趋势”时，折线图通常更自然
- 如果重点是“占比”，donut 或 stacked bar 往往更合适
实现要点
- 保持类目数量克制，优先控制在 5 到 8 个以内。
- 重要系列只保留一到两种强调色，不要把色板铺满。
- 若要突出重点，可通过排序、标注和值标签来建立视觉优先级。
代码说明
这个示例基于 recharts 与项目内的 @/components/ui/chart 封装，已经包含 tooltip 和基础样式体系，适合作为后续更多柱状图专题页的母版。