1. 多维综合评估与雷达图在企业级系统中的核心价值与排版困局

在企业级人才盘点（Talent 9-Box Matrix & 360 Competency Review）、软件架构质量评估模型（如 ISO/IEC 25010 可靠性、可维护性、安全性度量）、SaaS 竞品全景 Benchmark 以及金融资产风险收益评估体系中，雷达图（Radar Chart，亦称蛛网图 Spider Graph 或星状图 Star Plot） 是将非线性、离散的多维量化数据投射至同一可视平面的首选图表。通过中心发散的极坐标系（Polar Coordinate System），雷达图能够一览无余地揭示各个评估对象在不同维度上的优势长板与薄弱瓶颈。

然而，在日常 UI/UX 设计与前端工程交接中，雷达图也是 Figma 中排版难度最高、最容易发生图形变形与维护失控的复杂图表之一：

1. 极坐标轴与笛卡尔直角网格的几何冲突：Figma 的底层排版引擎（包括 Auto Layout）原生基于笛卡尔二维直角坐标系 (X, Y) 设计。构建正五边形、正六边形或正八边形的多级同心背景网格时，手动缩放极易发生非等比长宽扭曲，导致刻度失真；
2. 端点标签（Axis Labels）的离散外扩与文字溢出：各个放射轴端点往往悬挂着长短不一的指标名称（如“系统抗压吞吐能力” vs “成本”）。若缺乏标准的布局约束与绝对定位机制，指标文本极易与多边形外顶点发生重叠碰撞或被父级容器裁切（Clip Content）；
3. 多序列对比（Multi-Series Comparison）的色彩穿透与重叠遮挡：在竞品对比或自我vs团队均值对比中，往往需要叠加 2~3 组多边形区域。若半透明填充色搭配不当，多层叠加后会导致底层数据面积被完全遮蔽，视觉混浊发黑；
4. 顶点圆点（Vertex Dots）与悬浮卡片的动态响应脱节：静态矢量多边形往往难以在鼠标悬停时触发独立的顶点微动效或展示该维度的详细数值浮层（Tooltip Card）；
5. 研发交付的技术断层：前端工程师无法直接从设计稿中提取静态 SVG 形状来渲染动态业务数据。开发端需要基于极坐标公式（$x = r \cdot \cos\theta, y = r \cdot \sin\theta$）动态生成 SVG <polygon> 顶点序列，或接入 Apache ECharts / Recharts 图表库。

借助 Figma 的 矢量网格与形状编辑、Auto Layout 自动布局、组件变体与属性 和 Figma Variables 变量系统，我们可以打造一套精准合规、支持 3~8 轴弹性适配、具备高保真悬浮交互且研发无损交付的工业级雷达图系统。

---

2. 雷达图核心组件几何拆解与极坐标拓扑树（Radar Coordinate Topology）

一套严谨的雷达图组件由四层同心架构自底向上嵌套而成：底层的同心正多边形背景导轨（Concentric Polygon Grid）、中层的放射状极坐标轴线（Radial Spoke Axes & Labels）、数据层的半透明多边形遮罩与高亮描边（Data Polygon Area & Stroke），以及顶层的顶点交互图钉与悬浮数值浮层（Vertex Dots & Tooltip Overlay）。

