Sawana Huang Avatar

Sawana Huang

Chart Topic

Area Chart

Sat Mar 14 2026

适合表达趋势中的体量感、累积感和能量变化，比普通折线图更具情绪和空间感。

为什么它值得存在

面积图不是折线图的装饰版，它更适合表达“规模正在变大”这类带体量感的信息。

"use client";import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";import {  ChartContainer,  ChartLegend,  ChartLegendContent,  ChartTooltip,  ChartTooltipContent,  type ChartConfig,} from "@/components/ui/chart";const data = [  { month: "Jan", active: 1820, returning: 540 },  { month: "Feb", active: 2040, returning: 610 },  { month: "Mar", active: 2360, returning: 790 },  { month: "Apr", active: 2520, returning: 880 },  { month: "May", active: 2880, returning: 1040 },  { month: "Jun", active: 3260, returning: 1260 },];const chartConfig = {  active: {    label: "Active users",    color: "var(--new-home-accent-1)",  },  returning: {    label: "Returning users",    color: "var(--new-home-accent-4)",  },} satisfies ChartConfig;export function AreaChartDemo() {  return (    <ChartContainer config={chartConfig} className="min-h-[320px] w-full">      <AreaChart data={data} margin={{ top: 12, right: 12, left: -12 }}>        <defs>          <linearGradient id="fillActive" x1="0" y1="0" x2="0" y2="1">            <stop              offset="5%"              stopColor="var(--color-active)"              stopOpacity={0.7}            />            <stop              offset="95%"              stopColor="var(--color-active)"              stopOpacity={0.08}            />          </linearGradient>          <linearGradient id="fillReturning" x1="0" y1="0" x2="0" y2="1">            <stop              offset="5%"              stopColor="var(--color-returning)"              stopOpacity={0.55}            />            <stop              offset="95%"              stopColor="var(--color-returning)"              stopOpacity={0.05}            />          </linearGradient>        </defs>        <CartesianGrid vertical={false} strokeDasharray="3 3" />        <XAxis dataKey="month" tickLine={false} axisLine={false} />        <YAxis tickLine={false} axisLine={false} width={40} />        <ChartTooltip content={<ChartTooltipContent />} />        <ChartLegend content={<ChartLegendContent />} />        <Area          dataKey="active"          type="monotone"          stroke="var(--color-active)"          fill="url(#fillActive)"          strokeWidth={2.5}        />        <Area          dataKey="returning"          type="monotone"          stroke="var(--color-returning)"          fill="url(#fillReturning)"          strokeWidth={2.5}        />      </AreaChart>    </ChartContainer>  );}

适合什么场景

  • 活跃用户、请求量、库存、资源消耗等有规模感的指标
  • 希望用户不仅看到走势，还能感受到“份量”
  • 做仪表盘中更偏氛围和趋势感的模块

不太适合的地方

  • 多层叠加后容易互相遮挡
  • 想精确比较多条序列时，普通折线图通常更清晰
  • 数据点很少时，面积图的优势不明显

实现要点

  1. 用透明度建立层级，而不是靠很多杂色。
  2. 只给最重要的面积更强的填充存在感。
  3. 如果存在明显峰谷，建议配合标签或说明文字点出来。

代码说明

这个版本用了两层渐变填充，适合作为“增长势能”类专题的基线样式。后续也可以扩展为 stacked area 或 stream-like 视觉版本。