静态展示饼图，可以完全使用css方式来实现，实现效果如下：
css部分：
@keyframes spin {
to {
transform: rotate(0.5turn);
}
}
@keyframes bg {
50% {
background: #655;
}
}
.pie {
position: relative;
float: left;
margin: 20px;
width: 100px;
line-height: 100px;
border-radius: 50%;
background: yellowgreen;
background-image: linear-gradient(to right, transparent 50%, #655 0);
color: transparent;
text-align: center;
}
.pie::before {
position: absolute;
content: “”;
display: block;
top: 0;
left: 50%;
width: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
animation: spin 50s linear infinite, bg 100s step-end infinite;
animation-play-state: paused;
animation-delay: inherit;
}
HTML部分：
<div class=”pie”>20%</div><div class=”pie”>30%</div><div class=”pie”>60%</div>
JS部分
<script>document.querySelectorAll(“.pie”).forEach(function(pie) {var p = parseFloat(pie.innerText);pie.style.animationDelay = “-” + p + “s”;});</script>
不过这个方法貌似只能静态绘制，要实现动态绘制效果，可能就需要使用别的办法了。