Radar Chart Master Component (Auto Layout Stack / Frame, Size: 480px × 480px)
├── Background Canvas Polar Shell (Center Alignment, Constraints: Center/Center)
│   ├── Concentric Polygon Grid Layers (3~5 Concentric Levels, Stroke: 1px Subtle Gray)
│   │   ├── Level 100% Boundary Grid (Polygon: Hexagon / Octagon, Diameter: 320px)
│   │   ├── Level 75% Scale Grid (Polygon, Diameter: 240px, Dashed Stroke)
│   │   ├── Level 50% Midline Grid (Polygon, Diameter: 160px, Stroke: Solid Accent)
│   │   └── Level 25% Inner Grid (Polygon, Diameter: 80px, Stroke: Dashed)
│   └── Radial Spoke Axes Group (Vector Spokes originating from Center (240, 240))
│       ├── Spoke Axis 0° (Top / North, 160px Vector Line, Stroke: 1px)
│       ├── Spoke Axis 60° (Top-Right, 160px Vector Line)
│       ├── Spoke Axis 120° (Bottom-Right, 160px Vector Line)
│       ├── Spoke Axis 180° (Bottom / South, 160px Vector Line)
│       ├── Spoke Axis 240° (Bottom-Left, 160px Vector Line)
│       └── Spoke Axis 300° (Top-Left, 160px Vector Line)
├── Axis Endpoint Label Slots (Absolute Positioned Chips orbiting periphery)
│   ├── Label Slot Top (Center-aligned: "工程交付效能", Score Badge: "92分")
│   ├── Label Slot Top-Right (Right-aligned: "系统高可用架构", Score Badge: "88分")
│   ├── Label Slot Bottom-Right (Right-aligned: "代码规范与重构", Score Badge: "74分")
│   ├── Label Slot Bottom (Center-aligned: "敏捷敏锐度", Score Badge: "85分")
│   ├── Label Slot Bottom-Left (Left-aligned: "团队赋能协作", Score Badge: "90分")
│   └── Label Slot Top-Left (Left-aligned: "业务领域洞察", Score Badge: "68分")
├── Data Series Layer Group (Vector Networks Overlay, Absolute Position)
│   ├── Series A [当前评测目标: 个人能力] (Fill: Brand Blue 20%, Stroke: 2.5px Primary Blue)
│   │   └── Vertex Points (6 × Ellipse 8px, Fill: White, Stroke: 2px Primary Blue, Drop Shadow)
│   └── Series B [基线参照组: 团队基准均值] (Fill: Amber 15%, Stroke: 2px Dashed Amber, Vertex Dots)
└── Hover Tooltip Dock (Absolute Floating Card, Space-Between Layout)
    ├── Tooltip Header (Dimension Title: "系统高可用架构")
    ├── Score Metrics Row ("得分: 88 / 100 · 击败 84% 工程师")
    └── Trend Pill Indicator ("同比上升 +6.4% ▲", Color: Success Green)

---

3. 雷达图核心图元与视觉工程实操步骤详解

3.1 正多边形同心导轨网格（Concentric Polygons）与放射轴（Radial Spoke Axes）构建

构建无变形雷达图网格的核心在于基于同心正多边形图元等比缩放，而非自由拉伸：

1. 确定维度数量（轴数 $N$）：
   • 常见企业业务模型通常为 5 轴（五边形） 或 6 轴（六边形）。在 Figma 中选中多边形工具（Polygon Tool，快捷键 P），在右侧面板将边数设置为 6（正六边形）；
2. 绘制 100% 外边界网格（Outer Boundary）：
   • 设置宽度与高度为 320px × 320px，锁定等比缩放（Constrain Proportions）；
   • 背景填充设为无，描边设为 1px，色值绑定设计系统语义色 tokens/border/subtle（如 #E2E8F0 或暗黑 #334155）；
3. 构建同心等分网格（Concentric Inner Rings）：
   • 复制该正六边形，分别将尺寸按比例缩放为：
     • 75% 等高线：尺寸为 240px × 240px，描边样式配置为 Dashes: 3, 3；
     • 50% 警戒线：尺寸为 160px × 160px，描边颜色使用浅强调色（如品牌蓝浅色），帮助视觉识别中位及格线；
     • 25% 基础线：尺寸为 80px × 80px，描边样式设为微弱浅灰；
   • 选中所有 4 个同心多边形，执行快捷对齐（Align Horizontal Centers & Align Vertical Centers），群组命名为 _Concentric-Grid；
4. 绘制中心辐射轴线（Radial Spokes）：
   • 从几何中心点 (160, 160) 出发，使用钢笔工具向 6 个正多边形顶点分别绘制直线，描边宽度 1px，颜色与最外层边界保持一致；
   • 这 6 条极轴构成了数据的基准度量标尺。

3.2 极坐标放射轴端点自适应标签插槽（Axis Label Slots）

标签排版最忌生硬写死绝对坐标，需按照时钟象限配置文本对齐策略：

