css环形图制作
使用 CSS 和 SVG 制作环形图
CSS 结合 SVG 可以轻松实现环形图效果。以下是一个简单的方法：
<svg viewBox="0 0 100 100" class="donut">
<circle cx="50" cy="50" r="45" fill="none" stroke="#eee" stroke-width="10"/>
<circle cx="50" cy="50" r="45" fill="none" stroke="#4CAF50" stroke-width="10"
stroke-dasharray="283" stroke-dashoffset="70"/>
</svg>.donut {
width: 200px;
height: 200px;
}stroke-dasharray 控制虚线长度，stroke-dashoffset 控制偏移量。283 是 2πr（约 282.74）的值，70 表示约 25% 的空白。
纯 CSS 环形图方案
利用 CSS 的 border 和 transform 属性可以创建环形图：
<div class="pie-chart"></div>.pie-chart {
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(#4CAF50 25%, #2196F3 0 50%, #FFC107 0 75%, #F44336 0);
}conic-gradient 创建锥形渐变，每个颜色段的百分比对应环形图的占比。
动画效果实现
为环形图添加旋转动画：
.donut {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}响应式环形图
使用 CSS 变量使环形图适应不同尺寸：
:root {
--chart-size: 150px;
}
.pie-chart {
width: var(--chart-size);
height: var(--chart-size);
}通过 JavaScript 可以动态修改 CSS 变量值来调整图表大小。
交互式环形图
结合 JavaScript 实现交互：
document.querySelector('.donut circle').addEventListener('mouseover', function() {
this.style.stroke = '#FF5722';
});这些方法提供了从简单到进阶的环形图实现方案，可根据具体需求选择合适的技术方案。
