css饼图制作
CSS饼图制作方法
使用纯CSS创建饼图主要通过conic-gradient、border-radius和transform等技术实现。以下是几种常见方法：
使用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和旋转动画
通过叠加两个半圆并旋转实现动态效果：
.pie-container {
width: 200px;
height: 200px;
position: relative;
}
.pie-slice {
width: 100%;
height: 100%;
position: absolute;
clip-path: circle(50% at 50% 50%);
}
.slice-1 {
background: #FF6384;
transform: rotate(0.3turn);
}
.slice-2 {
background: #36A2EB;
transform: rotate(0.7turn);
}SVG结合CSS
更灵活的矢量实现方式：
<svg viewBox="0 0 32 32" class="pie">
<circle r="16" cx="16" cy="16" class="segment-1"/>
<circle r="16" cx="16" cy="16" class="segment-2"/>
</svg>.pie {
width: 200px;
height: 200px;
transform: rotate(-90deg);
}
.segment-1 {
stroke: #FF6384;
stroke-dasharray: 30 100;
}
.segment-2 {
stroke: #36A2EB;
stroke-dasharray: 40 100;
stroke-dashoffset: -30;
}动画效果实现
为饼图添加交互动画：
.pie-animated {
transition: transform 0.5s ease;
}
.pie-animated:hover {
transform: rotate(15deg) scale(1.05);
}响应式设计技巧
确保饼图适应不同屏幕：
.pie-responsive {
width: 80vmin;
height: 80vmin;
max-width: 300px;
max-height: 300px;
}注意事项：
- 圆锥渐变在IE浏览器不支持
- 复杂分段建议使用SVG方案
- 动态数据更新需配合JavaScript
- 颜色对比度需符合WCAG可访问性标准
