[分享]css3扇形图统计图

在web开发中，经常需要使用统计图来展示数据。而css3的出现为我们带来了更多可能，在其中扇形图便是一个经典的例子。扇形图通常用于比较几个数据的占比情况。通过对不同比例的扇形进行颜色设置，来突出显示数...

在web开发中，经常需要使用统计图来展示数据。而css3的出现为我们带来了更多可能，在其中扇形图便是一个经典的例子。

扇形图通常用于比较几个数据的占比情况。通过对不同比例的扇形进行颜色设置，来突出显示数据之间的差异。下面就来一步步展示如何通过css3实现一个简单的扇形图。

 .pie {
        width: 200px;
        height: 200px;
        background-color: lightgrey;
        border-radius: 50%;
        position: relative;
    }
    .pie:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: white;
    }
    .pie:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        clip: rect(0px, 100px, 200px, 100px);
        background-color: blue;
        transform: rotate(45deg);
    } 

首先，我们给外层的div设置一个宽高以及圆角属性，从而创建出一个圆形。接着，通过设置:before伪元素来创建一个扇形。clip属性指定了裁剪区域，这里以(0px, 100px, 200px, 100px)来裁剪，从而保留了一个指定角度的扇形。background-color则设置了扇形的颜色。而transform属性则可以旋转该扇形，从而实现各种角度的扇形。

当需要添加多个扇形时，只需按照此方式添加即可。但是在添加完所有扇形后，需要注意将空白区填充满，避免出现白色空缺。例如，可以添加一个:after伪元素，用于覆盖整个圆形，从而填充空缺。

最后，通过js动态计算每个扇形的比例，再通过css设置各个扇形的角度和颜色，便可以轻松展示所需的统计图了。