<%@ 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="2" />
       	</jsp:include>
		<div class="main">
			<div class="selectCom">
				行业：<div style="display: inline-block; position: relative;">
						<!-- <input class="statSelect" type="text"/><i class="selIcon"></i> -->
					<select style="width:200px;height:29px;margin-right:50px;">
					      <option value="all">全部</option>
						<c:forEach items="${hyList}" var="list">
						  <option value="${list.key}">${list.value}</option>
						</c:forEach>
						</select>
					</div>
					<a href="javascript:void(0)"><span class="statBtn" >统计</span></a>
			</div>
			<div class="chartTable" id="chartTable">
				<div class="rowForLive">
					<!-- <div class="LiveItemLeft"><img class="imgChart" src="../images/indexNew/chart1.png"></div>
					<div class="LiveItemRight"><img class="imgChart" src="../images/indexNew/chart1.png"></div> -->
					<div style="background-color: #272A48;" >
					   <div class="LiveItemLeft" id="char1"></div>	
					   <div class="LiveItemRight"  id="char2" > </div>				 
					</div>
				</div>
				<div class="rowForLive">
					 <div class="LiveItemLeft"   id="char3"></div>	
					 <div class="LiveItemRight"  id="char4"></div>		
				</div>
				<div class="clear"></div>
				<div  style="height: 455px">
					  <div style="margin-left:420px;margin-top: 20px;">
					             <span>${nowYear }度市场主体变化趋势分析</span>
					        </div>
					 <div  id="chart5" 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">
             //业务处理
              
              $(".selectCom").find("a").click(function(){
            	 var val=$(".selectCom").find("select").val(); 
            	  var myChart1 = echarts.init(document.getElementById("char1"));	
        		  var myChart2 = echarts.init(document.getElementById("char2"));
        		  var myChart3 = echarts.init(document.getElementById("char3"));
        		  var myChart4 = echarts.init(document.getElementById("char4"));
         		  var myChart5 = echarts.init(document.getElementById("chart5"));
        		  myChart1.showLoading();
        		  myChart2.showLoading();
        		  myChart3.showLoading();
        		  myChart4.showLoading();
        		  myChart5.showLoading();
            	 $.post("${ctx}/enterpriseAnalysis/bianhua/hangye1.do",{hangye:val},function(data){           		 
            		  console.info(data);//修改点
            		
            		  myChart1.setOption(getOption(data.tb.newEntitysRate-1,data.hb.newEntitysRate-1,"市场主体注册/同环比"));	 
            		  myChart2.setOption(getOption(data.tb.newMoneyRate-1,data.hb.newMoneyRate-1,"资金流入/同环比"));
            		  myChart3.setOption(getOption(data.tb.leaveEntitysRate-1,data.hb.leaveEntitysRate-1,"市场主体退出/同环比"));	 
            		  myChart4.setOption(getOption(data.tb.leaveMoneyRate-1,data.hb.leaveMoneyRate-1,"资金流失/同环比"));
            		  myChart1.hideLoading();
            		  myChart2.hideLoading();
            		  myChart3.hideLoading();
            		  myChart4.hideLoading();
            		  //data.tb//里面有同比数据，新增，退出，存活 都有。
            		  //新增数量同比:(data.tb.newEntitysRate-1)
            		  //新增资本同比:(data.tb.newMoneyRate-1)
            		  //退出数量同比:(data.tb.leaveMoneyRate-1)
            		  //退出资本同比:(data.tb.leaveMoneyRate-1)
            		  //存活数量同比:(data.tb.livesRate-1)
            		  //存活资本同比:(data.tb.liveMoneyRate-1)
            		  //data.hb//里面有环比数据，新增，退出，存活 都有。字段同上。
            	 });
            	 $.post("${ctx}/enterpriseAnalysis/bianhua/hangye2.do",{hangye:val},function(data){           		 
            		  console.info(data);//修改点
            		  var data1=new Array();
            		  var data2=new Array();
            		  for(var c=0;c<data.jn.length;c++){
            			  
            			  data1[c]=data.jn[c].newEntitys;
            			  data2[c]=data.jn[c].leaveEntitys;
            			  
            		  }
            		  line(data1,data2,myChart5);
            		  myChart5.hideLoading();
            		  //data.jn//里面有今年数据列表，每一项是每月的数据，如下。
            		  //新增数量:data.jn[0].newEntitys
            		  //新增资本:data.jn[0].newMoney
            		  //退出数量:data.jn[0].leaveMoney
            		  //退出资本:data.jn[0].leaveMoney
            		  //存活数量:data.jn[0].lives
            		  //存活资本:data.jn[0].liveMoney
            		  //数据月份:data.jn[0].timePoint
            		  //data.qn//同上
            	 });
            	 
              });
              $(".selectCom").find("a").click();
          	//设置OPTION 同环比
          	function getOption(data1,data2,title){
          	 	var labelTop = {
              		    normal : {
              		        label : {
              		            show : true,
              		            position : 'center',
              		            formatter : '{b}',
              		            textStyle: {
              		                baseline : 'bottom'
              		            }
              		        },
              		        labelLine : {
              		            show : false
              		        }
              		    }
              		};
              		var labelFromatter = {
              		    normal : {
              		        label : {
              		            formatter : function (params,a,b){
              		            	var c=100 - (--b);
              		                return c.toFixed(2) + '%'
              		            }, 
              		            textStyle: {
              		                baseline : 'top'
              		            }
              		        }
              		    }
              		};
              		var labelBottom = {
              		    normal : {
              		        color: '#ccc',
              		        label : {
              		            show : true,
              		            position : 'center'
              		        },
              		        labelLine : {
              		            show : false
              		        }
              		    },
              		    emphasis: {
              		        color: 'rgba(0,0,0,0)'
              		    }
              		};
              		var radius = [65, 95];
              		var option = {
              			title : {
              			        text: title,
              			        x: 'right',
              			         textStyle : {
              					   fontSize : 14,
              					   fontWeight : 'bolder',
              					   color : 'white'
              				    }
              			},
              		    legend: {
              		        x : '10px',   
              		        data:[
              		            '同比','环比'
              		        ],
              		        textStyle : {
         					   fontSize : 11,
         					   fontWeight : 'bolder',
         					   color : 'white'
         				    }
              		    },
              		    color:["#00B7EF","#FFC200"],
              		    series : [
              		        {
              		            type : 'pie',
              		            center : ['30%', '55%'],
              		            radius : radius,
              		            x: '0%', // for funnel
              		            itemStyle : labelFromatter,
              		            data : [
              		                {name:'other', value:100-data1, itemStyle : labelBottom},
              		                {name:'同比', value:data1,itemStyle : labelTop}
              		            ]
              		        },
              		        {
              		            type : 'pie',
              		            center : ['70%', '55%'],
              		            radius : radius,
              		            x:'20%', // for funnel
              		            itemStyle : labelFromatter,
              		            data : [
              		                  {name:'other', value:100-data2, itemStyle : labelBottom},
              		                  {name:'环比', value:data2,itemStyle : labelTop}
              		            ]
              		        }
              		    ]
              		};
              		
              		return option;
          	}
          	
            //曲线图
      	  function line(data1,data2,myChart){
      		  option = {
      				   tooltip: {
      				       trigger: "item",
      				       formatter: "{a} <br/>{b} : {c}"
      				   },
      				   color:["#00B7EF","#FF392A","#FFC200","#00B692","#2070DA"],
      				   legend: {
      				       x: 'left',
      				       data: ["今年注册", "今年注销"],
      				       textStyle : {
        					   fontSize : 12,
        					   fontWeight : 'bolder',
        					   color : 'white'
        				    }
      				   },
      				   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: data1

      				       },
      				       {
      				           name: "今年注销",
      				           type: "line",
      				           data: data2

      				       }
      				   ]
      				};
      				                
      	      myChart.setOption(option);
      	  }
         </script>
</body>
</html>