css和echarts分别实现饼状图百分比

echarts实现百分比

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"
        }]
    }]
};

 

 

css和js实现饼状图百分比

<style>
    .shanxing{
        position: relative;
        width: 100px;
        height: 100px;
        border-radius: 50px;
        background-color: #dee3e9;
    }
    .sx1,.sx2{
        display: none;
        position: absolute;
        width: 100px;
        height: 100px;
        transform: rotate(0deg);
        clip: rect(0px,50px,100px,0px); /*这个clip属性用来绘制半圆，在clip的rect范围内的内容显示出来，使用clip属性，元素必须是absolute的 */
        border-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)"
        }else if(val == 0){
          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>