css制作扇形图

使用CSS制作扇形图

通过CSS的conic-gradient和clip-path属性可以轻松实现扇形图效果。以下是两种常见方法：

方法一：conic-gradient 渐变

利用CSS的圆锥渐变直接生成扇形色块，适合展示比例数据：

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #FF6384 0% 30%,
    #36A2EB 30% 70%,
    #FFCE56 70% 100%
  );
}

• 每个颜色段的百分比值表示该扇形的起始和结束角度
• 通过调整百分比可控制各扇形的大小比例

方法二：clip-path 裁剪

通过裁剪圆形元素实现更复杂的扇形交互效果：

.sector {
  width: 100px;
  height: 100px;
  background: #4CAF50;
  border-radius: 50%;
  clip-path: polygon(50% 50%, 100% 0, 100% 100%);
  transform: rotate(45deg);
}

• clip-path定义裁剪区域的三点坐标（中心点+两个边缘点）
• transform控制扇形旋转角度

动画效果增强

为扇形添加悬停动画：

.sector {
  transition: transform 0.3s;
}
.sector:hover {
  transform: rotate(45deg) scale(1.1);
  z-index: 1;
}

注意事项

• 对于旧版浏览器需添加-webkit-前缀
• 精确控制角度时建议使用CSS变量计算
• 多扇形组合时注意层叠顺序（z-index）

完整示例可通过CodePen等平台查看实时效果，这种方法无需JavaScript即可实现可视化数据展示。