css环形图制作

使用CSS和HTML制作环形图

通过CSS的conic-gradient属性和border-radius可以轻松创建环形图。以下是一个简单的实现方法：

<div class="pie-chart" style="--percentage: 75;"></div>

.pie-chart {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(
    #4e79a7 0% calc(var(--percentage) * 1%),
    #ddd calc(var(--percentage) * 1%) 100%
  );
  position: relative;
}

.pie-chart::after {
  content: '';
  position: absolute;
  width: 80%;
  height: 80%;
  background: white;
  border-radius: 50%;
  top: 10%;
  left: 10%;
}

使用SVG实现环形图

SVG提供了更灵活的方式来创建环形图，支持动画和交互：

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="none" stroke="#ddd" stroke-width="10"/>
  <circle cx="50" cy="50" r="40" fill="none" stroke="#4e79a7" 
          stroke-width="10" stroke-dasharray="251.2" 
          stroke-dashoffset="calc(251.2 - (251.2 * 0.75))"/>
</svg>

使用CSS动画增强效果

为环形图添加动画效果可以提升用户体验：

@keyframes progress {
  from { stroke-dashoffset: 251.2; }
  to { stroke-dashoffset: calc(251.2 - (251.2 * var(--percentage))); }
}

.pie-chart {
  animation: progress 1s ease-out forwards;
}

响应式环形图设计

确保环形图在不同设备上都能正常显示：

.pie-chart {
  width: clamp(80px, 20vw, 200px);
  height: clamp(80px, 20vw, 200px);
}

多段环形图制作

创建包含多个数据段的环形图：

.multi-segment {
  background: conic-gradient(
    #4e79a7 0% 25%,
    #f28e2c 25% 50%,
    #e15759 50% 75%,
    #76b7b2 75% 100%
  );
}

每种方法都有其适用场景，CSS方案适合简单需求，SVG方案更适合复杂交互和动画效果。