1. 时钟象限对齐规则（Quadrant Alignment Rule）：
   • 顶部极轴（12 点钟方向）：文本水平居中对齐（Text Align Center），标签底边与多边形顶顶点预留 12px 间距；
   • 右侧极轴（2 点钟、4 点钟方向）：文本水平左对齐（Text Align Left），使文字从顶点向外延伸，避免遮挡图表；
   • 底部极轴（6 点钟方向）：文本水平居中对齐（Text Align Center），标签顶边与底部顶点保持 12px 间距；
   • 左侧极轴（8 点钟、10 点钟方向）：文本水平右对齐（Text Align Right），文字向左侧延伸；
2. 插槽原子化封装：
   • 标签插槽不仅包含文字，还可容纳数值胶囊。创建 _Axis-Label-Slot 组件：
     • 上层为维度名称（Font-Weight: 500, 字号 13px，深中灰色）；
     • 下层或行内右侧内嵌分值指示胶囊（Score Badge：如 92，填充浅灰或品牌蓝底衬）。

3.3 数据多边形填充覆盖面（Translucent Polygon Overlay & Stroke）与多序列对比

数据多边形由各极轴上的实际数据点连接闭合而成：

1. 极坐标数据点定位计算公式：
   • 设雷达图最大外半径为 $R = 160\text{px}$，中心为 $(X_0, Y_0)$。对于第 $i$ 个维度（$i = 0, 1, \dots, N-1$），其旋转角度 $\theta_i = -\frac{\pi}{2} + i \cdot \frac{2\pi}{N}$；
   • 若当前维度得分为 $S_i$（归一化为 $0.0 \sim 1.0$），则该顶点的实际坐标为： $$x_i = X_0 + R \cdot S_i \cdot \cos(\theta_i), \quad y_i = Y_0 + R \cdot S_i \cdot \sin(\theta_i)$$
2. 绘制闭合数据多边形：
   • 在 Figma 中使用钢笔工具依次连接各坐标点并闭合路径；
   • 系列 A（当前评测人 / 主产品）：描边配置为 2.5px Solid（主品牌高饱和色 #2563EB），填充配置为该色值的半透明渐变或单色 rgba(37, 99, 235, 0.20)；
   • 系列 B（对照基准线 / 团队均值）：描边配置为 2px Dashed (4, 4)（暖琥珀色 #D97706），填充配置为更浅的 rgba(217, 119, 6, 0.12)；
   • 混合模式（Blend Mode）配置：两组数据层重叠处推荐使用 Multiply（正片叠底） 或默认 Normal 配合低透明度，确保两组多边形的交集重合区域依然清晰可辨。

3.4 顶点数据圆点锚定（Data Vertex Anchor）与悬浮数值浮层（Value Tooltip Card）

为了实现逼真的高保真交互体验，需为各顶点配置悬浮反馈图元：

1. 顶点锚点圆图元（Data Vertex Dot）：
   • 直径设为 8px，填充纯白 #FFFFFF，描边 2px 实色（与对应系列的描边色一致）；
   • 添加微型轻量投影 Drop Shadow: 0 1px 3px rgba(0,0,0,0.15)，使数据点立体浮空于多边形之上；
2. 悬浮数据浮层（Interactive Tooltip Card）：
   • 创建 Auto Layout 纵向卡片，圆角 8px，内边距 8px 12px，背景填充深色（#0F172A）或纯白带高投影；
   • 包含维度名称、具体评分、排位百分比及同比变化徽标；
   • 利用 Figma 的绝对定位吸附在目标顶点上方，并在底边中央放置 6px × 4px 的倒三角小指引箭头（Tooltip Arrow）。

---

4. 常见雷达图类型与多维对比矩阵

在配置企业级雷达图组件体系时，需针对不同的业务评估深度与场景复杂度进行差异化选型：

