本文介绍一种基于 css 自定义属性与极坐标（距离+角度）的高效方案，实现动态 json 数据驱动的多层同心圆元素精确定位，避免 chart.js 等库因数据变动导致布局重排的问题。
本文介绍一种基于 css 自定义属性与极坐标（距离+角度）的高效方案，实现动态 json 数据驱动的多层同心圆元素精确定位，避免 chart.js 等库因数据变动导致布局重排的问题。
在构建雷达图、能力评估环、技能分布图等可视化组件时，常需将多个数据项（如技能标签或指标点）按层级（tier）均匀分布在同心圆上，并确保每个元素距中心的距离（半径）和角度（方位）均可控、可扩展、不相互干扰。传统方案如 Chart.js 的雷达图虽易用，但其极坐标系统是归一化且绑定于数据顺序的：新增/删减一个 label 会导致所有点角度重分配，无法固定某项始终位于“正上方”或按业务逻辑分层渲染。
更稳健的做法是脱离图表库，手写极坐标定位逻辑——以 <div> 为载体，用 CSS <code>transform: rotate() 控制角度，用 background-position 或绝对定位控制径向距离，再通过 CSS 自定义属性（--n, --data, --num）实现动态注入。
✅ 核心原理：极坐标 → CSS 变换
每个元素由两个关键参数决定位置：
-
角度（θ）：第
n个元素的角度 =n × (360° / 总数量)，从正上方（0°）开始顺时针递增； -
半径（r）：根据所属 tier（如 Tier A/B/C/D）设定基础半径（如
20px,120px,220px,320px），再结合数据值做比例缩放（例如r = baseRadius × (value / 100)）。
以下是一个生产就绪的 React + CSS 模块化实现：
// RadarComponent.tsx
'use client';
import React, { useEffect } from 'react';
import styles from './RadarComponent.module.css';
interface RadarItem {
label: string;
value: number;
tier: 1 | 2 | 3 | 4; // 对应4层圆环
}
const RADII = [20, 120, 220, 320]; // px，对应 tier 1~4
export default function RadarComponent({ items }: { items: RadarItem[] }) {
useEffect(() => {
const chart = document.querySelector(`.${styles.chart}`);
if (!chart || items.length === 0) return;
// 清空旧元素
chart.querySelectorAll(`.${styles.datum}`).forEach(el => el.remove());
items.forEach((item, index) => {
const datum = document.createElement('div');
datum.className = styles.datum;
datum.style.setProperty('--n', String(index));
datum.style.setProperty('--num', String(items.length));
datum.style.setProperty('--data', String(item.value));
datum.style.setProperty('--tier', String(item.tier));
const blob = document.createElement('span');
blob.className = styles.blob;
blob.textContent = item.label;
datum.appendChild(blob);
chart.appendChild(datum);
});
}, [items]);
return (
<div className={styles.chart} />
);
}/* RadarComponent.module.css */
.chart {
background-image: radial-gradient(
#ff9900 0 17.5%,
#f2ff00 17.5% 35%,
#80ff00 35% 52.5%,
#00ff00 52.5% 70%,
transparent 70% 100%
);
--r: 40vmin;
width: calc(2 * var(--r));
aspect-ratio: 1;
border-radius: 50%;
position: relative;
}
.datum {
position: absolute;
bottom: 50%;
left: 50%;
width: 10vmin;
height: var(--r);
transform: translateX(-50%) rotate(calc(1deg * var(--n) * 360 / var(--num)));
transform-origin: center bottom;
/* 根据 tier 和 value 计算 y 偏移：baseRadius × (value/100) */
background-image: radial-gradient(gray 0 70%, transparent 70% 100%);
background-repeat: no-repeat;
background-position: center calc(
var(--r) - (
(var(--data) * RADII[var(--tier) - 1]) / 100
)
);
background-size: 2.2vmin 2.2vmin;
}
.blob {
transform: rotate(calc(-1deg * var(--n) * 360 / var(--num)));
display: inline-block;
position: absolute;
top: -2em;
font-size: 0.8rem;
font-weight: 600;
color: #333;
white-space: nowrap;
}⚠️ 关键注意事项
-
层级隔离：每个
.datum元素独立旋转与定位，互不影响；添加/删除某一项仅影响自身，不触发全局重排； -
响应式适配：使用
vmin单位 +aspect-ratio保证圆形在任意视口下不失真； -
性能优化：避免在 render 中直接操作 DOM，改用
useEffect批量挂载；大量数据时可加debounce或虚拟滚动； -
无障碍支持：为
.blob添加aria-label，并确保对比度符合 WCAG 2.1 AA 标准； -
扩展性：如需支持点击交互，可在
.datum上绑定onClick并透传item.id，无需修改定位逻辑。
该方案将数学逻辑（极坐标）与 CSS 能力（自定义属性、rotate、background-position）紧密结合，兼顾语义清晰、维护性强与视觉精准，是构建定制化雷达图的理想起点。
