FIG css and percentage cake were achieved echarts

echarts realize percentage

option = {
    title:{
        text:"",
        textStyle:{
            fontSize:"14",
            x:"left"
        }
    },
    color:["#56abe8","#dee3e9"],
    series:[{
        type:"pie",
        radius:["40%","60%"],
        avoidLabelOverlap:false,
        silent:true,
        label:{
            normal:{
                show:false,
                position:"center",
                formatter:"{a|千行}\n{b|{c}}\n{a|({d}%)}",
                rich:{
                    a:{
                        color:"#7cbfea",
                        align:"center",
                        fontSize:"12"
                    },
                    b:{
                        color:"#333333",
                        align:"center",
                        fontSize:"20"
                    }
                }
            }
        },
        labelLine:{
            normal:{
                show:false
            }
        },
        data:[{
            name:"a",
            value:"2",
            label:{
                normal:{
                    show:true
                }
            }
        },{
            name:"b",
            value:"5"
        }]
    }]
};

 

 

FIG percentage css and js implemented cake

<style> 
    .shanxing { 
        position: relative; 
        width: 100px; 
        height: 100px; 
        border - RADIUS: 50px; 
        background - Color: # dee3e9; 
    } 
    .sx1, {.sx2 
        the display: none; 
        position: Absolute; 
        width: 100px; 
        height: 100px; 
        Transform: Rotate (0deg); 
        clip: rect (0px, 50px, 100px, 0px); / * this attribute is used to draw the semicircular clip, rect content within the range of the clip is displayed using the clip property, element It must be absolute in the * / 
        border - the RADIUS: 50px; 
        background - Color: # 56abe8; 
    } 
    / *绘制一个60度扇形*/
    .shanxing1 .sx1{transform: rotate(0eg);}
    .shanxing1 .sx2{transform: rotate(0deg);}
  
    .numContainer{
        width: 72px;
        height: 72px;
        line-height: 72px;
        background: #ffffff;
        border-radius: 100%;
        position: absolute;
        top: 14.5px;
        left: 14.5px;
        text-align: center;
    }
       
  </style>
  <div class="shanxing shanxing1">
    <div class="sx1"></div>
     <div class="sx2"></div>
     <div class="numContainer">1111</div>
  </div>
  <script>var sx1 = document.getElementsByClassName("sx1")[0];
    var sx2 = document.getElementsByClassName("sx2")[0];
      function aa(val){
        sx1.style.backgroundColor = "#56abe8"
        sx2.style.backgroundColor = "#56abe8"
        sx1.style.display = "block"
        sx2.style.display = "block"
        if(val <= 100  && val>=50){
          var rate = (val-50)*180/50
          sx2.style.transform = "rotate("+rate+"deg)") {(val == 0Else
        }
     if
          sx1.style.display = "none"
          sx2.style.display = "none"
        }else{
          sx2.style.backgroundColor = "#dee3e9"
          var rate = (val)*180/50
          sx1.style.transform = "rotate("+rate+"deg)"
        }
      }
      aa(12);
  </script>