企业官网建设流程全解析

shadcn-dashboard-landing-template 是一个基于 Vite-React / Next.js、Tailwind CSS 与 shadcn/ui 的开源后台管理 + 落地页模板，其数据可视化能力构建在Recharts 图表组件之上。本文结合仓库中的真实页面，拆解 5 种最实用的图表玩法：面积图趋势、柱状图对比、环形图交互、表格嵌图与主题自动适配，帮助新手不写一行样式代码就能产出生产级的 Dashboard 图表。

上图来自模板的 Dashboard 2 页面，左侧是「Sales Performance」面积图，右侧是「Revenue Breakdown」环形图——这两种正是本文要重点讲解的玩法。

📊 先搞懂架构：图表系统一目了然

模板已在 chart.tsx 中把 Recharts 封装成一套主题感知的组件，核心成员如下：

关键设计是chartConfig：你只声明一次「字段 → 标签 + 颜色」的映射，后续所有 Tooltip、Legend、图表序列都自动复用。例如 sales-chart.tsx 中的配置：

const chartConfig = { sales: { label: "Sales", color: "var(--primary)" }, target: { label: "Target", color: "var(--primary)" }, }

之后在图表中直接写stroke="var(--color-sales)"即可取色，彻底告别手写十六进制颜色。

玩法一：面积图——快速做出时间趋势与区间切换

时间序列数据是 Dashboard 的刚需。chart-area-interactive.tsx 实现了一个「Total Visitors」面积图，包含三个值得抄的细节：

1. 双序列堆叠：desktop与mobile两条Area通过stackId="a"堆叠，用linearGradient渐变填充，视觉层次感强；
2. 时间范围切换：桌面端用ToggleGroup（Last 3 months / 30 days / 7 days），移动端自动降级为下拉Select，数据在filteredData中按区间过滤；
3. 坐标轴美化：tickLine={false}隐藏刻度线、tickFormatter将日期格式化为Apr 4样式。

sales-chart.tsx则是另一个典型：12 个月的Sales vs Target双面积图，目标值用strokeDasharray="5 5"虚线区分，Y 轴用tickFormatter直接显示$15,000格式，并附带 Last 3/6/12 months 切换器。

玩法二：柱状图——多维业务指标一眼对比

customer-insights.tsx 用BarChart展示客户增长趋势，把new / returning / churn（新客、回访、流失）三个维度画在同一张图上：

<BarChart data={customerGrowthData}> <CartesianGrid strokeDasharray="3 3" className="stroke-muted" /> <Bar dataKey="new" fill="var(--color-new)" radius={[2, 2, 0, 0]} /> <Bar dataKey="returning" fill="var(--color-returning)" radius={[2, 2, 0, 0]} /> <Bar dataKey="churn" fill="var(--color-churn)" radius={[2, 2, 0, 0]} /> </BarChart>

技巧点：radius={[2, 2, 0, 0]}只圆角柱顶，是 shadcn 风格的标配细节；domain={[0, "dataMax"]}保证 Y 轴从 0 开始、上限取数据最大值，避免坐标轴「留白过多」。页面右侧还并列了 Total Customers、Retention Rate 等指标卡，图表与卡片互相印证，信息密度很高。

玩法三：环形图——可交互高亮 + 中心大数字

revenue-breakdown.tsx 实现了本文最「炫」的一个组件：Revenue Breakdown 环形图。

• 甜甜圈造型：<Pie innerRadius={60} strokeWidth={5} />直接得到环形，扇区间留白清晰；
• 中心大数字：通过<Label content={...} />在圆心渲染当前选中项的金额（如$16K）与说明文字；
• 扇区高亮动画：activeShape回调中被选中的扇区outerRadius + 10，外层再叠加一圈+25的描边环，形成「弹出」效果；
• 双向联动：右上角Select与右侧金额列表都可点击切换activeCategory，选中行同步高亮。

这种「图表 + 自定义图例列表」的组合，非常适合收入构成、流量来源等占比类数据。

玩法四：数据表格 + 迷你图表——让表格「活」起来

纯表格略显枯燥，data-table.tsx 展示了一个高阶玩法：在数据表格区域中直接嵌入一个ChartContainer面积图，把「明细数据」和「整体趋势」放在同一个模块里。由于ChartContainer自带ResponsiveContainer，它能在任意宽度的容器内自适应缩放，无需关心具体像素尺寸。

表格部分还可以叠加模板自带的排序、筛选（Faceted Filter）、分页、列可见性控制等工具栏组件，图表负责「看趋势」，表格负责「查明细」，二者互补。

玩法五：深浅色主题自动适配——图表颜色零维护

图表最怕「切了深色模式颜色全乱」。模板的做法是三层配合：

1. CSS 变量：globals.css中定义--chart-1~--chart-5五组色值，.dark下自动换一套；
2. 主题注入：ChartContainer内部的ChartStyle会按 light / dark 两套选择器，把chartConfig的颜色注入为--color-xxx局部变量（见 chart.tsx 的THEMES映射）；
3. 组件取色：所有Area/Bar/Pie一律写fill="var(--color-xxx)"。

效果就是上图：切到 Dark 模式后，网格线、坐标轴文字、曲线颜色全部自动跟随，一行代码都不用改。配合模板内置的主题定制器（Theme Customizer），还能进一步调整品牌色与圆角，图表会同步更新。

📚 小结：5 种玩法一张表

更多图表类型（Line、RadialBar）、自定义 Tooltip / Legend、响应式与性能优化技巧，可阅读官方文档：

• 图表组件文档：docs/components/charts.md
• 技术栈说明：docs/guide/tech-stack.md
• 主题系统详解：docs/guide/theme-system.md

照着这 5 种玩法组合使用，你就能在 shadcn-dashboard-landing-template 上快速搭出一套既美观又易维护的数据可视化页面 🚀