评估维度	5 轴正五边形雷达图 (5-Axis)	6 轴正六边形雷达图 (6-Axis)	8 轴正八边形雷达图 (8-Axis)	填充对比型雷达图 (Dual-Series)
典型应用场景	移动端紧凑型人才测评、产品体验 5 维度	工程师工程效能矩阵、SaaS 软件架构度量	深度金融风险资产配置、全方位能力评级	竞品直接 Benchmark 对标、自我 vs 团队基线
几何轴夹角	$72^\circ$ 极角步进	$60^\circ$ 极角步进	$45^\circ$ 极角步进	同构轴拓扑，双层多边形叠加
端点文字排版难度	较容易（上下对称，仅 2 个侧边角度）	最平衡（正对 12/6 点钟，左右对称）	较高（密集端点容易与外围卡片边界碰撞）	需增加图例（Legend Dock）区分色系
视口适配友好度	适合移动端 390px 视口单列排版	适合各种屏幕（390px~1440px 均极度平衡）	仅推荐宽屏桌面端仪表盘（Min Width: 540px）	需保证多层半透明叠加后底色不发黑
用户认知负担	极低（常用于大众 C 端或通俗测评）	工业标准（B 端 SaaS 体系默认首选）	较高（需专业数据分析师辅助解读）	直观直显差距差距（Gap Analysis）
Dev Mode 复杂度	计算 5 组三角函数坐标	计算 6 组坐标（多轴具有 $0.5$ 特殊三角值）	计算 8 组坐标	需注入两组序列数据并实现交集着色

---

5. Variables 状态机联动与多维度指标动态演进

利用 Figma Variables 的变量绑定与模式切换，可以让同一套雷达图无缝承载不同业务角色或评级阶段的数据变化：

1. 建立 Radar-Metrics-Tokens 变量集合：
   • dimension/efficiency (Number)：效能得分（0~100，默认 85）；
   • dimension/architecture (Number)：架构能力（0~100，默认 78）；
   • dimension/codeQuality (Number)：代码质量（0~100，默认 90）；
   • dimension/businessDomain (Number)：业务认知（0~100，默认 65）；
   • dimension/teamLeadership (Number)：团队领导（0~100，默认 82）；
   • radar/displayMode (String)：包含 Single（仅展示个人）、Benchmark（叠加基准均值）与 Diff（高亮差值）；
2. 多模式（Variable Modes）预设配置：
   • Mode: 初级工程师 (Junior)：各项数值集中在 40~65 之间，生成小面积紧凑内缩多边形；
   • Mode: 资深架构师 (Staff/Principal)：各项数值在 85~98 之间，呈现饱满外扩多边形；
   • Mode: 团队均值 (Team Baseline)：作为全局常量对照；
3. 绑定图层显隐与标签数值：
   • 将标签胶囊内的文本直接绑定对应维度的数字变量；
   • 将对照系列（Series B）的图层可见性绑定至条件表达式：radar/displayMode != 'Single'；
   • 设计师只需在包含该组件的页面根容器上切换 Mode，全图的所有数值、标签胶囊与对比图例将在一瞬间联动更新。

---

6. Dev Mode 前端工程代码同构与 SVG Polygon / ECharts 落地

在 Dev Mode 研发协同 中，前端工程师需要准确的极坐标计算逻辑或标准的图表配置代码。以下提供原生 SVG <polygon> 极坐标转换算法与生产级 Apache ECharts 配置同构实现：

6.1 原生 TypeScript + SVG 极坐标多边形动态计算引擎

/**
 * 生产级雷达图 SVG Polygon 动态顶点计算器
 * 对应 Figma 雷达图极坐标拓扑：基于中心点、最大半径与归一化分值
 */
export interface RadarDimension {
  key: string;
  label: string;
  maxScore: number;
}

export interface RadarDataPoint {
  [dimensionKey: string]: number;
}

export class RadarSvgEngine {
  private center: number;
  private radius: number;
  private dimensions: RadarDimension[];

  constructor(center = 200, radius = 150, dimensions: RadarDimension[]) {
    this.center = center;
    this.radius = radius;
    this.dimensions = dimensions;
  }

