14、简单的饼图

使用渐变背景和伪元素，可以实现简单的饼图。其原理是：将渐变背景作为底色，再将主元素一半大小的伪元素覆盖在主元素之上，并遮盖住渐变背景中显示比率的颜色。主元素中背景色和比率色各占一半，利用伪元素的旋转来显示出表示比率部分的颜色。

#a{
    width: 200px;
    height: 200px;
    margin: 200px auto;
    border-radius: 50%;
    overflow: hidden;
    background-color: yellowgreen;
    background-image: linear-gradient(to right,transparent 50%,#655 0);
    position: relative;
}

加上覆盖伪元素之后，虚线框表示伪元素的位置。将伪元素设置成刚好覆盖比率色的半圆，并将旋转对称点设定为左边的中点，这样伪元素就会以主元素的圆心为对称点进行旋转。

#a:after{
    content: "";
    display: block;
    outline: 1px dashed #333;
    border-radius: 0 100% 100% 0 / 50%;
    width: 50%;
    height: 100%;
    margin-left: 50%;
    background-color: inherit;
    transform-origin: left;
}

伪元素旋转20%时。

transform: rotate(.2turn);

当伪元素旋转的度数大于50%时，比例图会崩坏。

利用CSS3animation动画可以解决这一问题，原理是：当比率超过50%时，将伪元素的颜色改为比率色的颜色。一个从0到100%的比率动画。

@keyframes ani {
    to { transform: rotate(.5turn) }
}
@keyframes bg {
    50% { background: #655 }
}
#a:after{
    /*outline: 1px dashed #333; */
    animation: ani 3s linear infinite,
               bg 6s step-end infinite; // step-end表示只显示动画每一步的结束帧，这里即让伪元素的背景色在50%位置时发生突变。
}

利用以下简单的HTML结构显示不同比率的静态饼图。

<div class="a">20%</div>
<div class="a">60%</div>

解决方案是让伪元素的动画静止在相应比率的位置，给动画延迟animation-delay属性设置一个负的值，表示动画已经播放了相应的时间，将整个动画的时间设置为100s，这样60%的饼图就是动画静止在已经执行了60s的位置。为了能根据结构的内容自动生成饼图，要将animation-delay属性设置在主元素的内联样式中，因为伪元素无法设置内联样式，所以在伪元素中使用animation-delay的继承值。

<div class="a" style="animation-delay: -20s;">20%</div>
<div class="a" style="animation-delay: -60s;">60%</div>
#a:after{
    /*outline: 1px dashed #333; */
    animation: ani 50s linear infinite,
               bg 100s step-end infinite; 
animation-play-state: paused;
animation-delay: inherit;
}

利用JS获取内容的值，并将其转化为内联样式赋值给主元素，就可以实现任意比率的简单饼图。