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>