<%@ 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="4" />
       	</jsp:include>
		<div class="main">
			<div class="chartTable" id="chartTable">
				<div class="rowForLive">
					 <div>   
					    <div style="margin-left: 428px;">2016年度发展速度同比情况</div>
					   <div  id="chart1" class="bottomRowForLive" style="height:300px;"></div>			 
					</div>
				</div>
				<div class="rowForLive">
					<div >
					        <div style="margin-left:428px;"> 2016年行业发展分析 </div>      
					        <div  id="chart2" class="bottomRowForLive" style="height:400px;"></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>2007-2016年度市场主体发展趋势</span>
					        </div>
					        <div  id="chart3" 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(){
          	pie();//饼状图
 	         bar();//柱状图
 	         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("chart2"));
      	      myChart.setOption(option);
      	      echartData.hangye(myChart,option);	
      	  }
 	         
      	//饼状图
      	  function pie(){
      		  
      		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){
          		                return 100 - (--b) + '%'
          		            }, 
          		            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 = {
          		    legend: {
          		        x : '10px',   
          		        data:[
          		            '第一产业','第二产业','第三产业'
          		        ],
          		        textStyle : {
     					   fontSize : 11,
     					   fontWeight : 'bolder',
     					   color : 'white'
     				    }
          		    },
          		    color:["#FFC200","#00B692","#2070DA"],
          		    series : [
          		        {
          		            type : 'pie',
          		            center : ['20%', '55%'],
          		            radius : radius,
          		            x: '0%', // for funnel
          		            itemStyle : labelFromatter,
          		            data : [
          		                {name:'other', value:46, itemStyle : labelBottom},
          		                {name:'第一产业', value:54,itemStyle : labelTop}
          		            ]
          		        },
          		        {
          		            type : 'pie',
          		            center : ['50%', '55%'],
          		            radius : radius,
          		            x:'20%', // for funnel
          		            itemStyle : labelFromatter,
          		            data : [
          		                {name:'other', value:56, itemStyle : labelBottom},
          		                {name:'第二产业', value:44,itemStyle : labelTop}
          		            ]
          		        },
          		       {
          		            type : 'pie',
          		            center : ['80%', '55%'],
          		            radius : radius,
          		            x:'20%', // for funnel
          		            itemStyle : labelFromatter,
          		            data : [
          		                {name:'other', value:56, itemStyle : labelBottom},
          		                {name:'第三产业', value:44,itemStyle : labelTop}
          		            ]
          		        }
          		    ]
          		};                  
      		  var myChart = echarts.init(document.getElementById("chart1"));
      	      myChart.setOption(option);
      	      echartData.jingjileixing(myChart,option);	
      	  }
      
    	   //曲线图
    	  function line(){
    	
    		  option = {
    				    tooltip : {
    				        trigger: 'axis'
    				    },
    				    legend: {
    				        data:['今年','去年'],
    				        textStyle : {
    	     					   fontSize : 11,
    	     					   fontWeight : 'bolder',
    	     					   color : 'white'
    	     				    }
    				    },
    				    color:["#00B7EF","#FF392A","#FFC200","#00B692","#2070DA"],
    				    calculable : true,
    				    xAxis : [
    				        {
    				            type : 'category',
    				            boundaryGap : false,
    				            data : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
    				            axisLabel :{
     						    	textStyle:{
     						    		 color: 'white'
     						    	}
     						    }
    				        }
    				    ],
    				    yAxis : [
    				        {
    				            type : 'value',
    				            axisLabel :{
     						    	textStyle:{
     						    		 color: 'white'
     						    	}
     						    }
    				        }
    				    ],
    				    series : [
    				        {
    				            name:'今年',
    				            type:'line',
    				            data:[120, 132, 101, 134, 90, 230, 210]
    				        },
    				        {
    				            name:'去年',
    				            type:'line',
    				            data:[220, 182, 191, 234, 290, 330, 310]
    				        }
    				    ]
    				};
    				                    	                
    		  var myChart = echarts.init(document.getElementById("chart3"));
    	      myChart.setOption(option);
    	      echartData.qushi(myChart,option);                    
    	  }
         </script>
         <script>
		var echartData = {
			jingjileixing : function(ec,option){
				ec.showLoading();
				$.post("${ctx}/enterpriseAnalysis/fazhan/jingjileixing.do",
				{},
				function(data){
					var fullvalue = data.primary.newEntitys + data.secondary.newEntitys + data.tertiary.newEntitys;
					option.series[0].data[0].value = (100-data.primary.newEntitys/fullvalue*100).toFixed(0);
					option.series[0].data[1].value = (data.primary.newEntitys/fullvalue*100).toFixed(0);
					option.series[1].data[0].value = (100-data.secondary.newEntitys/fullvalue*100).toFixed(0);
					option.series[1].data[1].value = (data.secondary.newEntitys/fullvalue*100).toFixed(0);
					option.series[2].data[0].value = (100-data.tertiary.newEntitys/fullvalue*100).toFixed(0);
					option.series[2].data[1].value = (data.tertiary.newEntitys/fullvalue*100).toFixed(0);
					ec.setOption(option,true);
					ec.hideLoading();
					return option;
				});
			},
			hangye : function(ec,option){
				ec.showLoading();
				$.post("${ctx}/enterpriseAnalysis/fazhan/hangye.do",
				{},
				function(data){
					console.log(data)
					var lineData = [];
					var xAsitData = [];
					for(var i=0;i<data.length;i++){
						lineData.push(data[i].newEntitys);
						xAsitData.push(data[i].trades);
					}
					option.xAxis[0].data = xAsitData;
					option.series[0].data = lineData;
					ec.setOption(option,true);
					ec.hideLoading();
					return option;
				});
			},
			qushi : function(ec,option){
				ec.showLoading();
				$.post("${ctx}/enterpriseAnalysis/fazhan/qushi.do",
				{},
				function(data){
					var lineData = [];
					var lineData1 = [];
					var xAsitData = [];
					for(var i=0;i<data.jn.length;i++){
						lineData.push(data.jn[i].newEntitys);
					}
					for(var i=0;i<data.qn.length;i++){
						lineData1.push(data.qn[i].newEntitys);
					}
					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>