#WorkBuddy#零代码生成团队OKR雷达图：三组团队、6维度、交互式切换，一篇搞定

帮我做一个团队OKR雷达图可视化页面，要求：
1. 单文件HTML，不依赖任何外部库
2. 6个维度：产品交付、技术质量、用户增长、团队协作、客户满意度、创新能力
3. 三组团队：产品团队、技术团队、设计团队，支持Tab切换
4. 每个维度显示目标值和实际值双环对比
5. 右侧栏显示：总体完成率（环形进度条）、最强/最弱维度、环比上月趋势
6. 响应式设计，手机和PC都能看

const teamsData = {
  product: {
    name: '产品团队',
    dims: ['产品交付', '技术质量', '用户增长', '团队协作', '客户满意度', '创新能力'],
    target: [92, 85, 88, 90, 95, 80],   // 目标值
    actual: [85, 78, 75, 92, 88, 72],   // 实际值
    lastMonth: [80, 75, 70, 88, 85, 68], // 上月值(用于环比)
    color: '#6c5ce7'                     // 专属色
  },
  tech:   { /* 技术团队数据 */ },
  design: { /* 设计团队数据 */ }
};

// 5层同心圆 + 从圆心发散的N条轴线
for (let level = 1; level <= 5; level++) {
  const r = (maxR / 5) * level;
  ctx.arc(cx, cy, r, 0, Math.PI * 2); // 同心圆
  ctx.stroke();
}
for (let i = 0; i < N; i++) {
  const angle = (Math.PI * 2 / N) * i - Math.PI / 2;
  ctx.moveTo(cx, cy);
  ctx.lineTo(cx + maxR * cos(angle), cy + maxR * sin(angle)); // 轴线
  ctx.stroke();
}

// 目标值 → 虚线多边形（六边形）
drawPolygon(ctx, data.target, ...);  // 虚线描边

// 实际值 → 实心多边形 + 数据点
drawPolygon(ctx, data.actual, ...);  // 半透明填充 + 实线 + 圆点

for (let i = 0; i < N; i++) {
  const angle = (Math.PI * 2 / N) * i - Math.PI / 2;
  // 标签放在多边形外侧
  ctx.fillText(data.dims[i], lx, ly);
  // 实际值标在对应数据点旁边
  ctx.fillText(data.actual[i], vx, vy);
}

function switchTeam(teamKey) {
  currentTeam = teamKey;
  // 1. 切换Tab高亮
  document.querySelectorAll('.tab').forEach(t => 
    t.classList.toggle('active', t.dataset.team === teamKey)
  );
  // 2. 重绘雷达图
  drawRadar(teamKey);
  // 3. 更新侧栏数据
  updateSidebar(teamKey);
}

const rates = data.actual.map((a, i) => 
  Math.round(a / data.target[i] * 100)
);
const overall = Math.round(rates.reduce((s, v) => s + v, 0) / rates.length);

let bestIdx = 0, worstIdx = 0;
rates.forEach((r, i) => {
  if (r > rates[bestIdx]) bestIdx = i;
  if (r < rates[worstIdx]) worstIdx = i;
});

const changes = data.actual.map((a, i) => ({
  dim: data.dims[i],
  pct: Math.round((a - data.lastMonth[i]) / data.lastMonth[i] * 100)
}));
changes.sort((a, b) => b.change - a.change); // 按涨幅排序

.main {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;        /* 小屏自动换行 */
}
.chart-panel {
  flex: 1 1 580px;         /* 雷达图区弹性宽度 */
  min-width: 400px;
}
.sidebar {
  flex: 0 0 280px;         /* 侧栏固定宽度 */
  min-width: 260px;
}

@media (max-width: 900px) {
  .main { flex-direction: column; }   /* 窄屏纵向堆叠 */
}