本文介绍纯 html/css 实现径向汇聚图的方法：以中心圆为“home”，周围 n 个等距排列的圆形节点通过直线连接至中心，无需第三方库，兼容 angular 组件化开发。
要构建一个径向汇聚式图表（Radial Converging Diagram），核心在于：
- 一个固定居中的中心节点（如“Home”）；
- 若干外围节点（2–10 个），均匀分布在以中心为圆心的假想圆周上；
- 每个外围节点通过一条直线精准指向中心节点。
在不引入 D3、Chart.js 或 SVG 绘图库的前提下，纯 CSS 可高效实现该布局——关键在于利用 transform: rotate 配合 transform-origin，让每个“连接臂”（含末端节点）绕中心底部旋转指定角度，从而自然形成放射状结构。
✅ 推荐实现方案：CSS 旋转臂 + 居中定位
以下是一个可直接复用的响应式、参数化 CSS 示例（支持动态节点数）：
<style>
.radial-container {
--diameter: 100vmin; /* 整体画布尺寸 */
--radius: calc(var(--diameter) / 2);
--node-count: 6; /* 外围节点数量，可动态修改 */
--node-size: 70px;
--line-thickness: 2px;
width: var(--diameter);
height: var(--diameter);
aspect-ratio: 1 / 1;
position: relative;
margin: auto;
}
/* 中心节点（Home） */
.radial-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: #2563eb;
border-radius: 50%;
z-index: 10;
box-shadow: 0 0 12px rgba(37, 99, 235, 0.4);
}
/* 每个“旋转臂”：一条细线 + 末端圆节点 */
.radial-arm {
position: absolute;
top: 0;
left: calc(var(--radius) - (var(--node-size) / 2));
width: var(--node-size);
height: var(--radius);
background: linear-gradient(to bottom, transparent 0, #6b7280 var(--line-thickness), transparent var(--line-thickness));
transform-origin: center bottom;
}
/* 利用 CSS 自定义属性 + :nth-child 动态分配角度 */
.radial-arm:nth-child(1) { --angle: 0deg; }
.radial-arm:nth-child(2) { --angle: calc(360deg / var(--node-count) * 1); }
.radial-arm:nth-child(3) { --angle: calc(360deg / var(--node-count) * 2); }
.radial-arm:nth-child(4) { --angle: calc(360deg / var(--node-count) * 3); }
.radial-arm:nth-child(5) { --angle: calc(360deg / var(--node-count) * 4); }
.radial-arm:nth-child(6) { --angle: calc(360deg / var(--node-count) * 5); }
/* 更多节点可依此类推，或改用 JS 动态注入 */
.radial-arm {
transform: rotate(var(--angle));
}
/* 外围节点（嵌套在 arm 内） */
.radial-node {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: var(--node-size);
height: var(--node-size);
border-radius: 50%;
background: #f97316;
box-shadow: 0 2px 6px rgba(249, 115, 22, 0.3);
}
/* 可选：悬停高亮效果 */
.radial-arm:hover .radial-node {
transform: translateX(-50%) scale(1.15);
background: #ea580c;
}
</style>
<div class="radial-container">
<div class="radial-center"></div>
<div class="radial-arm"><div class="radial-node"></div></div>
<div class="radial-arm"><div class="radial-node"></div></div>
<div class="radial-arm"><div class="radial-node"></div></div>
<div class="radial-arm"><div class="radial-node"></div></div>
<div class="radial-arm"><div class="radial-node"></div></div>
<div class="radial-arm"><div class="radial-node"></div></div>
</div>? 在 Angular 中的集成建议
由于你使用 Angular 且暂不引入外部库，推荐将该结构封装为独立组件：
- 创建 RadialDiagramComponent，接收 @Input() nodeCount: number = 6 和 @Input() nodes: RadialNode[]（含颜色、标签、点击事件等元数据）；
- 使用 *ngFor 渲染 .radial-arm 元素，并通过 [style.--angle] 动态绑定旋转角度（避免硬编码 nth-child）；
- 节点样式（如背景色）可通过 [ngStyle] 或 CSS 自定义属性（--node-color）灵活控制；
- 线条与节点分离设计，便于后续扩展交互逻辑（例如点击某节点时高亮对应连线、触发路由跳转等）。
⚠️ 注意事项
- 响应式适配：vmin 单位确保在任意屏幕下保持正圆比例；若需固定像素尺寸，请替换为 px 并调整 --radius 计算逻辑。
- Z-index 层级：确保 .radial-center 的 z-index 高于所有 .radial-arm，避免连线遮挡中心。
- 性能提示：纯 CSS 方案无 JS 渲染开销，适合静态或低频更新场景；如需动画（如节点入场动效），可添加 transition: transform 0.4s ease-out 到 .radial-arm。
- 无障碍补充：为 .radial-node 添加 aria-label（如 "Navigation to Dashboard"）并配合 role="button"，提升可访问性。
该方案轻量、可维护、风格可控，完美契合 Angular 工程化需求，同时为未来接入 SVG 或 Canvas 扩展预留了清晰接口边界。
