<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/include/taglib.jsp" %>
<%@page import="java.util.*"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="shortcut icon" href="${ctx}/images/favicon.ico">
		<link rel="stylesheet" type="text/css" href="${ctx}/css/indexNew/jquery.monthpicker.css"> <!--选月份的样式-->
		<link rel="stylesheet"  type="text/css" href="${ctx}/css/indexNew/base.css" />
		<!-- <link rel="stylesheet"  type="text/css" href="${ctx}/css/indexNew/all.css" /> -->
		<link rel="stylesheet"  type="text/css" href="${ctx}/css/indexNew/perfect-scrollbar.css" />
		<link rel="stylesheet"  type="text/css" href="${ctx}/css/indexNew/static.css" />
		<link rel="stylesheet"  type="text/css" href="${ctx}/css/newCss/top.css">

		<title>打假通</title>
		<style>
			#statisExport{
				position: absolute;
				right: 20px;
				top: 60px;
				background-color: rgba(0,222,223,0.5);
				color: #fff;
				padding: 5px;
				width: 30px;
				height: 30px;
				border-radius: 30px;
				line-height: 30px;
				cursor: pointer;
			}
			#statisExport:hover{ 
				background-color:#286090;
			}
			.bg1 {
			    overflow: auto;
			}
			.headRight {
			    line-height: 40px;
			}
			/*#operationDiv table tr{
				height: 25px;
			} */
			#operationDiv tbody td{
				text-align: center;
				white-space: nowrap;
    			padding: 5px 10px;
			}
			#operationDiv table th{
				padding: 5px 10px;
			}

			/*#operationDiv table th:first-child{
				padding: 5px 30px;
			}*/
			/*表头不动的样式*/
			.table th,.table td{
				border:1px solid rgba(0, 222, 223, 0.4);
			}
			.scrollTbody{
				display:inline-block;
				height:250px;
				width:100%;
				position: relative;
			}
			.scrollTbody td span{
				display: inline-block;
			}
			.scrollTbody td{
				border:1px solid rgba(0, 222, 223, 0.4);
			}
			.fixedThead th span{
				display:inline-block;
				width: 100px;
			}
			.branchRange span {
			    padding: 3px 10px;
			    border: 1px solid #0B2F48;
			    border-radius: 5px;
			    cursor: pointer;
			}
		</style>
	</head>
	<body class="bg1">
		<!--头部-->
		<div class="headCon">
			<jsp:include page="../top2.jsp">
				<jsp:param name="index" value="中心统计" />
			</jsp:include>
		</div>
		<hna:permission privilege="sysTask.statisExport">
		<!-- <div id="statisExport">
			导出
		</div> -->
		</hna:permission>
		<div class="clear"></div>
		
		<!--内容-->
		<div class="fullScren">
			<div class="container">
				<!--作业情况监测，20180514-->
				<div class="block">
					<div class="operation backg2">
						<p class="title">当前月作业情况监测</p>
						<!--可选时间-->
						<div class="monthSelect" style="color: #666;margin: 10px 0 0 10px;">
							<label style="color: #eee;">可选择月份：</label>
							<input type="text" class="input" id="operation_month">
							<span class="confirm-btn" data-id="operation_month">确定</span>
						</div>
						<div class="branchRange" style="margin: 15px 0px 10px 10px;">
							<span class="active" data-string="all">营运中心</span>
							<span data-string="营运中心华南分中心">华南分中心</span>
							<span data-string="营运中心上海分中心">上海分中心</span>
						</div>
						<div id="operationDiv" style="height:320px;width:98%;position:relative;margin: 10px auto;">
							<!-- <table id="operationTab" border="1" style="border:1px solid rgba(0,222,223,0.4);">
								<tr>
									<th></th>
									<th>标注正常</th>
									<th>标注可疑</th>
									<th>标注欺诈</th>
									<th>可疑/欺诈的涉案金额</th>
									<th>追偿金额</th>
								</tr>
								<tbody id="opTbody_all">
									<tr><td>当月总计</td><td>24</td><td>34</td><td>45</td><td>4352</td><td>35435</td></tr>
								</tbody>
							</table> -->
							<table class="table fixedThead" style="border:1px solid rgba(0,222,223,0.4);">
								<tr>
									<th rowspan='2' class="thW"><span style="width:100px;display: inline-block;">当月时间</span></th>									
									<th colspan="5">串案模型申请数量</th>
									<th colspan="3">专项模型申请数量</th>
									<th colspan="3">标注状态数量</th>
									<th rowspan='2' class="thW"><span>可疑案件涉案金额</span></th>
									<th rowspan='2' class="thW"><span>欺诈案件涉案金额</span></th>
									<th rowspan='2' class="thW"><span>风险入库案件数量</span></th>
									<th rowspan='2' class="thW"><span>黑名单数量占比</span></th>
									<th rowspan='2' class="thW"><span>灰名单数量占比</span></th>
								</tr>
								<tr>
									<th class="thW"><span>同地多案</span></th>
									<th class="thW"><span>同号多案</span></th>
									<th class="thW"><span>同车多案</span></th>
									<th class="thW"><span>可疑时间</span></th>
									<th class="thW"><span>可疑三者</span></th>
									<th class="thW"><span>同一电话</span></th>
									<th class="thW"><span>同一伤者</span></th>
									<th class="thW"><span>同一车牌</span></th>
									<th class="thW"><span>正常</span></th>
									<th class="thW"><span>可疑</span></th>
									<th class="thW"><span>欺诈</span></th>							
								</tr>
							</table>
							<table style="border:1px solid rgba(0,222,223,0.4);">	
								<tbody id="opTbody" class="scrollTbody ps-scrollbar-y">
									
								</tbody>
							</table>
						</div>
					</div>
				</div>
               <!--标记涉及金额-->
				<div class="block">
					<div class="case_pic backg2" style=""><!-- height:351px; -->
						<p class="title">近一个月标注涉及金额</p>
						<div class="timeRange" data-id="markMoney">
							<span data-time="7" data-string="Week">一周</span>
							<span class="active" data-time="30" data-string="Month">一个月</span>
						</div>
						<div id="markMoney" style="height:300px;width:100%;">
							
						</div>
					</div>					
				</div>				
				<!-- <div class="block">
					<div class="typeTimeNum backg">
						<p class="title">近一周标注统计</p>
						<div class="timeRange" data-id="markCount">
							<span class="active" data-time="7" data-string="Week">一周</span>
							<span data-time="30" data-string="Month">一个月</span>
						</div>
						<div id="markCount" style="height:300px;width:100%;">
							
						</div>
					</div>
				</div> -->
				<div class="block">
					<div class="typeTimeNum backg2">
						<p class="title">近一个月任务分配量</p>
						<div class="timeRange" data-id="taskNum">
							<span data-time="7" data-string="Week">一周</span>
							<span class="active" data-time="30" data-string="Month">一个月</span>
						</div>
						<div id="taskNum" style="height:260px;width:100%;">
								
						</div>
					</div>
				</div>
				<div class="block">
					<div class="typeTimeNum backg2">
						<p class="title">近一个月系统使用频次</p>
						<div class="timeRange" data-id="user">
							<span data-time="7" data-string="Week">一周</span>
							<span class="active" data-time="30" data-string="Month">一个月</span>
						</div>
						<div id="user" style="height:260px;width:100%;"></div>
					</div>
				</div>
				<div class="block">
					<div class="typeTimeNum backg2">
						<p class="title">近一个月任务处理情况</p>
						<div class="timeRange" data-id="taskDeal">
							<span data-time="7" data-string="Week">一周</span>
							<span class="active" data-time="30" data-string="Month">一个月</span>
						</div>
						<div id="taskDeal" style="height:260px;width:100%;"></div>
					</div>
				</div>
				
			</div>
		</div>
		
		<script src="${ctx}/js/lib/jquery-1.11.1.min.js"></script>
		<script src="${ctx}/js/lib/perfect-scrollbar.jquery.js"></script>
		<script src="${ctx}/js/lib/echarts.min.js"></script>
		<script src="${ctx}/js/lib/countUp.js"></script>
		<script src="${ctx}/js/lib/jquery.monthpicker.js"></script> <!--选月份的插件-->
		<script src="${ctx}/js/lib/core.js"></script>
		
		<script>
			(function(){
				//标注趋势月份可选
				var time = new Date();
				var ye = time.getFullYear(),mo=(time.getMonth() + 1)<9?"0"+(time.getMonth() + 1):(time.getMonth() + 1);
				var reTime=ye+"-"+mo;				
				var year=[];
				for(var i=0;i<5;i++){
					year.push(ye);
					ye--;
				}
				//作业情况监测
				$('#operation_month').attr("value",reTime);
				$('#operation_month').monthpicker({ 
			        years: year, 
			        topOffset: 6, 
			        onMonthSelect: function(m, y) { 
			          console.log('Month: ' + m + ', year: ' + y); 
			        } 
			    }); 
				//作业情况的分中心切换
				$(".branchRange span").click(function(){
					$(".branchRange").children().removeClass("active");
					$(this).addClass("active");
					var branchRange=$(this).data("string");
					$.ajax({
				    		type:"POST",
				    		url:"${ctx}/sysTask/analyzePage9/9.do",
				    		data:{branch:branchRange},
				    		success:function(result){
				    			var ht=setOperation(result);
				    			$("#opTbody").html(ht);
						    	$("#opTbody tr").each(function(){
				    				$(this).find("td span").each(function(i){
				    					$(this).css("width",thead_w[i]);
				    				})
				    			});
				    			$('#operationDiv').perfectScrollbar("update");	
				    			$('.scrollTbody').perfectScrollbar("update");	    			
				    		}
				    	});
				});

			    //获取表头的width
			    var thead_w=[];
			    $(".fixedThead .thW span").each(function(i){
			    	var w=Math.ceil($(this).width());
			    	if(i==0){
			    		w=w-1;
			    	}
			    	thead_w.push(w);
			    });
			     /*$(".fixedThead .thW span").each(function(i){
			    	$(this).css("width",thead_w[i]);
			    });*/
			    //点击确定时
			    $(".confirm-btn").click(function(){
			    	var idVal=$("#"+$(this).data("id")).val();
			    	changeId=$(this).data("id");
			    	if($(this).data("id")=="operation_month"){ //作业情况监测
			    		var ht=idVal+"作业情况监测";
			    		$(this).parent().parent().find("p").html(ht);
			    		/*var result=[{"date":"总计","tdda":12,"thda":34,"tcda":465,"kysj":243,"kysz":355,"rs_tydh":234,"rs_tysz":23,"rs_tycp":34,"ky_money":34365,"qz_money":2432,"fxrk":545,"black":0.3,"white":0.8},
			    		{"date":"2018-05-01","tdda":12,"thda":34,"tcda":465,"kysj":243,"kysz":355,"rs_tydh":234,"rs_tysz":23,"rs_tycp":34,"ky_money":34365,"qz_money":2432,"fxrk":545,"black":0.2,"white":0.8}];

			    		var ht=setOperation(result);
		    			$("#opTbody").html(ht);
		    			$('#operationDiv').perfectScrollbar("update");*/
				    	$.ajax({
				    		type:"POST",
				    		url:"${ctx}/sysTask/analyzePage9/9.do",
				    		data:{date:idVal},
				    		success:function(result){
				    			var ht=setOperation(result);
				    			$("#opTbody").html(ht);
						    	$("#opTbody tr").each(function(){
				    				$(this).find("td span").each(function(i){
				    					$(this).css("width",thead_w[i]);
				    				})
				    			});
				    			$('#operationDiv').perfectScrollbar("update");	
				    			$('.scrollTbody').perfectScrollbar("update");	    			
				    		}
				    	});
				    }
				});
				

				//时间的切换
				$(".timeRange span").click(function(){
					var timeval=null;
					var id=null;
					//var ageDate = $(this).parent().find(".active").data("string");
					$(this).parent().children().removeClass("active");
					$(this).addClass("active");
					//var nowDate = $(this).parent().find(".active").data("string");
					var id=$(this).parent().data("id");
					/*if(ageDate==nowDate){
						return false;
					}*/
					timeval = $(this).data("time");
					//var st = $(this).data("string");
					if(id=="markMoney"){
						var ht="近"+$(this).text()+"标记涉及金额";
						$(this).parent().parent().find("p").html(ht);//请求成功时候更改标题
						markMoneyChart.showLoading();
						$.ajax({
							type:"POST",
							url:"${ctx}/sysTask/analyzePage2/2.do",
							data:{time:timeval},
							dataType:"json",
							success:function(result){
								setCateGroup(result);//标注涉及金额
								
							},
							error:function(){
								
							}
						});
						
					}/*else if(id=="caseNum"){
						var ht="近"+$(this).text()+"标注统计";
						$.ajax({
							type:"POST",
							url:"${ctx}/sysTask/analyzePage/1.do",
							data:{time:timeval},
							dataType:"json",
							success:function(result){
								setmarkCount(result);//标注统计
								$(this).parent().parent().find("p").html(ht);//请求成功时候更改标题
							},
							error:function(){
								
							}
						});
					}*/else if(id=="taskNum"){
						var ht="近"+$(this).text()+"任务分配量";
						$(this).parent().parent().find("p").html(ht);//请求成功时候更改标题
						taskChart.showLoading();
						$.ajax({
							type:"POST",
							url:"${ctx}/sysTask/analyzePage2/1.do",
							data:{time:timeval},
							dataType:"json",
							success:function(result){
								setTaskOption(result);//分配量
								
							},
							error:function(){
								
							}
						});
					}else if(id=="user"){
						var ht="近"+$(this).text()+"系统使用频次";
						$(this).parent().parent().find("p").html(ht);//请求成功时候更改标题
						userChart.showLoading();
						$.ajax({
							type:"POST",
							url:"${ctx}/sysTask/analyzePage2/3.do",
							data:{time:timeval},
							dataType:"json",
							success:function(result){
								setUserOpaOption(result);//操作频次
								
							},
							error:function(){
								
							}
						});
					}else if(id=="taskDeal"){
						var ht="近"+$(this).text()+"任务处理情况";
						$(this).parent().parent().find("p").html(ht);//请求成功时候更改标题
						taskDealChart.showLoading();
						$.ajax({
							type:"POST",
							url:"${ctx}/sysTask/analyzePage2/4.do",
							data:{time:timeval},
							dataType:"json",
							success:function(result){
								setTaskDealChart(result);//处理率
								
							},
							error:function(){
								
							}
						});
					}
				})
				
			})();
			resize();
			$(window).resize(function(){	
				resize();
			});
			function resize(){
				//获取窗口高度
				var windowheight=$(window).height();
				  
				if(markMoneyChart != null && markMoneyChart != undefined){
					markMoneyChart.resize(); //标注涉及金额
				}
				/*if(markCountChart != null && markCountChart != undefined){
					markCountChart.resize();//标注统计
				}	*/			
				if(taskChart != null && taskChart != undefined){
					taskChart.resize();//处理量
				}
				if(userChart != null && userChart != undefined){
					userChart.resize();//操作频次
				}
				if(taskDealChart != null && taskDealChart != undefined){
					taskDealChart.resize();//任务处理率
				}
				
				$('#isScroll').perfectScrollbar();
				$('#operationDiv').perfectScrollbar();
				$('.scrollTbody').perfectScrollbar();
				$('#isScroll').perfectScrollbar("update");
			}
			
			//定义颜色
			var col = ["rgba(193,35,43,0.8)","rgba(255, 204, 0,0.8)","rgba(243, 88, 51,0.8)","rgb(39,114,123)","rgb(155,202,99)","rgb(254,168,145)","rgb(243,164,59)"];
			//标注涉及金额			
			var markMoneyChart = echarts.init(document.getElementById("markMoney"));
			function setCateGroup(data){
				/*var result = {
						data:{
							legend:["人均涉及金额","涉及金额"],
				            x: ['上海','华南','江西','北京','天津'],
							y:{
								"人均涉及金额":[1098,980,1308,450,234],
								"涉及金额":[12738,1234,4565,4334,2345]
							},
							col:{
								"人均涉及金额":'#5793f3',
								"涉及金额":'#d14a61'
							}
						}
				}*/
				var data=markMoneyChart.setOption(getBarOption(data.data));
				markMoneyChart.hideLoading();
			}			
		   	
			/*//标注统计
			var markCountChart = echarts.init(document.getElementById("markCount"));
			function setmarkCount(data){
				var result = {
					data:{
						title:{text: '近一周标注趋势'},
						legend:["标注趋势","总已处理"],
						x:['上海','华南','江西','海南','北京','天津'],
						y:{
							"标注趋势":[1098,980,1308,450,234,880],
							"总已处理":[109,90,308,450,234,80]
						},
						data:{
							data1:[1098,980,1308,450,234,880],
							data2:[109,90,308,450,234,80]
						}
					}
				};
				markCountChart.setOption(getLineOption2(data));
				markCountChart.hideLoading();
			}*/
			
			//分配量
			var taskChart = echarts.init(document.getElementById("taskNum"));
			function setTaskOption(data){
				/*var result = {
					legend:['总分配量','处理量','人均处理量'],
		            x: ['上海','华南','江西','海南','北京','天津'],
					y:{
						'总分配量':[],
						'处理量':[],
						'人均处理量':[]
					}
					data:{
						data1:[1000,100,100,100,100,100],
						data2:[20,20,20,20,20,20],
						data3:[5,5,5,5,5,5]
					}
				}*/
				taskChart.setOption(getTaskOption(data));
				taskChart.hideLoading();
			}
			
			//操作频次					
			var userChart = echarts.init(document.getElementById("user"));
			function setUserOpaOption(data){
				/*var result = {
					legend:['总操作频次','人均频次'],
		            x: ['上海','华南','江西','海南','北京','天津'],
					y:{
						'总操作频次':[45,554,698,546,456,565],
						'人均频次':[20,225,90,70,94,82]
					}
				}*/
				userChart.setOption(getUserOption2(data));
				userChart.hideLoading();
			}
		   
		   	//任务处理率
		   	var taskDealChart = echarts.init(document.getElementById("taskDeal"));
			function setTaskDealChart(data){
				/*var result = {
					legend:['北京','上海','广州','浙江','福建','杭州'],
					data:[
			                {value:335, name:'北京'},
			                {value:310, name:'上海'},
			                {value:234, name:'广州'},
			                {value:135, name:'浙江'},
			                {value:1548, name:'福建'},
			                {value:1548, name:'杭州'}
			            ]
				}	*/			
				taskDealChart.setOption(getTaskDealOption(data));
				taskDealChart.hideLoading();
			}
		   	
			function init(){
				 //获取表头的width
			    var thead_w=[];
			    $(".fixedThead .thW span").each(function(i){
			    	var w=Math.ceil($(this).width());
			    	if(i==0){
			    		w=w-1;
			    	}
			    	thead_w.push(w);
			    });
				markMoneyChart.showLoading();//标注涉及金额setCateGroup();
				//markCountChart.showLoading();//标注统计setmarkCount();
				taskChart.showLoading();//分配量setTaskOption();
				userChart.showLoading();//操作频次setUserOpaOption();
				taskDealChart.showLoading();//任务处理率setTaskDealChart();
				$.ajax({
		    		type:"POST",
		    		url:"${ctx}/sysTask/analyzePage9/9.do",
		    		data:{},
		    		success:function(result){
		    			var ht=setOperation(result);
		    			$("#opTbody").html(ht);
		    			$("#opTbody tr").each(function(){
		    				$(this).find("td span").each(function(i){
		    					$(this).css("width",thead_w[i]);
		    				})
		    			});
		    			$('#operationDiv').perfectScrollbar("update");		    			
		    		}
		    	});
				$.ajax({
					type:"POST",
					url:"${ctx}/sysTask/analyzePage2/2.do",
					data:{},
					dataType:"json",
					success:function(result){
						setCateGroup(result);//标注涉及金额
					},
					error:function(){
						
					}
				});
				/*$.ajax({
					type:"POST",
					url:"${ctx}/sysTask/analyzePage/1.do",
					data:{},
					dataType:"json",
					success:function(result){
						setmarkCount(result);//标注统计
					},
					error:function(){
						
					}
				});*/
				$.ajax({
					type:"POST",
					url:"${ctx}/sysTask/analyzePage2/1.do",
					data:{},
					dataType:"json",
					success:function(result){
						setTaskOption(result);//分配量
					},
					error:function(){
						
					}
				});
				$.ajax({
					type:"POST",
					url:"${ctx}/sysTask/analyzePage2/3.do",
					data:{},
					dataType:"json",
					success:function(result){
						setUserOpaOption(result);//操作频次
					},
					error:function(){
						
					}
				});
				$.ajax({
					type:"POST",
					url:"${ctx}/sysTask/analyzePage2/4.do",
					data:{},
					dataType:"json",
					success:function(result){
						setTaskDealChart(result);
					},
					error:function(){
						
					}
				});							
			}
			init();
			function setOperation(data){
					var date="总计";
					var tdda=0;
					var	thda=0;
					var	tcda=0;
					var	kysj=0;
					var	kysz=0;
					var	rs_tydh=0;
					var	rs_tysz=0;
					var	rs_tycp=0;
					var	zc=0;
					var	ky=0;
					var	qz=0;
					var	ky_money=0;
					var	qz_money=0;
					var	fxrks=0;
					var	bls=0;
					var	whs=0;
			     	var str="";
			     	for(var i=0;i<data.length;i++){
			     		var item=data[i];
			     		tdda+=Number(item.tdda);thda+=Number(item.thda);tcda+=Number(item.tcda);kysj+=Number(item.kysj);kysz+=Number(item.kysz);rs_tydh+=Number(item.rs_tydh);
			     		rs_tysz+=Number(item.rs_tysz);rs_tycp+=Number(item.rs_tycp);zc+=Number(item.zc);ky+=Number(item.ky);qz+=Number(item.qz);ky_money+=Number(item.ky_money);
			     		qz_money+=Number(item.qz_money);fxrks+=Number(item.fxrk);bls+=Number(item.black);whs+=Number(item.white);
			     		
			     		
			     		var bl=item.fxrk==0?0:(Number(item.black)/Number(item.fxrk)*100).toFixed(2)+'%';
			     		var wh=item.fxrk==0?0:(Number(item.white)/Number(item.fxrk)*100).toFixed(2)+'%';
			     		str+="<tr>"
							+"<td><span>"+item.date+"</span></td>"
							+"<td><span>"+item.tdda+"</span></td>"
							+"<td><span>"+item.thda+"</span></td>"
							+"<td><span>"+item.tcda+"</span></td>"
							+"<td><span>"+item.kysj+"</span></td>"
							+"<td><span>"+item.kysz+"</span></td>"
							+"<td><span>"+item.rs_tydh+"</span></td>"
							+"<td><span>"+item.rs_tysz+"</span></td>"
							+"<td><span>"+item.rs_tycp+"</span></td>"
							+"<td><span>"+item.zc+"</span></td>"
							+"<td><span>"+item.ky+"</span></td>"
							+"<td><span>"+item.qz+"</span></td>"
							+"<td><span>"+Number(item.ky_money).toFixed(2)+"</span></td>"
							+"<td><span>"+Number(item.qz_money).toFixed(2)+"</span></td>"
							+"<td><span>"+item.fxrk+"</span></td>"
							+"<td><span>"+bl+"</span></td>"
							+"<td><span>"+wh+"</span></td>"
						+"</tr>";
			     	}
			     	var bls=fxrks==0?0:(Number(bls)/Number(fxrks)*100).toFixed(2)+'%';
			     	var whs=fxrks==0?0:(Number(whs)/Number(fxrks)*100).toFixed(2)+'%';
			     	str+="<tr>"
							+"<td><span>"+date+"</span></td>"
							+"<td><span>"+tdda+"</span></td>"
							+"<td><span>"+thda+"</span></td>"
							+"<td><span>"+tcda+"</span></td>"
							+"<td><span>"+kysj+"</span></td>"
							+"<td><span>"+kysz+"</span></td>"
							+"<td><span>"+rs_tydh+"</span></td>"
							+"<td><span>"+rs_tysz+"</span></td>"
							+"<td><span>"+rs_tycp+"</span></td>"
							+"<td><span>"+zc+"</span></td>"
							+"<td><span>"+ky+"</span></td>"
							+"<td><span>"+qz+"</span></td>"
							+"<td><span>"+Number(ky_money).toFixed(2)+"</span></td>"
							+"<td><span>"+Number(qz_money).toFixed(2)+"</span></td>"
							+"<td><span>"+fxrks+"</span></td>"
							+"<td><span>"+bls+"</span></td>"
							+"<td><span>"+whs+"</span></td>"
						+"</tr>";
			     	return str;
			     }
		 			
		 	/*
			 *  画折线图
			 */
			function getLineOption(data){
				var option = {
					grid: {
						top: '15%',
						left: '2%',
						right: '8%',
						bottom: '5%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: data.x,
						axisTick:{show:true,inside:true},
						splitLine:{show:false},
						axisLine:{
							lineStyle:{
								color:"#344f6b"
							}
						},
						axisLabel:{
							textStyle:{color:"#ffffff",fontSize:12}
						}
					},
					yAxis: {
						type: 'value',
						axisTick:{show:false},
						splitLine:{
							show:false,
						},
						axisLine:{
							lineStyle:{
								color:"#344f6b"
							}
						},
						axisLabel:{
							textStyle:{color:"#ffffff",fontSize:12}
						}
					},
					series:[1245,3456,345,3256,678,973,2984]
				};
				for(var i=0;i<data.legend.length;i++){
					option.series.push({		
						clipOverflow:false, 			
						symbol:'circle',
						symbolSize:6,
						name:data.legend[i],
						type:'line',
						//stack: '总量',
						data:data.y[data.legend[i]],
						lineStyle:{
							normal:{
								color:col[i],
								opacity:0.5
							}
						},
						itemStyle:{
							normal:{
								color:col[i],
								opacity:0.7
							}
						},
						areaStyle:{
							normal:{
								opacity:0.3
							}
						},
						smooth:true
					})
				}
				// 使用刚指定的配置项和数据显示图表。
				return option;
			}
			/*
			 *  画折线图2
			 */
			function getLineOption2(data){
				option = {
				    /*title :data.title,*/
				    tooltip : {
				        trigger: 'axis'
				    },
				    legend: {
				        data:data.legend
				    },
				    /*toolbox: {
				        show : true,
				        feature : {
				            mark : {show: true},
				            dataView : {show: true, readOnly: false},
				            magicType : {show: true, type: ['line', 'bar']},
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },*/
				    calculable : true,
				    xAxis : [
				        {
				            type : 'category',
				            boundaryGap : false,
				            data :data.x,
				            splitLine:{
				            	show:false
				            },
				            axisLabel:{
				            	textStyle:{
				            		color:'#fff'
				            	}				            	
				            }
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value',
				            axisLabel : {
				                formatter: '{value} 条'
				            },
				            splitLine:{
				            	show:false
				            },
				            axisLabel:{
				            	textStyle:{
				            		color:'#fff'
				            	}				            	
				            }
				        }
				    ],
				    series : [
				        {
				            name:'总标注最高',
				            type:'line',
				            data:data.data.data1,
				            markPoint : {
				                data : [
				                    {type : 'max', name: '最大值'},
				                    {type : 'min', name: '最小值'}
				                ]
				            },
				            markLine : {
				                data : [
				                    {type : 'average', name: '平均值'}
				                ]
				            },
				            lineStyle:{
				            	normal:{
				            		color:"rgb(243, 88, 51)"
				            	}
				            },
				            itemStyle:{
				            	normal:{
				            		color:"rgb(243, 88, 51)"
				            	}
				            },
			            	smooth:true
				        },
				        {
				            name:'总已处理最高',
				            type:'line',
				            data:data.data.data2,
				            markPoint : {
				                data : [
				                    {type : 'max', name: '最大值'},
				                    {type : 'min', name: '最小值'}
				                ]
				            },
				            markLine : {
				                data : [
				                    {type : 'average', name: '平均值'}
				                ]
				            },
							lineStyle:{
				            	normal:{
				            		color:"rgb(255, 204, 0)"
				            	}
				            },
				            itemStyle:{
				            	normal:{
				            		color:"rgb(255, 204, 0)"
				            	}
				            },
			           		smooth:true	
				        }
				    ]
				};
				return option;
			}
			
		 	function getBarOption(data){
		 		var option = {
					grid: {
						top: '18%',
						left: '4%',
						right: '4%',
						bottom: '5%',
						containLabel: true
					},
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'cross',
				            crossStyle: {
				                color: '#fff'
				            }
				        }
				      /*formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}'*/
				    },
				    legend: {
				        data:data.legend,
				        textStyle:{
				        	color:"#ffffff"
				        }
				    },
				    xAxis: [
				        {
				            type: 'category',
				            data: data.x,
					        axisTick:{show:true,inside:true},
							splitLine:{show:false},
							axisLine:{
								lineStyle:{
									color:"#344f6b"
								}
							},
							axisLabel:{
								interval:0,
								textStyle:{color:"#ffffff",fontSize:8}
							},
							axisPointer:{
								show:true
							}
				        }
				    ],
				    yAxis: [
				        {
				            type: 'value',
				            name: '元',
				            nameTextStyle: {
				            	color:"#ffffff"
				            },
				            axisTick:{show:false},
							splitLine:{
								show:false,
							},
							axisLine:{
								lineStyle:{
									color:"#344f6b"
								}
							},
							axisLabel:{
								textStyle:{
									color:"#ffffff",
									fontSize:12
								}
							},
							axisPointer:{
								label:{
									backgroundColor:'#5793f3'
								}
							}
				        },
				        {
				            type: 'value',
				            name: '元',
				            nameTextStyle: {
				            	color:"#ffffff"
				            },
				            axisTick:{show:false},
							splitLine:{
								show:false,
							},
							axisLine:{
								lineStyle:{
									color:"#344f6b"
								}
							},
							axisLabel:{
								textStyle:{color:"#ffffff",fontSize:12}
							},
							axisPointer:{
								label:{
									backgroundColor:'#d14a61'
								}
							}
				        }
				    ],
				    series: []
				};
		 		for(var i=0;i<data.legend.length;i++){
	 				option.series.push({		
						name:data.legend[i],
			            type:'bar',
			            data:data.y[data.legend[i]],
			            /*yAxisIndex: data.legend[i]=="人均涉案金额"?0:1,*/
			            itemStyle:{
			            	normal:{
			            		color:col[i],
			            		opacity:0.9
			            	}
			            }
					});					
				}
		 		return option;
		 	}
		 			 
		 	/*
		 	 * 饼图,任务处理率
		 	 **/
		 	function getTaskDealOption(data){
		 		var option = {
				    title : [{
				        text: '各分公司任务处理率',
				        x:'center',
				        y:"5%",
				        textStyle:{
				        	color:"#fff",
				        },
				        textAlign: 'center'
				    }],
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'cross',
				            crossStyle: {
				                color: '#fff'
				            }
				        }
				    },
				    legend: [{
				        orient: 'horizontal',
				        bottom: 0,
				        data: data.legend,
				    	textStyle:{
				    		color:"#fff"
				    	}
				    }],			    				   
				    series : [
				        {
				        	tooltip : {
						        trigger: 'item',
						        formatter: "{b}<br/>{a} :{c}%<br/> 占饼图的百分比: {d}%"
						    },
				            name: '处理率',
				            type: 'pie',
				            radius : '60%',
				            center: ['45%', '50%'],
				            data:data.data,
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            },
				            labelLine:{
				            	normal:{
				            		lenght2:20
				            	}
				            }
				        }
				    ]
				};
		 		return option;
		 	}
		 	//操作频次
		 	function getUserOption2(data){
		 		var option = {
				   /* title : [{
				        text: '系统操作统计',
				        subtext: '',
				        x:'center',
				        y:"5%",
				        textStyle:{
				        	color:"#fff",
				        },
				        textAlign: 'center'
				    }],*/
				    legend: [{
				        orient: 'horizontal',
				        bottom: 0,
				        data: data.legend,
				    	textStyle:{
				    		color:"#fff"
				    	}
				    }],
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'cross',
				            crossStyle: {
				                color: '#fff'
				            }
				        }
				    },
				    grid:[{
				    	top:60,
				    	width:'97%',
				    	bottom:30,
				    	right:8,
				    	containLabel:true
				    }],
				    xAxis: [
					        {
					            type: 'category',
					            data: data.x,
						        axisTick:{show:true,inside:true},
								splitLine:{show:false},
								axisLine:{
									lineStyle:{
										color:"#344f6b"
									}
								},
								axisLabel:{
									interval:0,
									textStyle:{color:"#ffffff",fontSize:8}
								},
								axisPointer:{
									show:true
								}
					        }
					    ],
					    yAxis: [
					        {
					            type: 'value',
					            name: '次',
					            nameTextStyle: {
					            	color:"#ffffff"
					            },
					            axisTick:{show:false},
								splitLine:{
									show:false,
								},
								axisLine:{
									lineStyle:{
										color:"#344f6b"
									}
								},
								axisLabel:{
									textStyle:{
										color:"#ffffff",
										fontSize:12
									}
								}
					        }
					    ],
					series : []
				};
				for(var i=0;i<data.legend.length;i++){
					option.series.push({
						type:"bar",
						name:data.legend[i],
						data:data.y[data.legend[i]],
						itemStyle:{
			            	normal:{
			            		color:col[i],
			            		opacity:0.9
			            	}
			            }
					})
				}
		 		return option;
		 	}
		 	//
		 	function getTaskOption(data){
		 		var option = {
				    legend: [{
				        orient: 'horizontal',
				        bottom: 0,
				        data: data.legend,
				    	textStyle:{
				    		color:"#fff"
				    	}
				    }],
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'cross',
				            crossStyle: {
				                color: '#fff'
				            }
				        }
				        /*formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}'*/
				    },
				    grid:[{
				    	top:60,
				    	width:'97%',
				    	bottom:30,
				    	right:8,
				    	containLabel:true
				    }],
				    xAxis: [
					        {
					            type: 'category',
					            data: data.x,
						        axisTick:{show:true,inside:true},
								splitLine:{show:false},
								axisLine:{
									lineStyle:{
										color:"#344f6b"
									}
								},
								axisLabel:{
									interval:0,
									textStyle:{color:"#ffffff",fontSize:8}
								},
								axisPointer:{
									show:true
								}
					        }
					    ],
					    yAxis: [
					        {
					            type: 'value',
					            name: '条',
					            nameTextStyle: {
					            	color:"#ffffff"
					            },
					            axisTick:{show:false},
								splitLine:{
									show:false,
								},
								axisLine:{
									lineStyle:{
										color:"#344f6b"
									}
								},
								axisLabel:{
									textStyle:{
										color:"#ffffff",
										fontSize:12
									}
								}
					        }
					    ],
					series : []
				};
				for(var i=0;i<data.legend.length;i++){
					option.series.push({
						type:"bar",
						name:data.legend[i],
						data:data.y[data.legend[i]],
						itemStyle:{
			            	normal:{
			            		color:col[i],
			            		opacity:0.9
			            	}
			            }
					})
				}
		 		return option;
		 	}
		 			 	
		 </script>
	</body>
</html>
