Chart Topic
Stacked Bar Chart
Sat Mar 14 2026
同时表达总量与构成的图表类型，适合做市场结构、分层渠道和来源拆解。
为什么值得单独做专题
堆叠柱状图的价值在于它能在一根柱子里同时回答两个问题：总量有多大，以及总量内部是如何组成的。
"use client";import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, type ChartConfig,} from "@/components/ui/chart";const data = [ { segment: "SMB", organic: 42, paid: 22, referral: 16 }, { segment: "Mid", organic: 58, paid: 31, referral: 18 }, { segment: "Enterprise", organic: 64, paid: 45, referral: 21 }, { segment: "APAC", organic: 36, paid: 19, referral: 14 },];const chartConfig = { organic: { label: "Organic", color: "var(--new-home-accent-1)", }, paid: { label: "Paid", color: "var(--new-home-accent-4)", }, referral: { label: "Referral", color: "var(--new-home-accent-3)", },} satisfies ChartConfig;export function StackedBarChartDemo() { return ( <ChartContainer config={chartConfig} className="min-h-[320px] w-full"> <BarChart data={data} margin={{ top: 12, right: 12, left: -6 }}> <CartesianGrid vertical={false} strokeDasharray="3 3" /> <XAxis dataKey="segment" tickLine={false} axisLine={false} /> <YAxis tickLine={false} axisLine={false} width={28} /> <ChartTooltip content={<ChartTooltipContent />} /> <ChartLegend content={<ChartLegendContent />} /> <Bar dataKey="organic" stackId="a" fill="var(--color-organic)" radius={[0, 0, 6, 6]} /> <Bar dataKey="paid" stackId="a" fill="var(--color-paid)" /> <Bar dataKey="referral" stackId="a" fill="var(--color-referral)" radius={[6, 6, 0, 0]} /> </BarChart> </ChartContainer> );}适合什么场景
- 拆解某个业务单元内部的渠道构成
- 比较不同人群、市场、地区的结构差异
- 展示“总体增长来自哪里”
使用时要小心
- 第一层以外的区块不容易做精确比较
- 堆叠层数一多，阅读门槛会明显上升
- 如果你只关心构成，不关心总量，可以考虑 100% stacked bar
实现要点
- 层级顺序要稳定，避免不同图之间的颜色含义漂移。
- 把最关键的系列放在最容易比较的位置。
- 如果用户需要精读数值，最好在 tooltip 里同时给出单值和总值。
代码说明
这个 demo 适合作为“渠道来源拆解”类专题的起点，后续也可以扩成横向 stacked bar、100% stacked bar 或带注释的 narrative 版本。