<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/include/taglib.jsp" %>
<%@page import="java.util.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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_ago.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;
}
</style>
</head>
<body class="bg1">
<div class="headCon">
	<jsp:include page="../top.jsp">
	<jsp:param name="index" value="2" />
	</jsp:include>
</div>
<hna:permission privilege="sysTask.statisExport">
<div id="statisExport">
	导出
</div>
</hna:permission>
<div class="clear"></div>
<div class="fullScren">
	<div class="container">
		<div class="block">
			<div class="allNumber involve_m">
				<div class="factorCon">
					<img class="block_l" src="${ctx}/images/indexNew/moneysj.png">
					<div class="block_r">
					    <p><b id="sjje" data-type="sjje">0</b></p>
					    <p>模型涉案总金额</p>
					</div>
				</div>
			</div>
			<div class="allNumber reduce_m">
				<div class="factorCon">
					<img class="block_l" src="${ctx}/images/indexNew/moneyback.png">
					<div class="block_r">
					    <p><b id="jsje" data-type="jsje">0</b></p>
					    <p>人工标注涉案金额</p>
					</div>
				</div>	
			</div>
			<div class="allNumber  caseNum">
				<div class="factorCon">
					<img class="block_l" src="${ctx}/images/indexNew/allCase.png">
					<div class="block_r">
					    <p><b id="ajzs" data-type="ajzs">0</b></p>
					    <p>可疑报案总数</p>
					</div>
				</div>	
			</div>
			<div class="allNumber1 userNum">
				<div class="factorCon">
					<img class="block_l" src="${ctx}/images/indexNew/allUser.png">
					<div class="block_r">
					    <p><b id="yhzs" data-type="yhzs">0</b></p>
					    <p>用户总数</p>
					</div>
				</div>
			</div>
		</div>
		
		<div class="block">
			<div class="case_pic backg2" style="height:351px;">
				<p class="title">近30天案件相关图</p>
				<div id="cateGroup" style="height:200px;width:100%;">
					
				</div>
				<div id="smallpie" style="height:120px;"></div>
			</div>
			<div class="case_add backg2" style="height:351px;">
				<p class="title">案件增长</p>
				<div id="caseNum" style="height:250px;width:100%;"></div>
				<div class="innerContentBox" id="caseNumDes">
					<span>本月案件数：<b id="thisMonthCase"></b>件</span>
					<span style="margin-left:15px;">比上月增长：<b id="thisMonthRatio"></b></span>
				</div>
			</div>
		</div>
		<div class="block">
			<div class="typeTimeNum backg2">
				<p class="title">近30天类型—时间—数量</p>
				<div id="cateTime" style="height:300px;width:100%;">
					
				</div>
				<div class="basicTab">
					<table border="1"> 
						<thead id="theadCon">
							
						</thead>
						<tbody id="tbodyCon">
							
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<div class="block">
			<div class="hotMark backg2">
				<p class="title">近一周活跃用户</p><!--热区标识-->
				<div id="hotMarkCon" class="basicTab td50" style="overflow:auto;height:269px;position:relative;">
					<table style="border:none" id="hotRange">
						<thead>
							<tr>
								<th>排名</th><th>用户名称</th><th>操作次数</th>
							</tr>
						</thead>
						<tbody>
							
						</tbody>
					</table>
				</div>
			</div>
			<div class="user_pic backg2">
				<p class="title">用户统计</p>
				<div>
					<div id="user" style="height:260px;width:100%;">
						
					</div>
				</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>
	$("#statisExport").click(function(){
		var $form = $("<form style='display:none' target='downloadframe' action='${ctx}/sysTask/download/analyzePage.do' method='post'>");
		$("body").append($form);
		$form.submit();
		$form.remove();
	});
	resize();
	$(window).resize(function(){	
		resize();
	});
	function resize(){
		//获取窗口高度
		var windowheight=$(window).height();
		  
		if(caseNumChart != null && caseNumChart != undefined){
			caseNumChart.resize();
		}
		if(cateGroupChart != null && cateGroupChart != undefined){
			cateGroupChart.resize();
		}
		if(cateTimeChart != null && cateTimeChart != undefined){
			cateTimeChart.resize();
		}
		if(userChart != null && userChart != undefined){
			userChart.resize();
		}
		if(smallpie != null && smallpie != undefined){
			smallpie.resize();
		}
	}
	
	var numbers = new Object();
	function setNumbers(result){
		$(".factorCon [data-type]").each(function(){
			var type = $(this).data("type");
			var num = result[type] || 0;
			if(numbers[type] == undefined){
				numbers[type] = new CountUp(type,0,num);
				numbers[type].start();
				$(this).data("val",num);
			}else{
				num = num || $(this).data("val");
				numbers[type].update(num);
			}
		});
	}
	//获取当前时间
	function nowDate(ti){
		if(ti==undefined){
			var time=new Date(),
			y=time.getFullYear(),
			m=z(time.getMonth()+1),
			d=z(time.getDate());		    
		}else{
			var t=new Date(ti),
			y=t.getFullYear(),
			m=z(t.getMonth()+1),
			d=z(t.getDate());
		}
		return y+'/'+m+'/'+d;
		//console.log(ss);
	}
	function z(s){
		return s<10?'0'+s:s;
	}
	
	var money1 = null;
	var money2 = null;
	function setNum(){
		var num1=198897;
		var num2=2987672893;
		money1 = new CountUp("money1",$("#money1").data("num"),num1);
		money2 = new CountUp("money2",$("#money2").data("num"),num2);
		money1.start();
		money2.start();
	}
	
	var caseNumChart = echarts.init(document.getElementById("caseNum"));
	function setCaseNum(data){
		caseNumChart.setOption(getLineOption(data));
		caseNumChart.hideLoading();
		$("#thisMonthCase").html(data.thisMonth);
		$("#thisMonthRatio").html(data.ratio+"%");
	}
	
	var cateGroupChart = echarts.init(document.getElementById("cateGroup"));
	function setCateGroup(data){
		cateGroupChart.setOption(getBarOption(data));
		cateGroupChart.hideLoading();
	}
	
	var cateTimeChart = echarts.init(document.getElementById("cateTime"));
	function setCateTime(data){	
		var nowTime=nowDate();
		var t=new Date(nowTime);
		var ti=t.getTime();
		var tim=ti-(24*60*60*30*1000);
		data.x[0]=nowDate(tim)+"—至今";
		cateTimeChart.setOption(getCateTimeOption(data));
		cateTimeChart.hideLoading();
	}
	
	function setCaseTable(result){
		var len = result.title.length+1;
		var ratio = Math.floor(100/len);
		var tableTitle = "<tr><th rowspan='2' style='width:"+ratio+"%'></th>";
		for(var i=0;i<result.title.length;i++){
			tableTitle +=  "<th colspan='2' style='width:"+ratio+"%'>"+result.title[i]+"</th>";
		}
		tableTitle += "</tr><tr>";
		for(var i=0;i<result.title.length;i++){
			tableTitle +=  "<th>可疑</th><th>欺诈</th>";
		}
		tableTitle += "</tr>";
		$("#theadCon").html(tableTitle);
		
		var nowTime=nowDate();
		var t=new Date(nowTime);
		var ti=t.getTime();
		var tim=ti-(24*60*60*30*1000);
		
		var str="";
		for(var i=0;i<result.data.length;i++){
			result.data[i].time=nowDate(tim);
			str+="<tr>"
				+"<td>"+result.data[i].time+"—至今</td>";
			for(var j=0;j<result.title.length;j++){
				var susp = result.data[i].data[result.title[j]]==undefined?'-':result.data[i].data[result.title[j]].suspicious;
				var fraud = result.data[i].data[result.title[j]]==undefined?'-':result.data[i].data[result.title[j]].fraud;
				str	+=	"<td>"+susp+"</td>"
					+	"<td>"+fraud+"</td>";
			}
			str	+= "</tr>";

		}
		$("#tbodyCon").html(str);
	}
	
	var userChart = echarts.init(document.getElementById("user"));
	function setUserChart(data){
		userChart.setOption(getUserOption(data));
		userChart.hideLoading();
	}
	
	function hotMark(data){
		var result = {data:data};
		var str = "";
		for(var i=0;i<result.data.length;i++){
			str += "<tr><td>"+(i+1)+"</td><td>"+result.data[i].name+"</td><td>"+result.data[i].time+"</td></tr>";
		}
		$("#hotRange tbody").html(str);
		$('#hotMarkCon').perfectScrollbar();
	}
	
	var smallpie = echarts.init(document.getElementById('smallpie')); 
   	function smallpieG(data){
		smallpie.setOption(samllBarsOption(data));
		smallpie.hideLoading();
   	}
   	
	function init(){
		/*$.ajax({
			type:"POST",
			url:"${ctx}/sysTask/analyzePage.do",
			data:{},
			dataType:"json",
			success:function(result){
				setNumbers(result.data0);
				setCaseNum(result.data1);
				setCateGroup(result.data2);
				setCateTime(result.data3);
				setCaseTable(result.data4);
				setUserChart(result.data5);
				hotMark(result.data6);
				smallpieG(result.data7);
			},
			error:function(){
				
			}
		});	*/
		caseNumChart.showLoading();
		cateGroupChart.showLoading();
		cateTimeChart.showLoading();
		userChart.showLoading();
		smallpie.showLoading();
		$.ajax({
			type:"POST",
			url:"${ctx}/sysTask/analyzePage/0.do",
			data:{},
			dataType:"json",
			success:function(result){
				setNumbers(result);
			},
			error:function(){
				
			}
		});
		$.ajax({
			type:"POST",
			url:"${ctx}/sysTask/analyzePage/1.do",
			data:{},
			dataType:"json",
			success:function(result){
				setCaseNum(result);
			},
			error:function(){
				
			}
		});
		$.ajax({
			type:"POST",
			url:"${ctx}/sysTask/analyzePage/27.do",
			data:{},
			dataType:"json",
			success:function(result){
				setCateGroup(result.data2);
				smallpieG(result.data7);
			},
			error:function(){
				
			}
		});
		$.ajax({
			type:"POST",
			url:"${ctx}/sysTask/analyzePage/34.do",
			data:{},
			dataType:"json",
			success:function(result){
				setCateTime(result.data3);
				setCaseTable(result.data4);
			},
			error:function(){
				
			}
		});
		$.ajax({
			type:"POST",
			url:"${ctx}/sysTask/analyzePage/5.do",
			data:{},
			dataType:"json",
			success:function(result){
				setUserChart(result);
			},
			error:function(){
				
			}
		});
		$.ajax({
			type:"POST",
			url:"${ctx}/sysTask/analyzePage/6.do",
			data:{},
			dataType:"json",
			success:function(result){
				hotMark(result);
			},
			error:function(){
				
			}
		});
	}
	init();
 
	
 	/*
	 *  画折线图
	 */
	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:"#1C3042"
					}
				},
				axisLabel:{
					textStyle:{color:"#ffffff",fontSize:12}
				}
			},
			yAxis: {
				type: 'value',
				axisTick:{show:false},
				splitLine:{
					show:false,
				},
				axisLine:{
					lineStyle:{
						color:"#1C3042"
					}
				},
				axisLabel:{
					textStyle:{color:"#ffffff",fontSize:12}
				}
			},
			series:[]
		};
		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:data.col[i],
						opacity:0.5
					}
				},
				itemStyle:{
					normal:{
						color:data.col[i],
						opacity:0.7
					}
				},
				areaStyle:{
					normal:{
						opacity:0.3
					}
				},
				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'
		            }
		        }
		    },
		    legend: {
		        data:data.legend,
		        textStyle:{
		        	color:"#ffffff"
		        }
		    },
		    xAxis: [
		        {
		            type: 'category',
		            data: data.x,
			        axisTick:{show:true,inside:true},
					splitLine:{show:false},
					axisLine:{
						lineStyle:{
							color:"#1C3042"
						}
					},
					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:"#1C3042"
						}
					},
					axisLabel:{
						textStyle:{
							color:"#ffffff",
							fontSize:12
						}
					},
					axisPointer:{
						label:{
							backgroundColor:data.col["案件数"]
						}
					}
		        },
		        {
		            type: 'value',
		            name: 'rmb',
		            nameTextStyle: {
		            	color:"#ffffff"
		            },
		            axisTick:{show:false},
					splitLine:{
						show:false,
					},
					axisLine:{
						lineStyle:{
							color:"#1C3042"
						}
					},
					axisLabel:{
						textStyle:{color:"#ffffff",fontSize:12}
					},
					axisPointer:{
						label:{
							backgroundColor:data.col["涉及金额"]
						}
					}
		        }
		    ],
		    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:data.col[data.legend[i]],
	            		opacity:0.9
	            	}
	            }
			});
		}
 		return option;
 	}
 	
 	function getCateTimeOption(data){
 		var option = {
			grid: {
				top: '18%',
				left: '4%',
				right: '4%',
				bottom: '5%',
				containLabel: true
			},
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'cross',
		            crossStyle: {
		                color: '#fff'
		            }
		        }
		    },
		    legend: {
		        data:data.legend,
		        textStyle:{
		        	color:"#ffffff"
		        },
		        top:10
		    },
		    xAxis: [
		        {
		            type: 'category',
		            data: data.x,
			        axisTick:{show:true,inside:true},
					splitLine:{show:false},
					axisLine:{
						lineStyle:{
							color:"#1C3042"
						}
					},
					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:"#1C3042"
						}
					},
					axisLabel:{
						textStyle:{
							color:"#ffffff",
							fontSize:12
						}
					},
					axisPointer:{
						label:{
							//backgroundColor:data.col["案件数"]
						}
					}
		        }
		    ],
		    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]],
	            itemStyle:{
	            	normal:{
	            		//color:data.col[data.legend[i]],
	            		opacity:0.9
	            	}
	            }
			});
		}
 		return option;
 	}
 	
 	function getUserOption(data){
 		Array.prototype.push.apply(data.leftData.legend,data.rightData.legend);
 		var option = {
		    title : [{
		        text: '用户分布情况',
		        subtext: '总计'+data.leftData.num+'人',
		        x:'25%',
		        y:"5%",
		        textStyle:{
		        	color:"#fff",
		        },
		        textAlign: 'center'
		    },{
		        text: '近一周系统操作统计',
		        subtext: '',
		        x:'75%',
		        y:"5%",
		        textStyle:{
		        	color:"#fff",
		        },
		        textAlign: 'center'
		    }],
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'cross',
		            crossStyle: {
		                color: '#fff'
		            }
		        }
		    },
		    legend: [{
		        orient: 'horizontal',
		        bottom: 0,
		        data: data.leftData.legend,
		    	textStyle:{
		    		color:"#fff"
		    	}
		    }],
		    grid:[{
		    	top:60,
		    	width:'50%',
		    	bottom:82,
		    	right:8,
		    	containLabel:true
		    }],
		    xAxis: [
			        {
			            type: 'category',
			            data: data.rightData.x,
				        axisTick:{show:true,inside:true},
						splitLine:{show:false},
						axisLine:{
							lineStyle:{
								color:"#1C3042"
							}
						},
						axisLabel:{
							interval:0,
							rotate:45,
							textStyle:{color:"#ffffff",fontSize:8}
						},
						axisPointer:{
							show:true
						}
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            name: '次数',
			            nameTextStyle: {
			            	color:"#ffffff"
			            },
			            axisTick:{show:false},
						splitLine:{
							show:false,
						},
						axisLine:{
							lineStyle:{
								color:"#1C3042"
							}
						},
						axisLabel:{
							textStyle:{
								color:"#ffffff",
								fontSize:12
							}
						}
			        }
			    ],
		    series : [
		        {
		        	tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
		            name: '用户统计',
		            type: 'pie',
		            radius : '38%',
		            center: ['25%', '55%'],
		            data:data.leftData.data,
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		};
		for(var i=0;i<data.rightData.legend.length;i++){
			option.series.push({
				type:"bar",
				name:data.rightData.legend[i],
				data:data.rightData.y[data.rightData.legend[i]]
			})
		}
 		return option;
 	}
 	
 	function samllBarsOption(data){
 		var option = {
 			title:[],
		    tooltip: {
		        trigger: 'item',
		        formatter: "{b} : {d}%"
		    },
		    legend: {
		        orient: 'horizontal',
		        left: 'left',
		        textStyle:{
		        	color:"#fff"
		        },
		        data: ['可疑','欺诈']
		    },
		    series: []
		};
 		var ratio = Math.floor(100/data.length);
 		var margin = 100-ratio*data.length;
 		for(var i=0;i<data.length;i++){
 			option.title.push({
		        text: data[i].name,
		        left:ratio*(i+0.5)+'%',
		        bottom:0,
		        textStyle:{
		        	color:"#fff",
		        	fontSize:12
		        },
		       	textAlign: 'center'
		    });
 			option.series.push({
 				//name:data[i].name,
		        type: 'pie',
		        center:[ratio*(i+0.5)+margin/2+'%','50%'],
		        radius: ['50%', '58%'],
				minAngle:5,
		        avoidLabelOverlap: false,
		        label: {
		            normal: {
		            	show:false,
		                position: 'center'
		            },
		            emphasis:{
		            	show:true,
		            	position:'center',
		            	textStyle:{
		            		fontSize:'12'
		            	},
		            	formatter:'{b}:{d}%'
		            }
		        },
		        data: [{
		            value: data[i].suspicious/data[i].total || 0,
		            name: '可疑',
		            itemStyle:{
		            	normal:{
		            		color:"#ffcc00"
		            	}
		            }
		        },{
		            value: data[i].fraud /data[i].total || 0,
		            name: '欺诈',
		            itemStyle:{
		            	normal:{
		            		color:"#f35833"
		            	}
		            }
		        }, {
		            value: (data[i].total-data[i].fraud-data[i].suspicious) / data[i].total || 1,
		            name: '占位',
		         	label:{
		         		emphasis:{
		         			show:false
		         		}
		         	},
		            tooltip: {
		                show: false
		            },
		            itemStyle: {
		                normal: {
		                    color: '#aaa'
		                },
		                emphasis: {
		                    color: '#aaa'
		                }
		            },
		            hoverAnimation: false
		        }]
		    });
 		}
 		return option;
 	}
 	
 	/*
 	var result=[
   		         {
   		        	name:'同地多案',
   		        	data:{	        	    	
   		        	    	caseNormal:'正常',
   		        	    	normalVal:562,	        	    		        	    	
   		        	    	suspicious:'可疑',
   		        	    	suspiciousVal:230,	        	    	
   		        	   		fraud:'欺诈',
   		        	    	fraudVal:126	        	    	
   		        	   }
   		        },
   		        {
   		        	name:'同号多案',
   		        	data:{	        	    	
   		        	    	caseNormal:'正常',
   		        	    	normalVal:562,	        	    		        	    	
   		        	    	suspicious:'可疑',
   		        	    	suspiciousVal:230,	        	    	
   		        	   		fraud:'欺诈',
   		        	    	fraudVal:126	        	    	
   		        	   }
   		        },
   		        {
   		        	name:'同车多案',
   		        	data:{	        	    	
   		        	    	caseNormal:'正常',
   		        	    	normalVal:456,	        	    		        	    	
   		        	    	suspicious:'可疑',
   		        	    	suspiciousVal:230,	        	    	
   		        	   		fraud:'欺诈',
   		        	    	fraudVal:355	        	    	
   		        	   }
   		        },
   		        {
   		        	name:'可疑时间',
   		        	data:{	        	    	
   		        	    	caseNormal:'正常',
   		        	    	normalVal:1254,	        	    		        	    	
   		        	    	suspicious:'可疑',
   		        	    	suspiciousVal:869,	        	    	
   		        	   		fraud:'欺诈',
   		        	    	fraudVal:356	        	    	
   		        	   }
   		        },
   		        {
   		        	name:'可疑三者',
   		        	data:{	        	    	
   		        	    	caseNormal:'正常',
   		        	    	normalVal:134,	        	    		        	    	
   		        	    	suspicious:'可疑',
   		        	    	suspiciousVal:78,	        	    	
   		        	   		fraud:'欺诈',
   		        	    	fraudVal:126	        	    	
   		        	   }
   		        },
   		        {
   		        	name:'复杂联通图',
   		        	data:{	        	    	
   		        	    	caseNormal:'正常',
   		        	    	normalVal:366,	        	    		        	    	
   		        	    	suspicious:'可疑',
   		        	    	suspiciousVal:426,	        	    	
   		        	   		fraud:'欺诈',
   		        	    	fraudVal:320	        	    	
   		        	   }
   		        },
   		        {
   		        	name:'可疑案件',
   		        	data:{	        	    	
   		        	    	caseNormal:'正常',
   		        	    	normalVal:423,	        	    		        	    	
   		        	    	suspicious:'可疑',
   		        	    	suspiciousVal:100,	        	    	
   		        	   		fraud:'欺诈',
   		        	    	fraudVal:322	        	    	
   		        	   }
   		        }
        ];
	    		
   		var labelTop = {
		    normal : {
		    	color:'#3399cc',
		    	label : {
		    		show : false
		    	},
		    	labelLine :{ 
		    		show : false
		    	}
		    }
		};
		var labelFromatter = {
			normal:{
           		label : {show : false},
           		labelLine : {show : false}
               }
		}
		var labelCeter = {
		    normal : {
		    	color:'#ff9800',
		    	label : {
		    		show : false
		    	},
		    	labelLine :{ 
		    		show : false
		    	}
		    }
		};
		var labelBottom = {
		    normal : {
		    	color:'#f00',
		    	label : {
		    		show : false
		    	},
		    	labelLine :{ 
		    		show : false
		    	}
		    }
		};
		var radius = [20, 25];
		var arr=[];
		for(var i=0;i<result.length;i++){
			var x=10*i+10;
			var val={
		        	name:result[i].name,
		            type : 'pie',
		            center : [x+'%', '50%'],
		            radius : radius,
		            itemStyle : labelFromatter,
		            data : [
		                {name:result[i].data.caseNormal, value:result[i].data.normalVal, itemStyle:labelTop},
		            	{name:result[i].data.suspicious, value:result[i].data.suspiciousVal, itemStyle:labelCeter},
		                {name:result[i].data.fraud, value:result[i].data.fraudVal, itemStyle:labelBottom}
		            ]
		      	}
   			arr.push(val);
   		}
		option3 = {	
			legend: {
		        orient : 'vertical',
		        x : 'right',
		        textStyle:{
		        	color:'#ddd'
		        },
		        data:['正常','可疑','欺诈']
		    },
			tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    series :arr
		};
 	*/
 </script>
</body>
</html>