  /**
   * 将多维分值转换为 SVG <polygon points="x1,y1 x2,y2 ..."> 坐标序列
   */
  public calculatePolygonPoints(data: RadarDataPoint): string {
    const totalAxes = this.dimensions.length;
    const angleStep = (Math.PI * 2) / totalAxes;

    return this.dimensions
      .map((dim, index) => {
        const rawScore = data[dim.key] ?? 0;
        const normalizedScore = Math.min(1, Math.max(0, rawScore / dim.maxScore));
        const currentRadius = this.radius * normalizedScore;

        // 从 12 点钟方向 (-PI / 2) 顺时针旋转
        const angle = -Math.PI / 2 + index * angleStep;
        const x = this.center + currentRadius * Math.cos(angle);
        const y = this.center + currentRadius * Math.sin(angle);

        return `${x.toFixed(2)},${y.toFixed(2)}`;
      })
      .join(' ');
  }
}

6.2 工业级 Apache ECharts 对应配置代码

// 对应 Figma 6 轴雷达图组件的 ECharts 生产级 Option 配置
export const getRadarChartOption = (personalScores, teamBaseline) => ({
  radar: {
    indicator: [
      { name: '工程交付效能', max: 100 },
      { name: '系统高可用架构', max: 100 },
      { name: '代码规范与重构', max: 100 },
      { name: '敏捷敏锐度', max: 100 },
      { name: '团队赋能协作', max: 100 },
      { name: '业务领域洞察', max: 100 }
    ],
    shape: 'polygon', // 对应 Figma 正多边形网格，而非圆形
    splitNumber: 4,   // 对应 25%, 50%, 75%, 100% 四级同心导轨
    axisName: {
      color: '#475569',
      fontSize: 12,
      fontWeight: 500
    },
    splitLine: {
      lineStyle: {
        color: ['#F1F5F9', '#E2E8F0', '#CBD5E1', '#94A3B8'],
        type: 'dashed'
      }
    },
    splitArea: {
      show: true,
      areaStyle: {
        color: ['rgba(248, 250, 252, 0.4)', 'rgba(255, 255, 255, 0.8)']
      }
    }
  },
  series: [
    {
      name: '多维综合能力评估',
      type: 'radar',
      data: [
        {
          value: personalScores, // [92, 88, 74, 85, 90, 68]
          name: '当前评测目标 (个人)',
          symbol: 'circle',
          symbolSize: 6,
          itemStyle: { color: '#2563EB' },
          lineStyle: { width: 2.5, color: '#2563EB' },
          areaStyle: { color: 'rgba(37, 99, 235, 0.20)' }
        },
        {
          value: teamBaseline,   // [80, 80, 80, 80, 80, 80]
          name: '团队基线均值',
          symbol: 'none',
          lineStyle: { width: 1.5, type: 'dashed', color: '#D97706' },
          areaStyle: { color: 'rgba(217, 119, 6, 0.10)' }
        }
      ]
    }
  ]
});

---

7. 企业级雷达图设计系统治理与避坑指南

1. 严格限制评估维度数量（3 $\le N \le$ 8）：
   • 严禁在单一雷达图中塞入超过 8 个维度。当维度达到 9 个以上时，极轴夹角过于狭窄，端点文字将严重拥挤重叠，多边形蜕化为杂乱圆形，彻底丧失可读性；若指标超过 8 个，建议采用多级分组手风琴或柱状图分步展示；
2. 警惕同心网格非等比缩放引发图形撕裂：
   • 复制正多边形图元时，务必锁定比例锁（Constrain Proportions）。在 Figma 中直接拖拽单侧边框会导致正多边形变成扁平多边形，使得极轴夹角产生人为角度偏差；更多多边形与矢量网络技巧可查阅 矢量网格与形状编辑；
3. 保证多序列半透明填充的对比度层级：
   • 坚决杜绝使用 50% 以上不透明度的实色填充多边形。当两组数据叠加时，高透明度填充将导致下方网格和另一组数据完全失真。推荐主数据填充透明度控制在 18%~25%，辅助对照组控制在 10%~15%，并依靠高饱和度实体描边（Stroke）凸显轮廓；
4. 移动端端点文字自适应折行与裁切预防：
   • 在 375px~390px 移动端视口中，必须将外层画板的 Clip Content 保持为关闭状态，或为雷达图容器预留至少 40px 的左右安全内边距（Padding），防止最左与最右两侧的端点标签在真机预览时被视口边缘裁切。更多复杂故障排查与对齐纠偏策略可参考 Figma 常见报错与疑难故障诊断手册。