<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
		<link rel="stylesheet" href="__TMPL__/public/rfm/css/animsition.min.css" />
		<link rel="stylesheet" href="__TMPL__/public/rfm/css/drop-down.css" />
		<link rel="stylesheet" href="__TMPL__/public/rfm/css/common.css" />
		<link rel="stylesheet" href="__TMPL__/public/rfm/css/qk.css" />
		<link rel="stylesheet" href="__TMPL__/public/rfm/css/xgzb.css" />
		<!--<link href="__TMPL__/public/assets/themes/{:cmf_get_admin_style()}/bootstrap.min.css" rel="stylesheet">-->
		<link href="__TMPL__/public/assets/simpleboot3/css/simplebootadmin.css" rel="stylesheet">
		<link href="__STATIC__/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	</head>
	<style>
		.well{
			min-height: 20px;
			padding: 19px;
			/* margin-bottom: 20px; */
			background-color: #ecf0f1;
			border: 1px solid transparent;
			border-radius: 0;
			-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
			box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
		}
	</style>
	<body>
		
		<div class="data_wrap" style="background: #efeff5; width: 1020px; padding: 10px; overflow: hidden;">
		    <div class="animsition">

				<div class="qk_wrap" style=" margin-bottom: 10px;">
					<div>
						<div id="main4" class="my_main" style="width: 1020px;"></div>
					</div>
					
				</div>

				<div class="xhzb_wrap" style="height: 250px">
					<div>
						<div id="main11" class="my_main3"></div>
					</div>
				</div>
				<div class="xhzb_wrap" style="height: 250px">
					<div>
						<div id="main10" class="my_main3"></div>
					</div>
				</div>
				<form class="well form-inline" method="post" action="{:url('AdminEquipment/index')}">
					初始医院:
					<select class="form-control" id="hospital" name="hospital" style="width: 140px;">
						<option value='0'>全部</option>
					</select> &nbsp;&nbsp;
					<input type="submit" class="btn btn-primary" value="搜索"/>
					<a class="btn btn-danger" href="{:url('AdminEquipment/index')}">清空</a>
				</form>
				<div class="qk_wrap" style=" margin-bottom: 10px;">
					<div>
						<div id="main1" class="my_main" style="width: 630px;"></div>
					</div>
					<div>
						<div id="main2" class="my_main" style="width: 380px;"></div>
					</div>
				</div>

			</div>
		    </div>
		</div>
		
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="http://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
		<script src="__TMPL__/public/rfm/js/select-widget-min.js"></script>
		<script src="__TMPL__/public/rfm/js/jquery.animsition.min.js"></script>
		<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
		<script src="__TMPL__/public/rfm/js/macarons .js"></script>
		<script src="__TMPL__/public/rfm/js/common.js"></script>


		<script src="__TMPL__/public/rfm/js/select-widget-min.js"></script>
		<script src="__TMPL__/public/rfm/js/jquery.animsition.min.js"></script>
		<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
		<script>
			$(document).ready(function() {
  			  //初始化切换
			  $(".animsition").animsition({

			    inClass               :   'fade-in-right',
			    outClass              :   'fade-out',
			    inDuration            :    1500,
			    outDuration           :    800,
			    linkElement           :   '.animsition-link',
			    // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
			    loading               :    true,
			    loadingParentElement  :   'body', //animsition wrapper element
			    loadingClass          :   'animsition-loading',
			    unSupportCss          : [ 'animation-duration',
			                              '-webkit-animation-duration',
			                              '-o-animation-duration'
			                            ],
			    //"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
			    //The default setting is to disable the "animsition" in a browser that does not support "animation-duration".

			    overlay               :   false,

			    overlayClass          :   'animsition-overlay-slide',
			    overlayParentElement  :   'body'
			  });

                //医院总体时长横坐标数据
                var totalDateX = JSON.parse('{$hospital}');
                var hospital='';
                $.each(totalDateX,function (i, v) {
					hospital+="<option value='"+v+"'>"+v+"</option>";
                });
                $('#hospital').append(hospital);
                console.log(hospital);
                //医院总体时长纵坐标数据
                var totalDateY = JSON.parse('{$num}');



                //时间段统计数据
                var dateX = ['21点-7点','7点-12点','12点-17点','17点-21点'];

                var dateY = JSON.parse('{$interval}');

                var num=0;

                $.each(dateY,function (i, v) {
					num+=v
                });



				//周统计数据
                var weekDataX = JSON.parse('{$week}');
                var weekDataY = JSON.parse('{$weekData}');

				//月统计数据
                var monthDataX = JSON.parse('{$month}');
                var monthDataY = JSON.parse('{$monthData}');



			     // 路径配置
		        require.config({
		            paths: {
		                echarts: 'http://echarts.baidu.com/build/dist'
		            }
		        });

		        // 使用
		        require(
		            [
		                'echarts',
		                'echarts/chart/bar',
		                'echarts/chart/line',
		                'echarts/chart/pie'// 使用柱状图就加载bar模块,按需加载
		            ],
		            function (ec) {
		                // 基于准备好的dom,初始化echarts图表
		                var myChart = ec.init(document.getElementById('main1'),'macarons');
		                var myChart2 = ec.init(document.getElementById('main2'),'macarons');
		                var myChart4 = ec.init(document.getElementById('main4'),'macarons');
                        var myChart10 = ec.init(document.getElementById('main10'),'macarons');
                        var myChart11 = ec.init(document.getElementById('main11'),'macarons');

                        //时间段统计(柱形图)
		                var option = {
			        	backgroundColor:'white',
			        		title:{
			        			text : '时间段统计',
			        			y: '15'
			        		},
						    tooltip : {
						        trigger: 'axis',
						         formatter : function(data){
						        	//console.log(data);
						        	var str = data[0].name ;
						        	str += '</br>总人数:' + data[0].value + ' 占比:' + (data[0].value/num)*100+'%';
						        	return str;
						        }
						    },
						   grid:{
						   	y:'100'
						   },
						    toolbox: {
						        show : false,
						        y:'20',
						        feature : {
						            mark : {show: false},
						            dataView : {show: true, readOnly: false},
						            magicType : {show: true, type: ['line', 'bar']},
						            restore : {show: true},
						            saveAsImage : {show: true}
						        }
						    },
						    dataZoom : {
						        show : true,
						        realtime : true,
						        y: 320,
						        height: 20,
						        start : 0,
						        end : 100
						    },
						    calculable : true,
						    xAxis : [
						        {
						            type : 'category',
						            boundaryGap : true,
						            data : dateX
						        }
						    ],
						    yAxis : [
						        {
						        	name : '人数',
						            type : 'value'
						        }
						    ],
						    series : [
						        {
						            name:'人数',
						            type:'bar',
						            //stack: '总量',
						            barMaxWidth : 15,

						            itemStyle:{
						            	normal:{
						            		borderWidth : 3
						            	}
						            },
						            data:dateY
						        }
						    ]
						};
		                //医院总时长
						var option2 = {
						title:{
		        			text : '医院总体使用时长',
		        			y: '15'
		        		},
			        	backgroundColor:'white',
						    tooltip : {
						        trigger: 'axis',
						        formatter : function(data){
						        var str = data[0].name ;
						        	str += '</br>普通客户人数:' + data[0].value;
						        	return str;
						        }
						    },
						    legend: {
						    	selectedMode : false,
						        data:[],
						        y:'20'
						    },
						   grid:{
						   	y:'100'
						   },
						    toolbox: {
						        show : false,
						        y:'20',
						        feature : {
						            mark : {show: false},
						            dataView : {show: true, readOnly: false},
						            magicType : {show: true, type: ['line', 'bar']},
						            restore : {show: true},
						            saveAsImage : {show: true}
						        }
						    },
						    dataZoom : {
						        show : true,
						        realtime : true,
						        y: 320,
						        height: 20,
						        start : 0,
						        end : 100
						    },
						    calculable : true,
						    xAxis : [
						        {
						            type : 'category',
						            boundaryGap : true,
						            data : totalDateX
						        }
						    ],
						    yAxis : [
						        {
						        	name : '人数',
						            type : 'value'
						        }
						    ],
						    series : [
						        {
						            name:'普通客户',
						            type:'bar',
						            //stack: '总量',
						            barMaxWidth : 15,
						            itemStyle:{
						            	normal:{
						            		borderWidth : 3
						            	}
						            },
						            data:totalDateY
						        }

						    ]
						};
						//时间段统计(饼状图)
						var option4 = {
						backgroundColor:'white',
					    tooltip : {
					        trigger: 'item',
					        formatter: "{a} <br/>{b} : {c} ({d}%)"
					    },
					    legend: {
					        orient : 'vertical',
					        x : 'right',
					        y : 'center',
					        data:['21点-7点','7点-12点','12点-17点','17点-21点']
					    },
					    toolbox: {
					        show : false,
					        feature : {
					            mark : {show: true},
					            dataView : {show: true, readOnly: false},
					            magicType : {
					                show: true,
					                type: ['pie', 'funnel'],
					                option: {
					                    funnel: {
					                        x: '25%',
					                        width: '50%',
					                        funnelAlign: 'center',
					                        max: 1548
					                    }
					                }
					            },
					            restore : {show: true},
					            saveAsImage : {show: true}
					        }
					    },
					    calculable : false,
					    series : [
					        {
					            name:'占比',
					            type:'pie',
					            center:['40%','55%'],
					            radius : ['40%', '52%'],
					            itemStyle : {
					                normal : {
					                    label : {
					                        show : false
					                    },
					                    labelLine : {
					                        show : false
					                    }
					                },
					                emphasis : {
					                    label : {
					                        show : true,
					                        position : 'center',
					                        textStyle : {
					                            fontSize : '30',
					                            fontWeight : 'bold'
					                        }
					                    }
					                }
					            },
					            data:[
					                {value:dateY[0], name:'21点-7点'},
					                {value:dateY[1], name:'7点-12点'},
					                {value:dateY[2], name:'12点-17点'},
                                    {value:dateY[3], name:'17点-21点'}
					            ]
					        }
					    ]
					};
						//月统计
                        var option10 = {
                            backgroundColor : "white",
                            color : ["#c05050","#59678c"],
                            title : {
                                x : '980',
                                y : 'center',
                                text: '月\n统\n计',
                                textStyle : {
                                    fontSize : 16
                                }
                            },
                            tooltip : {
                                trigger: 'axis',

                                showDelay: 0,             // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
                                formatter: "{b}</br>{a} : {c}次"

                            },
                            dataZoom : {
                                show : true,
                                realtime: true,
                                y : 220,
                                height: 20,
                                start : 75,
                                end : 100
                            },
                            calculable : true,
                            grid: {
                                x: 80,
                                y: 40,
                                x2:60,
                            },
                            xAxis : [
                                {
                                    type : 'category',
                                    boundaryGap : true,
                                    data : monthDataX
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value',
                                    scale:true,

                                }
                            ],
                            series : [
                                {
                                    name:'月统计',
                                    type:'line',
                                    //stack: '人数',
                                    barWidth : 10,
                                    data:monthDataY
                                }
                            ]
                        };
                        //周统计
                        var option11 = {
                            backgroundColor : "white",
                            color : ["#59678c"],
                            title : {
                                x : '980',
                                y : 'center',
                                text: '周\n统\n计',
                                textStyle : {
                                    fontSize : 16
                                }
                            },
                            tooltip : {
                                trigger: 'axis',

                                showDelay: 0,             // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
                                formatter: "{b}</br>{a} : {c}次"

                            },
                            dataZoom : {
                                show : true,
                                realtime: true,
                                y : 220,
                                height: 20,
                                start : 80,
                                end : 100
                            },

                            calculable : true,
                            grid: {
                                x: 80,
                                y: 40,
                                x2:60,
                            },
                            xAxis : [
                                {
                                    type : 'category',
                                    boundaryGap : true,
                                    data : weekDataX
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value',
                                    scale:true,

                                }
                            ],
                            series : [
                                {
                                    name:'周统计',
                                    type:'line',
                                    //stack: '人数',
                                    barWidth : 10,
                                    data:weekDataY
                                }
                            ]
                        };

		                // 为echarts对象加载数据
		                myChart.setOption(option);
		                myChart2.setOption(option4);
			        	myChart4.setOption(option2);
                        myChart10.setOption(option10);
                        myChart11.setOption(option11);
		            }
		        );
			});
		</script>
	</body>
</html>