<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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="0" />
       </jsp:include>
        <div class="main" id="main" style="position:relative;padding-bottom: 12px;padding-right: 22px;">
		<div class="chartBox">
			<p>${nowYear}度市场主体各市县分布情况</p>
			<div class="chartIncludeTable">
				<div class="forChart" style="background-color:#303A57">
					<%-- <img class="imgChart" src="${ctx}/images/indexNew/chart3.png"> --%>
					 <div id="chart1" style="height: 500px;width:98%;"></div>
				</div>
				<div class="forTable">
				      <div>
					      <span style="margin:6px;color: white">市场主体总数:</span>
					      <span id="zongshu" style="margin:6px;font-size:30px;color: yellow">00,0000 个</span>
					      <span style="margin-left: 20px;margin-right:5px;">同比：<font id="tongbi">00.0</font>% <img  style="margin-top:-6px;width:5%" alt="" src="${ctx}/images/arrow_top.png"></span>
					   </div>
				      <div  style="height:455px;overflow:auto"   id="sxph" >
						  <table>
							<thead>
								<tr><th>市县名称</th><th>注册数</th><th>退出数</th><th>总数</th></tr>
							</thead>
							
							   <tbody id="shixian"></tbody>													
						  </table>
						</div>
					
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="chartBox">
			<p>${nowYear}度行业类型分析(TOP 10)</p>
			<div class="chartIncludeTable">
				<div class="forChart" style="background-color:#303A57">
					<%-- <img class="imgChart" src="${ctx}/images/indexNew/chart4.png"> --%>
					<div id="chart2" style="height:330px;width:98%;"></div>
				</div>
				<div class="forTable" >
				  <div style="height:330px; overflow:auto"  id="hyph">
					<table>
						<thead>
							<tr><th>行业类型</th><th>注册数</th><th>退出数</th><th>总数</th></tr>
						</thead>
						<tbody id="hangyes"></tbody>	
					</table>
				  </div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="chartBox">
			<p>${nowYear}度资金流入情况分析/亿元(TOP 10)</p>
			<%-- <img class="imgChart" src="${ctx}/images/indexNew/chart2.png"> --%>
			<div id="chart3" style="height:400px;width:98%;"></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/ecom/esl/1-6-10/esl.js"></script>
	<script src="${ctx}/js/echarts-plain.js" ></script>
	<!-- 模块化框架配置 -->
		<script type="text/javascript">
			seajs.use.config({
				paths : {
					"echarts" : "${ctx}/js/echarts/build/echarts",
					"echarts/chart/map" : "${ctx}/js/echarts/build/echarts-map"
				}
			});
		</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-12-12);
		}
		//perfect-scrollbar滚动条插件
		$('#main').perfectScrollbar();
	</script>
	
	<script type="text/javascript">
	  $(function(){
	  //业务处理
	   getMap();//海南分布地图
       pie();//饼图展示
       bar();//柱状图
       echartData.quanshen();
	  });
	  //地图
	  function getMap(){
		  seajs.use(["echarts","echarts/chart/map"],  
				  
		   function (echarts){
			  
			   var  option = {		   
					    /* legend: {
					        orient: 'vertical',
					        x:'right',
					        data:['随机数据']
					    }, */
					    dataRange: {
					        min: 0,
					        max: 10000,
					        color:['#2070DA','#00B7EF'],
					        text:['高','低'],           // 文本，默认为数值文本
					        x:"right",
					        textStyle : {
           					   fontSize : 14,
           					   fontWeight : 'bolder',
           					   color : 'white'
           				    },
					        calculable : true
					    },
					    series : [
					        {
					            name: '市场主体数量',
					            type: 'map',
					            mapType: '海南',
					            selectedMode : 'single',
					            itemStyle:{
					                normal:{label:{show:true}},
					                emphasis:{label:{show:true}}
					            },
					            data:[
					                {name: '儋州市',value: Math.round(Math.random()*1000)},
					                {name: '文昌市',value: Math.round(Math.random()*1000)},
					                {name: '乐东黎族自治县',value: Math.round(Math.random()*1000)},
					                {name: '三亚市',value: Math.round(Math.random()*1000)},
					                {name: '琼中黎族苗族自治县',value: Math.round(Math.random()*1000)},
					                {name: '东方市',value: Math.round(Math.random()*1000)},
					                {name: '海口市',value: Math.round(Math.random()*1000)},
					                {name: '万宁市',value: Math.round(Math.random()*1000)},
					                {name: '澄迈县',value: Math.round(Math.random()*1000)},
					                {name: '白沙黎族自治县',value: Math.round(Math.random()*1000)},
					                {name: '琼海市',value: Math.round(Math.random()*1000)},
					                {name: '昌江黎族自治县',value: Math.round(Math.random()*1000)},
					                {name: '临高县',value: Math.round(Math.random()*1000)},
					                {name: '陵水黎族自治县',value: Math.round(Math.random()*1000)},
					                {name: '屯昌县',value: Math.round(Math.random()*1000)},
					                {name: '定安县',value: Math.round(Math.random()*1000)},
					                {name: '保亭黎族苗族自治县',value: Math.round(Math.random()*1000)},
					                {name: '五指山市',value: Math.round(Math.random()*1000)}
					            ]
					        }
					    ]
					};
			      var myChart1 = echarts.init(document.getElementById("chart1"));
			     // myChart1.setOption(option);
			      echartData.shixian(myChart1,option);
			      $('#sxph').perfectScrollbar();
		       }
			)
	 
	 }
       
        //饼图展示
	  function pie(){
	
		  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("chart2"));
	      //myChart.setOption(option);
	      echartData.hangye(myChart,option);
	      $('#hyph').perfectScrollbar();
	  }
        
        //柱状图
	  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: false,
				                        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("chart3"));
	     // myChart.setOption(option);	
		  echartData.hangyezijin(myChart,option);
	  }
	</script>
	<script>
		var echartData = {
			quanshen : function(){
				$.post("${ctx}/enterpriseAnalysis/fenbu/quanshen.do",
				{},
				function(data){
					//$("#zongshu").text(data.lives);
					$("#zongshu").text("77,2206");
					var tongbi = (data.livesRate - 1)*100;
					$("#tongbi").text(tongbi.toFixed(2));
					return {
						zongshu:data.lives,
						zongzijin:data.liveMoney,
					}
				});
			},
			shixian : function(ec,option){
				ec.showLoading();
				$.post("${ctx}/enterpriseAnalysis/fenbu/shixian.do",
				{},
				function(data){
					var mapData = [];
					$("#shixian").empty();
					for(var i=0;i<data.length;i++){
						//console.log((data[i].lives*100/765838).toFixed(2))
						mapData.push({
							name: data[i].cityCode,value: data[i].lives
						});
						$("#shixian").append("<tr><td>"+data[i].cityCode+"</td><td>"+data[i].newEntitys+"</td><td>"+data[i].leaveEntitys+"</td><td>"+data[i].lives+"</td></tr>")
					}
					option.series[0].data = mapData;
					ec.setOption(option,true);
					ec.hideLoading();
					return mapData;
				});
			},
			hangye : function(ec,option){
				ec.showLoading();
				$.post("${ctx}/enterpriseAnalysis/fenbu/hangye.do",
				{},
				function(data){
					var legendData = [];
					var pieData = [];
					$("#hangyes").empty();
					for(var i=0;i<data.length;i++){
						legendData.push(data[i].trades);
						pieData.push({
							name: data[i].trades,value: data[i].lives
						});
						$("#hangyes").append("<tr><td>"+data[i].trades+"</td><td>"+data[i].newEntitys+"</td><td>"+data[i].leaveEntitys+"</td><td>"+data[i].lives+"</td></tr>")
					}
					option.series[0].data = pieData;
					option.legend.data = legendData;
					ec.setOption(option,true);
					ec.hideLoading();
					return {legendData:legendData,pieData:pieData};
				});
			},
			hangyezijin : function(ec,option){
				ec.showLoading();
				$.post("${ctx}/enterpriseAnalysis/fenbu/hangyezijin.do",
				{},
				function(data){
					var lineData = [];
					var xAsitData = [];
					for(var i=0;i<data.length;i++){
						lineData.push((data[i].newMoney/100000000).toFixed(2));
						xAsitData.push(data[i].trades);
					}
					option.xAxis[0].data = xAsitData;
					option.series[0].data = lineData;
					ec.setOption(option,true);
					ec.hideLoading();
					return lineData;
				});
			}
		};
	</script>
	</body>
</html>