<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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/analysisCss/base.css" />
<link rel="stylesheet"  type="text/css" href="${ctx}/css/analysisCss/all.css" />
<link rel="stylesheet"  type="text/css" href="${ctx}/css/analysisCss/perfect-scrollbar.css" />
<title>知识图谱平台</title>
</head>
<body class="bg1">
       <jsp:include page="../top.jsp">
       <jsp:param name="index" value="2" />
       </jsp:include>
       <jsp:include page="../left.jsp">
       <jsp:param name="index" value="3" />
       </jsp:include>
		<div class="main">
			<div class="chartTable" id="chartTable">
				<div class="rowForLive">
					 <div>   
					    <div style="margin-left: 428px;">注销分析/行业类型</div>
					   <div  id="chart1" class="bottomRowForLive" style="height:400px;"></div>			 
					</div>
				</div>
				<div class="rowForLive">
					<div >
					        <div style="margin-left: 200px;">
					             <span>注销分析/经济体系</span>
					             <span style="margin-left:400px;">注销分析/存活时间段</span>
					        </div>
					        <div  id="chart2" class="LiveItemLeft" style="height:350px;"></div>		
					</div>
					<div>
					       <div  id="chart3" class="LiveItemRight" style="height:350px;"></div>		
					</div>
				</div>
				<div class="clear"></div>
					<!-- <img class="imgChart" src="../images/indexNew/chart5.png"> -->
					<div >
					        <div style="margin-left:420px;margin-top: 20px;">
					             <span>市场主体注销趋势分析</span>
					        </div>
					        <div  id="chart4" class="bottomRowForLive" style="height:400px;"></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/echarts-plain.js" ></script>
		<script>
			resize();
			$(window).resize(function(){
				resize();
			});
			function resize(){
				//获取窗口高度
				var windowheight=$(window).height();
				var searchCon = windowheight-40-146;
				$(".searchCon").css("height",windowheight-40);
				$(".main").css("height",windowheight-40);
				$(".chartTable").css("height",windowheight-80);
			}
			//perfect-scrollbar滚动条插件
			$('#chartTable').perfectScrollbar();
			
		  	
          	
          	
		 </script>
         
         <script type="text/javascript">
             //业务处理   
             $(function(){
             bar();//柱状图
 	         pie1();//饼状图1
 	         pie2();//饼状图2
 	         line();//曲线图
             });
 	         
            //柱状图
      	  function bar(){
      		  
      		  option = {
      				    tooltip : {
      				        trigger: 'axis'
      				    },
      				    color:["#00B7EF","#FF392A","#FFC200","#00B692","#2070DA"],
      				    calculable : true,
      				    xAxis : [
      				        {
      				            type : 'category',
      				            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
      				            axisLabel :{
      						    	textStyle:{
      						    		 color: 'white'
      						    	}
      						    },
      				        }
      				    ],
      				    yAxis : [
      				        {
      				            type : 'value',
      				            axisLabel :{
      						    	textStyle:{
      						    		 color: 'white'
      						    	}
      						    },
      				        }
      				    ],
      				    series : [
      				        {
      				            name:'注销量',
      				            type:'bar',
      				            itemStyle: {
      				                normal: {
      				                    color: function(params,a,b) {
      				                        // build a color map as your need.
      				                        var colorList = [
      				                          '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
      				                           '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
      				                           '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
      				                        ];
      				                        return colorList[a]
      				                    },
      				                    label: {
      				                        show: true,
      				                        position: 'top',
      				                        formatter: '{b}\n{c}'
      				                    }
      				                }
      				            },
      				            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
      				         
      				        }
      				    ]
      				};
      		  var myChart = echarts.init(document.getElementById("chart1"));
      	      //myChart.setOption(option);	
      		  echartData.hangye(myChart,option);
      	  }
 	         
      	//饼状图1
      	  function pie1(){
      		  
      		option = {
      			    tooltip : {
      			        trigger: 'item',
      			        formatter: "{a} <br/>{b} : {c} ({d}%)"
      			    },
      			  color:["#00B7EF","#FF392A","#FFC200","#00B692","#2070DA"],
      			    legend: {
      			        orient : 'vertical',
      			        x : 'left',
      			        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
      			        textStyle : {
      					   fontSize : 12,
      					   fontWeight : 'bolder',
      					   color : 'white'
      				    }
      			    }, 
      			    calculable : true,
      			    series : [
      			        {
      			            name:'访问来源',
      			            type:'pie',
      			            radius : '55%',
      			            center: ['50%', '60%'],
      			            data:[
      			                {value:335, name:'直接访问'},
      			                {value:310, name:'邮件营销'},
      			                {value:234, name:'联盟广告'},
      			                {value:135, name:'视频广告'},
      			                {value:1548, name:'搜索引擎'}
      			            ]
      			        }
      			    ]
      			};	                    
      		  var myChart = echarts.init(document.getElementById("chart2"));
      	      //myChart.setOption(option);	
      		  echartData.jingjitixi(myChart,option);
      	  }
      	
          //饼图展示2
    	  function pie2(){
    	
    		  option = {
    				    tooltip : {
    				        trigger: 'item',
    				        formatter: "{a} <br/>{b} : {c} ({d}%)"
    				    },
    				    color:["#00B7EF","#FF392A","#FFC200","#00B692","#2070DA"],
    				    legend: {
    				        orient : 'vertical',
    				        x : 'left',
    				        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
    				        textStyle : {
           					   fontSize : 12,
           					   fontWeight : 'bolder',
           					   color : 'white'
           				    }
    				    },
    				    calculable : true,
    				    series : [
    				        {
    				            name:'存活时间段',
    				            type:'pie',
    				            radius : ['50%', '70%'],
    				            itemStyle : {
    				                normal : {
    				                    label : {
    				                        show : false
    				                    },
    				                    labelLine : {
    				                        show : false
    				                    }
    				                },
    				                emphasis : {
    				                    label : {
    				                        show : true,
    				                        position : 'center',
    				                        textStyle : {
    				                            fontSize : '30',
    				                            fontWeight : 'bold'
    				                        }
    				                    }
    				                }
    				            },
    				            data:[
    				                {value:335, name:'直接访问'},
    				                {value:310, name:'邮件营销'},
    				                {value:234, name:'联盟广告'},
    				                {value:135, name:'视频广告'},
    				                {value:1548, name:'搜索引擎'}
    				            ]
    				        }
    				    ]
    				};
    		  var myChart = echarts.init(document.getElementById("chart3"));
    	      //myChart.setOption(option);
    	      echartData.nianling(myChart,option);		                    
    	  }
          
    	   //曲线图
    	  function line(){
    	
    		  option = {
    				   tooltip: {
    				       trigger: "item",
    				       formatter: "{a} <br/>{b} : {c}"
    				   },
    				   color:["#00B7EF","#FF392A","#FFC200","#00B692","#2070DA"],
    				   legend: {
    				       x: 'left',
    				       data: ["今年", "去年"]
    				   },
    				   xAxis: [
    				       {
    				           type: "category",
    				           name: "",
    				           splitLine: {show: false},
    				           data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月","十月","十一月","十二月"],
    				           axisLabel :{
     						    	textStyle:{
     						    		 color: 'white'
     						    	}
     						    }
    				       }
    				   ],
    				   yAxis: [
    				       {
    				           type: "log",
    				           name: "数量",
    				           axisLabel :{
    						    	textStyle:{
    						    		 color: 'white'
    						    	}
    						    }
    				       }
    				   ],  
    				   calculable: false,
    				   series: [
    				       {
    				           name: "今年",
    				           type: "line",
    				           data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669,'-','-','-']

    				       },
    				       {
    				           name: "去年",
    				           type: "line",
    				           data: [1, 2, 4, 8, 16, 32, 64, 128, 256,'-','-','-']

    				       }
    				   ]
    				};
    				                
    		  var myChart = echarts.init(document.getElementById("chart4"));
    	      //myChart.setOption(option);
    	      echartData.qushi(myChart,option);
    	  }
         </script>
         <script>
		var echartData = {
			hangye : function(ec,option){
				ec.showLoading();
				$.post("${ctx}/enterpriseAnalysis/zhuxiao/hangyeleixing.do",
				{},
				function(data){
					var barData = [];
					var xAsitData = [];
					for(var i=0;i<data.length;i++){
						barData.push(data[i].leaveEntitys);
						xAsitData.push(data[i].trades);
					}
					option.xAxis[0].data = xAsitData;
					option.series[0].data = barData;
					ec.setOption(option,true);
					ec.hideLoading();
					return barData;
				});
			},
			jingjitixi : function(ec,option){
				ec.showLoading();
				$.post("${ctx}/enterpriseAnalysis/zhuxiao/jingjileixing.do",
				{},
				function(data){
					var legendData = [];
					var pieData = [];
					for(var i=0;i<data.length;i++){
						legendData.push(data[i].xAsit);
						pieData.push({
							name: data[i].xAsit,value: data[i].leaveEntitys
						});
					}
					option.series[0].data = pieData;
					option.legend.data = legendData;
					ec.setOption(option,true);
					ec.hideLoading();
					return {legendData:legendData,pieData:pieData};
				});
			},
			nianling : function(ec,option){
				ec.showLoading();
				$.post("${ctx}/enterpriseAnalysis/zhuxiao/nianling.do",
				{},
				function(data){
					console.log(data);
					var legendData = [];
					var pieData = [];
					for(var i=0;i<data.length;i++){
						legendData.push(data[i].xAsit);
						pieData.push({
							name: data[i].xAsit,value: data[i].leaveEntitys
						});
					}
					option.series[0].data = pieData;
					option.legend.data = legendData;
					ec.setOption(option,true);
					ec.hideLoading();
					return {legendData:legendData,pieData:pieData};
				});
			},
			qushi : function(ec,option){
				ec.showLoading();
				$.post("${ctx}/enterpriseAnalysis/zhuxiao/shijian.do",
				{},
				function(data){
					var lineData = [];
					var lineData1 = [];
					var xAsitData = [];
					for(var i=0;i<data.jn.length;i++){
						lineData.push(data.jn[i].leaveEntitys);
					}
					for(var i=0;i<data.qn.length;i++){
						lineData1.push(data.qn[i].leaveEntitys);
					}
					for(;lineData.length<12;){
						lineData.push("-");
					}
					for(;lineData1.length<12;){
						lineData1.push("-");
					}
					option.series[0].data = lineData;
					option.series[1].data = lineData1;
					ec.setOption(option,true);
					ec.hideLoading();
					return lineData;
				});
			}
		};
	</script>
</body>
</html>