审查视图

public/themes/admin_simpleboot3/portal/admin_statistics/index.html 16.5 KB
董瑞恩 authored
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
<!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" />
	</head>
	<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>

				<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'
			  });
董瑞恩 authored
87 88

                //医院总体时长横坐标数据
董瑞恩 authored
89
                var totalDateX = Number('{$hospital}');
董瑞恩 authored
90
                //医院总体时长纵坐标数据
董瑞恩 authored
91
                var totalDateY = Number('{$num}');
董瑞恩 authored
92
董瑞恩 authored
93
董瑞恩 authored
94
董瑞恩 authored
95
                //时间段统计数据
董瑞恩 authored
96
                var dateX = ['21点-7点','7点-12点','12点-17点','17点-21点'];
董瑞恩 authored
97
董瑞恩 authored
98
                var dateY = Number('{$interval}');
董瑞恩 authored
99
董瑞恩 authored
100 101 102 103 104 105 106
                var num=0;

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

董瑞恩 authored
107
董瑞恩 authored
108
				//周统计数据
董瑞恩 authored
109 110
                var weekDataX = ["第一周","第二周","第三周","第四周","第五周","第六周", "第七周",
					"第八周","第九周","第十周","第十一周","第十二周","第十三周","第十四周","第十五周"];
董瑞恩 authored
111
                var weekDataY = Number('{$weekData}');
董瑞恩 authored
112
董瑞恩 authored
113
				//月统计数据
董瑞恩 authored
114 115 116
                var monthDataX = ["第一月","第二月","第三月","第四月","第五月","第六月", "第七月",
                    "第八月","第九月","第十月","第十一月","第十二月","第十三月","第十四月","第十五月",
                    "第十六月","第十七月","第十八月","第十九月","第二十月","第二十一月","第二十二月","第二十三月","第二十四月"];
董瑞恩 authored
117
                var monthDataY = Number('{$monthData}');
董瑞恩 authored
118
董瑞恩 authored
119
董瑞恩 authored
120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143

			     // 路径配置
		        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');
董瑞恩 authored
144
                        //时间段统计(柱形图)
