如何仅用HTML和CSS制作饼图？

在网页设计中，使用HTML和CSS创建饼图是一种轻量级、无需JavaScript的解决方案，以下是三种专业实现方法,兼顾视觉效果和代码质量：

方法1：CSS圆锥渐变（现代浏览器首选）

<div class="pie-chart" style="--value: 65; --color: #4e73df;"></div>

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    var(--color) 0% calc(var(--value) * 1%),
    #e0e0e0 calc(var(--value) * 1%) 100%
  );
  position: relative;
}
.pie-chart::after {
  content: attr(data-value)'%';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
}

优势：

• 单元素实现，代码简洁
• 通过CSS变量动态控制比例
• 支持动画过渡效果

方法2：SVG矢量图形（最佳兼容性）

<svg viewBox="0 0 100 100" class="svg-pie">
  <circle cx="50" cy="50" r="45" fill="none" stroke="#e0e0e0" stroke-width="10"/>
  <path d="M50 5 A45 45 0 1 1 50 95 A45 45 0 1 1 50 5" 
        fill="none" 
        stroke="#4e73df" 
        stroke-width="10"
        stroke-dasharray="calc(65 * 2.8274) 282.74"/>
  <text x="50" y="55" text-anchor="middle" font-weight="bold">65%</text>
</svg>

关键技术：

1. stroke-dasharray控制弧长（计算：周长=2πr≈282.74）
2. 公式：dasharray = (百分比 * 周长) 周长
3. 使用text-anchor居中文本

方法3：CSS变换技巧（兼容旧浏览器）

<div class="classic-pie">
  <div class="segment"></div>
  <div class="cover"></div>
  <span>65%</span>
</div>

.classic-pie {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  background: #e0e0e0;
  overflow: hidden;
}
.segment {
  position: absolute;
  width: 100%; height: 100%;
  background: #4e73df;
  transform: rotate(90deg); /* 起点调整 */
  clip-path: polygon(50% 50%, 100% 0, 100% 100%);
  transform: rotate(calc(65 * 3.6deg));
}
.cover {
  position: absolute;
  width: 80%; height: 80%;
  background: white;
  border-radius: 50%;
  top: 10%; left: 10%;
}
.classic-pie > span {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
}

原理说明：

• 使用clip-path裁剪半圆
• 通过rotate旋转角度（公式：角度=百分比×3.6）
• 内圆覆盖实现空心效果

专业建议

1. 响应式适配：

   

   .pie-chart {
     aspect-ratio: 1/1; /* 保持正方形 */
     width: min(90vw, 300px); 
   }

2. 动画效果：

   .segment {
     transition: transform 1s ease-out;
   }

3. 多段饼图：

   

   .multi-pie {
     background: conic-gradient(
       #4e73df 0 30%, 
       #1cc88a 30% 70%,
       #36b9cc 70% 100%
     );
   }

4. 无障碍优化：

   <div role="img" aria-label="饼图：销售占比65%">
     <!-- 图表代码 -->
   </div>

方法选择指南

注意事项

1. 圆锥渐变在Safari 12+需添加-webkit-前缀
2. 精确计算时使用Sass/Less变量管理比例
3. 移动端使用vw/vh单位确保可读性
4. 颜色对比度需满足WCAG 2.0标准（建议4.5:1）

引用说明：本文技术方案参考MDN Web Docs的CSS渐变指南、W3C SVG规范及CSS-Tricks响应式设计实践，数据可视化原则遵循Google Material Design设计规范。