当前位置：首页 > 前端开发 > 正文

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

admin
前端开发
2025-06-19
5

使用 CSS的 conic-gradient函数创建圆锥渐变是最简洁的方法，结合 border-radius:50%形成圆形，也可通过SVG或 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; }

优势：

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

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

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

关键技术：

stroke-dasharray控制弧长（计算：周长=2πr≈282.74）
公式：dasharray = (百分比 * 周长) 周长
使用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; }

原理说明：

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

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

专业建议

响应式适配：
动画效果：

.segment { transition: transform 1s ease-out; }
多段饼图：

.multi-pie { background: conic-gradient( #4e73df 0 30%, #1cc88a 30% 70%, #36b9cc 70% 100% ); }
无障碍优化：
<div role="img" aria-label="饼图：销售占比65%">  </div>