- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 饼图效果 </title>
- <script src="https://cdn.bootCSS.com/echarts/3.7.1/echarts.js"></script>
- </head>
- <body>
- <div style="position: relative;height:302px;width:402px;display: inline-block;margin-right: 100px;">
- <div style="position: absolute;left:0;height:300px;width:400px;border:1px solid gray" id="deviceFlowRatio"></div>
- <div style="position: absolute;right:5px;top:5px;z-index: 2">
- <select style="display: inline-block;font-size: 20px;padding: 5px;border:1px solid gray;">
- <option style="font-size: 20px;"> 最近一小时 </option>
- <option style="font-size: 20px;"> 最近一天 </option>
- <option style="font-size: 20px;"> 最近一周 </option>
- </select>
- </div>
- </div>
- </body>
- </html>
- <script type="text/javascript">
- var deviceFlowRatioArray = [50,13,12,25];
- var deviceFlowRatio = echarts.init(document.getElementById('deviceFlowRatio'));
- var deviceFlowRatioOption = {
- title: {
- text: '设备流量占比',
- x:'10%'
- },
- legend: {
- orient : 'vertical',
- itemGap: 20 ,
- x : '70%',
- y : '40%',
- data:['DCS','PLC','SCAD','其它'],
- formatter: function (name) {
- var deviceFlowRatioArrayTotal=0;
- var deviceFlowRatioArrayValue=0;
- for(var i=0;i<deviceFlowRatioArray.length;i++){
- deviceFlowRatioArrayTotal+=deviceFlowRatioArray[i];
- }
- switch (name){
- case "DCS":
- deviceFlowRatioArrayValue=deviceFlowRatioArray[0]/deviceFlowRatioArrayTotal*100+"%";
- break;
- case "PLC":
- deviceFlowRatioArrayValue=deviceFlowRatioArray[1]/deviceFlowRatioArrayTotal*100+"%";
- break;
- case "SCAD":
- deviceFlowRatioArrayValue=deviceFlowRatioArray[2]/deviceFlowRatioArrayTotal*100+"%";
- break;
- case "其它":
- deviceFlowRatioArrayValue=deviceFlowRatioArray[3]/deviceFlowRatioArrayTotal*100+"%";
- break;
- }
- return name+" "+ deviceFlowRatioArrayValue;
- }
- },
- series : [
- { type: 'pie',
- radius: '70%',
- center: ['35%', '50%'],
- itemStyle : {
- normal : {
- label : {
- show : false
- },
- labelLine : {
- show : false
- }
- }
- },
- data:[
- {value:deviceFlowRatioArray[0], name:'DCS'},
- {value:deviceFlowRatioArray[1], name:'PLC'},
- {value:deviceFlowRatioArray[2], name:'SCAD'},
- {value:deviceFlowRatioArray[3], name:'其它'}
- ]
- }
- ]
- };
- deviceFlowRatio.setOption(deviceFlowRatioOption);
- </script>
来源: http://www.qdfuns.com/article/40901/ad461c3972ce1c2d27b5c90175f1ed79.html