Sawana Huang Avatar

Sawana Huang

Chart Topic

Radar Chart

Sat Mar 14 2026

适合展示多维度能力轮廓或对象画像，不适合承担高度精确的数值比较任务。

为什么要把它单独拿出来

雷达图的阅读方式和其他图表不同。它更像“画像”，适合强调轮廓、平衡性和强弱面，而不是严谨的表格式比较。

"use client";import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts";import {  ChartContainer,  ChartTooltip,  ChartTooltipContent,  type ChartConfig,} from "@/components/ui/chart";const data = [  { metric: "Clarity", score: 82 },  { metric: "Density", score: 64 },  { metric: "Motion", score: 74 },  { metric: "Trust", score: 88 },  { metric: "Novelty", score: 71 },  { metric: "Readability", score: 84 },];const chartConfig = {  score: {    label: "Score",    color: "var(--new-home-accent-2)",  },} satisfies ChartConfig;export function RadarChartDemo() {  return (    <ChartContainer config={chartConfig} className="min-h-[320px] w-full">      <RadarChart data={data} outerRadius={110}>        <ChartTooltip          content={            <ChartTooltipContent formatter={(value) => `${value}/100`} />          }        />        <PolarGrid />        <PolarAngleAxis dataKey="metric" className="text-xs" />        <Radar          dataKey="score"          fill="var(--color-score)"          fillOpacity={0.32}          stroke="var(--color-score)"          strokeWidth={2.5}        />      </RadarChart>    </ChartContainer>  );}

适合什么场景

  • 产品能力雷达、品牌心智雷达、候选人能力画像
  • 多维评估结果的可视化摘要
  • 想突出“优势面”和“短板面”的展示

不太适合的地方

  • 维度非常多时，标签和面形都会变乱
  • 需要精确对齐数值时，表格或条形图更可靠
  • 面积大小容易让用户产生额外联想，文案解释要跟上

实现要点

  1. 控制维度数量，优先保留最关键的 5 到 7 个维度。
  2. 用它表达“轮廓”而不是“精度”。
  3. 如果要比较两个对象，建议限制在很少的系列数以内。

代码说明

当前这个 demo 适合做“能力画像”类页面的基础版。后续可以进一步扩成双对象对比雷达图，或围绕单一维度做高亮注释。