純 css 也可以畫餅狀圖

餅狀圖

less代碼

成圖效果，先上代碼：

/*
@r,@ul-color,@part,@color-list
可以自己換着玩，試試看
@part是累計百分比的數組，因為less不支持變量的遞歸定義，所以只能妥協用這種方法
函數的變量的定義涉及到角度計算和邊框計算
*/
// 圓的半徑
@r:200px;
//底色
@ul-color: #73859F;
//各部分所占的累加百分比(0.1,0.5,0.1,0.2,0.1)
@part:0,0.1,0.6,0.7,0.9,1;
//各個扇形的顏色
@color-list:yellow,blue,red,#fff,rgb(37, 201, 64);

* {
    margin: 0;
    padding: 0;
}

ul {
    width: @r*2;
    height: @r*2;
    margin: auto;
    background-color: @ul-color;
    margin-top: 100px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    li {
        list-style: none;
        margin: auto;
        position: absolute;
        border: @r solid transparent;
        span {
            position: absolute;
            font-size: 14px;
            top:-@r;
        }
    }
    .fn(@part, @color-list, @r);
}
//繪制函數
.fn(@part-list,@color-list,@r,@i:1) when (@i<length(@part-list)){
    //數組中累計百分比的當前值
    @acc:extract(@part-list,@i);
    //扇形所占的百分比
    @rate:extract(@part-list,@i+1) - @acc;
    //li元素的邊框的寬度
    @x:abs(@r*tan(@rate*pi()));
    //扇形的顏色
    @color:extract(@color-list,@i);
    li:nth-child(@{i}){
        .sector-fn(@rate,@x,@acc,@color);
    }
    .fn(@part-list,@color-list,@r,@i+1);
}

//扇形函數
.sector-fn(@rate,@x,@acc,@color) when not(@rate=0.5){
    @tag: if((@rate<0.5),0.5*@rate + @acc,0.5*(1 - @rate)+@acc);
    left: 50%;
    margin-left: -@x;
    border-left-width: @x;
    border-right-width: @x;
    border-top-color: if((@rate<0.5),@color,transparent);
    transform: rotate(@tag*360deg);

}

.sector-fn(@rate,@x,@acc,@color) when(@rate=0.5){
    border-radius: 50%;
        border-top-color: @color;
        border-right-color: @color;
    transform: rotate(@acc*360deg + 45deg);
}

html 代碼：

<ul>
    <li><span>10%</span></li>
    <li><span>50%</span></li>
    <li><span>10%</span></li>
    <li><span>20%</span></li>
    <li><span>10%</span></li>
</ul>

less安裝

less 的安裝和使用請參考 less 官網

繪制方法

這段代碼花了我好幾天時間，具體的操作日后再寫。

原理很簡單，就是用畫三角形的方法畫一個個扇形，然后計算所需的旋轉角度。畫三角形的方法就是設置盒子的 width 和 height 為0，計算邊框的寬度畫出對應的三角形，麻煩的就是應該怎么去旋轉這個扇形。

less 轉譯后的 css 代碼

<style>
    * {
        margin: 0;
        padding: 0;
    }

    ul {
        width: 400px;
        height: 400px;
        margin: auto;
        background-color: #73859F;
        margin-top: 100px;
        border-radius: 50%;
        position: relative;
        overflow: hidden;
    }

    ul li {
        list-style: none;
        margin: auto;
        position: absolute;
        border: 200px solid transparent;
    }

    ul li span {
        position: absolute;
        font-size: 14px;
        top: -200px;
    }

    ul li:nth-child(1) {
        left: 50%;
        margin-left: -64.98393925px;
        border-left-width: 64.98393925px;
        border-right-width: 64.98393925px;
        border-top-color: yellow;
        transform: rotate(18deg);
    }

    ul li:nth-child(2) {
        border-radius: 50%;
        border-top-color: blue;
        border-right-color: blue;
        transform: rotate(81deg);
    }

    ul li:nth-child(3) {
        left: 50%;
        margin-left: -64.98393925px;
        border-left-width: 64.98393925px;
        border-right-width: 64.98393925px;
        border-top-color: red;
        transform: rotate(234deg);
    }

    ul li:nth-child(4) {
        left: 50%;
        margin-left: -145.3085056px;
        border-left-width: 145.3085056px;
        border-right-width: 145.3085056px;
        border-top-color: #fff;
        transform: rotate(288deg);
    }

    ul li:nth-child(5) {
        left: 50%;
        margin-left: -64.98393925px;
        border-left-width: 64.98393925px;
        border-right-width: 64.98393925px;
        border-top-color: #25c940;
        transform: rotate(342deg);
    }
</style>

CodePen上的代碼

https://codepen.io/arduka/pen/gOPyXNb