42ECharts：饼图效果

最新推荐文章于 2024-04-16 16:19:08 发布

weixin_30294021

最新推荐文章于 2024-04-16 16:19:08 发布

阅读量94

点赞数

原文链接：http://www.cnblogs.com/gushixianqiancheng/p/10966924.html

版权

```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>饼图效果</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript" 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 id="select" style="display: inline-block;font-size: 20px;padding: 5px;border:1px solid gray;">
            <option style="font-size: 20px;" value="最近一小时">最近一小时</option>
            <option style="font-size: 20px;" value="最近一天" >最近一天</option>
            <option style="font-size: 20px;" value="最近一周">最近一周</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:'其它'}

                ]
            }
        ],
        color:[ '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
    };
    deviceFlowRatio.setOption(deviceFlowRatioOption);


    var beforeTime = 0;
    $("#select").click(function () {
        if (beforeTime == 0) {
            beforeTime = 1;
            return false;
        } else {
            beforeTime = 0;
            console.log("此处写逻辑");
        }
    });
    /*<option style="font-size: 20px;" value=""></option>
     var beforeTime=0;
    $("#select").click(function(){
        if($("#select").val()==""){
            return false;
        }else if(beforeTime==1){
            beforeTime=0;
            return false;
        }else{
            beforeTime=1;
            console.log("此处写逻辑");
        }
    })*/
</script>
```