董瑞恩 authored
145 146 147
		                var option = {
			        	backgroundColor:'white',
			        		title:{
董瑞恩 authored
148
			        			text : '时间段统计',
董瑞恩 authored
149 150 151 152 153 154
			        			y: '15'
			        		},
						    tooltip : {
						        trigger: 'axis',
						         formatter : function(data){
						        	//console.log(data);
董瑞恩 authored
155
						        	var str = data[0].name ;
董瑞恩 authored
156
						        	str += '</br>总人数:' + data[0].value + ' 占比:' + (data[0].value/num)*100+'%';
董瑞恩 authored
157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178
						        	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,
董瑞恩 authored
179
						        start : 0,
董瑞恩 authored
180 181 182 183 184 185 186
						        end : 100
						    },
						    calculable : true,
						    xAxis : [
						        {
						            type : 'category',
						            boundaryGap : true,
董瑞恩 authored
187
						            data : dateX
董瑞恩 authored
188 189 190 191 192 193 194 195 196 197
						        }
						    ],
						    yAxis : [
						        {
						        	name : '人数',
						            type : 'value'
						        }
						    ],
						    series : [
						        {
董瑞恩 authored
198
						            name:'人数',
董瑞恩 authored
199 200 201 202 203 204 205 206 207
						            type:'bar',
						            //stack: '总量',
						            barMaxWidth : 15,
						            
						            itemStyle:{
						            	normal:{
						            		borderWidth : 3
						            	}
						            },
董瑞恩 authored
208
						            data:dateY
董瑞恩 authored
209
						        }
董瑞恩 authored
210 211
						    ]
						};
董瑞恩 authored
212
		                //医院总时长
董瑞恩 authored
213 214
						var option2 = {
						title:{
董瑞恩 authored
215
		        			text : '医院总体使用时长',
董瑞恩 authored
216 217 218 219 220 221
		        			y: '15'
		        		},
			        	backgroundColor:'white',
						    tooltip : {
						        trigger: 'axis',
						        formatter : function(data){
董瑞恩 authored
222 223
						        var str = data[0].name ;
						        	str += '</br>普通客户人数:' + data[0].value;
董瑞恩 authored
224 225 226 227 228
						        	return str;
						        }
						    },
						    legend: {
						    	selectedMode : false,
董瑞恩 authored
229
						        data:[],
董瑞恩 authored
230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250
						        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,
董瑞恩 authored
251
						        start : 0,
董瑞恩 authored
252 253 254 255 256 257
						        end : 100
						    },
						    calculable : true,
						    xAxis : [
						        {
						            type : 'category',
董瑞恩 authored
258
						            boundaryGap : true,
董瑞恩 authored
259
						            data : totalDateX
董瑞恩 authored
260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278
						        }
						    ],
						    yAxis : [
						        {
						        	name : '人数',
						            type : 'value'
						        }
						    ],
						    series : [
						        {
						            name:'普通客户',
						            type:'bar',
						            //stack: '总量',
						            barMaxWidth : 15,
						            itemStyle:{
						            	normal:{
						            		borderWidth : 3
						            	}
						            },
董瑞恩 authored
279
						            data:totalDateY
董瑞恩 authored
280 281 282 283
						        }
						        
						    ]
						};
董瑞恩 authored
284
						//时间段统计(饼状图)
董瑞恩 authored
285 286 287 288 289 290 291 292 293 294
						var option4 = {
						backgroundColor:'white',
					    tooltip : {
					        trigger: 'item',
					        formatter: "{a} <br/>{b} : {c} ({d}%)"
					    },
					    legend: {
					        orient : 'vertical',
					        x : 'right',
					        y : 'center',
董瑞恩 authored
295
					        data:['21点-7点','7点-12点','12点-17点','17点-21点']
董瑞恩 authored
296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320
					    },
					    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 : [
					        {
董瑞恩 authored
321
					            name:'占比',
董瑞恩 authored
322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345
					            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:[
董瑞恩 authored
346 347 348 349
					                {value:dateY[0], name:'21点-7点'},
					                {value:dateY[1], name:'7点-12点'},
					                {value:dateY[2], name:'12点-17点'},
                                    {value:dateY[3], name:'17点-21点'}
董瑞恩 authored
350 351 352 353
					            ]
					        }
					    ]
					};
董瑞恩 authored
354
						//月统计
董瑞恩 authored
355 356 357 358 359 360
                        var option10 = {
                            backgroundColor : "white",
                            color : ["#c05050","#59678c"],
                            title : {
                                x : '980',
                                y : 'center',
董瑞恩 authored
361
                                text: '月\n统\n计',
董瑞恩 authored
362 363 364 365 366 367 368 369
                                textStyle : {
                                    fontSize : 16
                                }
                            },
                            tooltip : {
                                trigger: 'axis',

                                showDelay: 0,             // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
董瑞恩 authored
370
                                formatter: "{b}</br>{a} : {c}次"
董瑞恩 authored
371 372 373 374 375 376 377

                            },
                            dataZoom : {
                                show : true,
                                realtime: true,
                                y : 220,
                                height: 20,
董瑞恩 authored
378
                                start : 50,
董瑞恩 authored
379 380 381 382 383 384 385 386 387 388 389 390
                                end : 100
                            },
                            calculable : true,
                            grid: {
                                x: 80,
                                y: 40,
                                x2:60,
                            },
                            xAxis : [
                                {
                                    type : 'category',
                                    boundaryGap : true,
董瑞恩 authored
391
                                    data : monthDataX
董瑞恩 authored
392 393 394 395 396 397 398 399 400 401 402
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value',
                                    scale:true,

                                }
                            ],
                            series : [
                                {
董瑞恩 authored
403
                                    name:'月统计',
董瑞恩 authored
404 405 406
                                    type:'line',
                                    //stack: '人数',
                                    barWidth : 10,
董瑞恩 authored
407
                                    data:monthDataY
董瑞恩 authored
408 409 410
                                }
                            ]
                        };
董瑞恩 authored
411
                        //周统计
董瑞恩 authored
412 413 414 415 416 417
                        var option11 = {
                            backgroundColor : "white",
                            color : ["#59678c"],
                            title : {
                                x : '980',
                                y : 'center',
董瑞恩 authored
418
                                text: '周\n统\n计',
董瑞恩 authored
419 420 421 422 423 424 425 426
                                textStyle : {
                                    fontSize : 16
                                }
                            },
                            tooltip : {
                                trigger: 'axis',

                                showDelay: 0,             // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
董瑞恩 authored
427
                                formatter: "{b}</br>{a} : {c}次"
董瑞恩 authored
428 429 430 431 432 433 434

                            },
                            dataZoom : {
                                show : true,
                                realtime: true,
                                y : 220,
                                height: 20,
董瑞恩 authored
435
                                start : 0,
董瑞恩 authored
436 437 438 439 440 441 442 443 444 445 446 447 448
                                end : 100
                            },

                            calculable : true,
                            grid: {
                                x: 80,
                                y: 40,
                                x2:60,
                            },
                            xAxis : [
                                {
                                    type : 'category',
                                    boundaryGap : true,
董瑞恩 authored
449
                                    data : weekDataX
董瑞恩 authored
450 451 452 453 454 455 456 457 458 459 460
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value',
                                    scale:true,

                                }
                            ],
                            series : [
                                {
董瑞恩 authored
461
                                    name:'周统计',
董瑞恩 authored
462 463 464
                                    type:'line',
                                    //stack: '人数',
                                    barWidth : 10,
董瑞恩 authored
465
                                    data:weekDataY
董瑞恩 authored
466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481
                                }
                            ]
                        };

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