用纯CSS实现饼图

饼图是一种非常常见的图形化展示方式（当然，除了统计图表外，一些进度指示器也会用到饼图），一般来说，我们会使用 echart 或者 D3.js 等类库来实现，其实，也就是使用 canvas 或者 svg 来实现，对于普通的 web 开发同学来说，为了实现一个饼图而学习图形化知识，心智负担有点大，所以本节我们就是用在 web 开发中经常用到的 css 来实现一个饼图。

从上述饼图的 gif 中，我们应该能获取一些思路：可以通过元素的旋转来决定露出多大的扇区。

1. 首先，我们可以将圆形的左右两部分指定为两种不同的元素，而旋转的元素可以使用伪元素来代替，通过伪元素的旋转来确定扇形区域的比率。

通过线性渐变 linear-gradient 可以将圆形左右两部分分别指定为不同的颜色，如下所示：

.pie {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: blue;
    background-image: linear-gradient(to right, transparent 50%, red 0);
}

1. 前面说过，我们可以使用伪元素作为旋转的元素，通过旋转的度数来决定扇形区域的比率，所以我们需要先创建一个伪元素，并且这个伪元素可以完全遮住红色区块

.pie::before {
    content: "";
    display: block;
    margin-left: 50%;
    height: 100%;
    background-color: inherit;
    border-radius: 0 100% 100% 0 / 50%;
}

border-radius: 0 100% 100% 0 / 50%; 的目的是希望该伪元素显示成半圆形状，不超过饼图的那个圆形范围，当然，也可以在 .pie 类上增加 overflow: hidden 实现该目的。

1. 剩下的就是对伪元素进行旋转了，也就是使用 rotate 函数，需要注意的是，旋转的中心点是 .pie 的圆心，就是下图中红色圆圈的地方，对于伪元素来说，其实是它左边缘的中心点，所以需要设置 transform-origin 为 left center。

如果我们希望显示 20% 的比率，可以指定旋转的值为 0.2 * 360 = 72deg，或者使用 0.2turn。

.pie::before {
    content: "";
    display: block;
    margin-left: 50%;
    height: 100%;
    background-color: inherit;
    border-radius: 0 100% 100% 0 / 50%;

    transform-origin: left center;
    transform: rotate(0.2turn);
}

1. 上述代码已经可以支持 [0, 50] 之间的比率，但是对于 (50, 100] 区间的，还需要用另一种方式，其实就是将伪元素的背景色改成红色，让它在 0 至 0.5turn 的范围内旋转，因此，如果要显示 60% 比率的饼图，可以使用下述代码

.pie::before {
    content: "";
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    transform-origin: left center;
    
    background-color: red;
    transform: rotate(0.1turn);
}

1. 我们可以在进阶一下，制作一个饼图的 loading 指示器，其实也就是使用 CSS 动画来实现一个饼图从 0 变化到 100% 的动画，可以在下述的代码片段中查看具体的效果~

至此，我们通过 CSS 实现了一个饼图，其中用的技术也都是我们在日常开发中使用到的~