<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet"  type="text/css" href="${ctx}/css/sjg/base.css" />
<link rel="stylesheet"  type="text/css" href="${ctx}/css/sjg/all.css" />
<link rel="stylesheet"  type="text/css" href="${ctx}/css/indexNew/perfect-scrollbar.css" />

<style>
body{ background:url("${ctx}/images/bg2.jpg") fixed no-repeat; background-size:100% 100%;}
.sys_name {
    display: inline-block;
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap;
    width: 260px;
}
.sys_num {
    display: inline-block;
    font-size: 17px;
    text-align: center;
    vertical-align: top;
    width: 60px;
}
</style>
<title>数据谷</title>
</head>
<body>
<div class="m_page" id="m_page">
	<!--left-->
	<div class="e_left" >
	  <div class="e_box" style="height: 515px">
	    <div class="e_tit">市场主体增长趋势分析</div>
		<div class="second_tit">市场主体总量（家）</div>
		<div class="t_c" id="oneLineChart" style="width: 566px;height:190px;" ></div>
		<div class="second_tit">资金总量（亿）</div>
		<div class="t_c" id="oneLineChart2" style="width: 566px;height:190px;"></div>
	  </div>
	  <div class="e_box m_t10" style="height: 493px">
	    <div class="e_tit">本月各地市场主体增长情况</div>
		<div class="second_tit">海南各市县市场主体分析</div>
		<div class="m_list" id="monthCom" style="height:390px;position: relative;">
		  <ul id ="Month_rise" >
		  </ul>
		</div>
	  </div>	
	</div>
	<!--center-->
	<div class="e_center">
	  <div class="" style="font-size: 40px;height: 80px;text-align: center;width: 700px;">数据展示</div>
	  <div class="msdm"></div>
	  <div class="ap_map">
		<div class="t_c"><img src="${ctx}/images/sjg/hn_map2.png"></div>
	  </div>
	  <div class="e_box">
	    <div class="market_box">
		  <ul id = "Market_inf">
		    <li>
			  <div class="f14 m_cc01">当月增长量（家）</div>
			  <div class="p_t5"><b class="mb_num m_cc05">1536</b><span class="ms_num"><em><i class="icon20 e_up"></i>56.23%</em><em><i class="icon20 e_down"></i>56.23%</em></span></div>
			</li>
			<li>
			  <div class="f14 m_cc02">当前资金增长（亿元）</div>
			  <div class="p_t5"><b class="mb_num m_cc06">1536</b><span class="ms_num"><em><i class="icon20 e_up"></i>56.23%</em><em><i class="icon20 e_down"></i>56.23%</em></span></div>
			</li>
			<li>
			  <div class="f14 m_cc03">当前注销总数（家）</div>
			  <div class="p_t5"><b class="mb_num m_cc07">1536</b><span class="ms_num"><em><i class="icon20 e_up"></i>56.23%</em><em><i class="icon20 e_down"></i>56.23%</em></span></div>
			</li>
			<li>
			  <div class="f14 m_cc04">当前注销资金（亿元）</div>
			  <div class="p_t5"><b class="mb_num m_cc08">1536</b><span class="ms_num"><em><i class="icon20 e_up"></i>56.23%</em><em><i class="icon20 e_down"></i>56.23%</em></span></div>
			</li>
		  </ul>
		</div>
	  </div>
	  <div class="e_box m_t10">
		<div class="e_tit">2016年市场主体变化趋势</div>
		<div class="t_c" id="oneLineBarChart" style="width: 566px;height:152px;"></div>
	  </div>
	</div>
	<!--right--->
	<div class="e_right">
	  <!---->
	  <div class="ppa_b">
	    <div class="market_all" id ="BigData">
		  <h2 class="market_ex">注：数据截止   2016年10月</h2>
		  <p><span class="m_cc09 f22">市场主体大数据</span></p>
		  <p>市场主体存活量／家</p>
		  <p><b class="f38 m_cc10">772206</b></p>
		  <p class="p_t20">资金总额／亿元</p>
		  <p><b class="f38 m_cc03">375834.4</b></p>
		</div>
		<div class="e_box market_ind" style="height: 465px">
		  <div class="ml_tit">2016年行业增长情况</div>
		  <div class="sys_list" style="font-size: 16px;">
			<h5><span class="sys_name">行业</span><span class="sys_num">数量/家</span></h5>
			<ul id = "Industry_increase">
			 
			</ul>
		  </div>
	    </div>
	  </div>
	  <!---->
	  <div class="e_box m_t10">
	    <div class="e_tit">市场主体增长趋势分析</div>
		<div class="second_tit">市场主体新增（家）</div>
		<div class="t_c" id="oneLineChart3" style="width: 566px;height:190px;"></div>
		<div class="second_tit m_t25">市场主体注销（家）</div>
		<div class="t_c" id="oneLineChart4" style="width: 566px;height:190px;"></div>
	  </div>	
	</div>
</div>	
<script type="text/javascript" src="${ctx}/js/lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="${ctx}/js/lib/baiduTemplate.js"></script>
<script src="${ctx}/js/lib/echarts3.1.10.js"></script>
<script src="${ctx}/js/lib/perfect-scrollbar.jquery.js"></script>

<script type="text/html" id="Month_rise_template">
<!for(var i=0;i<data.length;i++){!>
	<li><label class="m_label"><!=data[i].name!></label><span class="m_bar"><em class="<!=data[i].className!>"style ="width:<!=data[i].num!>%" ></em></span></li>		  
<!}!>
</script>

<script type="text/html" id="Industry_increase_template">
<!for(var i=0;i<data.length;i++){!>
	   <li><span class="sys_name"><!=data[i].name!></span><span class="sys_num"><!=data[i].num!></span></li>
<!}!>
</script>

<script type="text/html" id="Market_inf_template">
<!for(var i=0;i<data.length;i++){!>
	  <li>
		 <div class="f14 m_cc01"><!=data[i].name!></div>
		<div class="p_t5"><b class="mb_num m_cc05"><!=data[i].num!></b><span class="ms_num"><em><i class="icon20 e_up"></i><!=data[i].increase!></em><em><i class="icon20 e_down"></i><!=data[i].decline!></em></span></div>
	  </li>
<!}!>
</script>

<script type="text/html" id="BigData_template">

		  <h2 class="market_ex">注：数据截止   2016年10月</h2>
		  <p><span class="m_cc09 f22">市场主体大数据</span></p>
		  <p>市场主体存活量／家</p>
		  <p><b class="f38 m_cc10"><!=data.num!></b></p>
		  <p class="p_t20">资金总额／亿元</p>
		  <p><b class="f38 m_cc03"><!=data.money!></b></p>
	 

</script>

<script>
$(function(){
	//自适应缩放
	var a_page = 1920/1080;
  	function pageZoom(){
		var w = document.body.clientWidth;
		var h = document.body.clientHeight;
		var realH = h;
		realH = realH*1;  
		var realW = realH*a_page;
		var zoomRatio = realH/1080;
		var ch = 1080*(1-zoomRatio);
		$("#m_page").css({"transform":"scale("+zoomRatio+","+zoomRatio+")"});
		$("#m_page").css({"-webkit-transform":"scale("+zoomRatio+","+zoomRatio+")"});
	};	
			
	$(window).resize(function(){
		pageZoom(); 
	});
	pageZoom();
	//设定滚动条
	$('#monthCom').perfectScrollbar();
	
	getLineChartData();
	getLineBarData();
	function getLineBarData(){

		drawLineBarChart("oneLineBarChart");
	}
	function drawLineBarChart(id){
		var myChart = echarts.init(document.getElementById(id));
		option = {
			grid: {
				left: '50px',
				right: '30px',
				top:'25px',
				bottom:'20px'
			},
		    xAxis: [
		        {
		            type: 'category',
		            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月'],
		            splitLine : {
						show : false
					},
					axisLabel : {
						margin : "10",
						textStyle : {
							color : "#00eeee",
							fontSize : 12
						}
					}
		        }
		    ],
		    yAxis: [
		        {
		            type: 'value',
		            name: '注销量',
		            nameGap:8,
		            nameTextStyle:{
		            	color:"#FFF"
		            },
		            splitLine : {
						show : false
					},
					axisLabel : {
						margin : "10",
						textStyle : {
							color : "#00eeee",
							fontSize : 12
						}
					},
		        },
		        {
		            type: 'value',
		            name: '增长量',
		            nameGap:8,
		            nameTextStyle:{
		            	color:"#FFF"
		            },
		            axisLabel : {
						margin : "10",
						textStyle : {
							color : "#00eeee",
							fontSize : 12
						}
					},
		            splitLine : {
						show : false
					}
		        }
		    ],
		    series: [
		        {
		            name:'注销量',
		            type:'bar',
		            barWidth:25,
		            itemStyle:{
		            	normal:{
		            		color:'#00eeee'
		            	}
		            },
		            data:[2053, 1119, 2673,1533, 0, 0,2335,1359,818]
		        },
		        {
		            name:'增长量',
		            type:'line',
		            yAxisIndex: 1,
		            lineStyle:{
		            	normal:{
		            		color:"#892c0d",
		            		width:2.5
		            	}
		            },
		            data:[7553,2791,10292,5102,0, 0, 8086, 14806, 8932]
		        }
		    ]
		};
		myChart.setOption(option);
	}

	function getLineChartData(){
		var json = {
			data:{
				legend:["增长量","注册量"],
				x:["2010","2011","2012","2013","2014","2015","2016"],
				y:{
					"增长量":["1500","775","750","340","956","880","560"],
					"注册量":["1001","1775","175","1111","956","450","230"],
				}
			}
		}
   var data0={				
				legend:["增长量","注销量"],
				x:["2010","2011","2012","2013","2014","2015","2016"],
				y:{
					"增长量":["39497","41866","43452","54530","71290","87789","86813"],
					"注销量":["11461","26348","17858","15500","18182","48791","27901"],
				}	
				
		}
var data1={				
				legend:["增长量","注销量"],
				x:["2010","2011","2012","2013","2014","2015","2016"],
				y:{
					"增长量":["1480","1030","7683","1047","1781","2477","3552"],
					"注销量":["29.76","50.09","47.95","72.00","86.78","120.00","125.30"],
				}	
				
		}
		var data2={
				
				legend:["今年","去年"],
				x:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
				y:{
					"今年":["7553","2791","10292","5102","0","0","8086","14806","8932","0","0","0"],
					"去年":["8893","3923","6962","8189","7675","3974","2306","3384","6683","3540","5673","9263"],
				}	
				
		}
       var data3={
				
				legend:["今年","去年"],
				x:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
				y:{
					"今年":["2053","1119","2637","1533","0","0","2335","1359","818","0","0","0"],
					"去年":["10286","2027","2868","3103","8384","6193","1829","1050","49","442","918","2435"],
				}	
				
		}
		drawLineChart("oneLineChart",data0);
		drawLineChart("oneLineChart2",data1);
		drawLineChart("oneLineChart3",data2);
		drawLineChart("oneLineChart4",data3);
	}
	//条形图 
	function drawLineChart(id,data){
		console.log(data);
		var color = ["#158555","#892c0d"];
		var myChart = echarts.init(document.getElementById(id));
		option = {
			legend: {
		        right: '10px',
		        data: data.legend,
		        textStyle:{
		        	color:'#FFFFFF'
		        }
		    },
			grid: {
				left: '50px',
				right: '15px',
				top:'25px',
				bottom:'35px'
			},
			xAxis : [
				{
				    show:true,
					type : 'category',
					boundaryGap : false,
					axisLine : {
						lineStyle : {
							color : "#3E4955"
						}
					},
					splitLine : {
						show : false
					},
					axisTick : {show:false},
					axisLabel : {
						margin : "10",
						textStyle : {
							color : "#00eeee",
							fontSize : 12
						}
					},
					//x轴数据
					data : data.x
				}
			],
			yAxis : [
				{
					type : 'value',
					splitNumber  : 4,
					splitLine : {
						lineStyle : {
							color : "#3E4955",
							width :1,
							opacity:0.3
						}
					},
					axisTick : {show:false},
					axisLabel : {
						margin : "10",
						textStyle : {
							color : "#00eeee",
							fontSize : 14
						}
					},
					axisLine : {
						show:false
					},
				}
			],
			series : []
		};
		for(var i=0;i<data.legend.length;i++){
			option.series.push({		
				name:data.legend[i],
				type:'line',
				smooth:true,
				symbolSize:7,
				areaStyle: {
					normal: {
						opacity:0.1
					}
				},
				lineStyle : {
					normal: {
						opacity:0.8,
						width:2.5
					}
				},
				//y轴数据
				data:data.y[data.legend[i]]
			})
		}
		if(data.legend.length == 1){
			option.series[0].areaStyle.normal.color = color[1];
			option.series[0].lineStyle.normal.color = color[1];
		}else if(data.legend.length>1){
			option.series[0].areaStyle.normal.color = color[1];
			option.series[0].lineStyle.normal.color = color[1];
			option.series[1].areaStyle.normal.color = color[0];
			option.series[1].lineStyle.normal.color = color[0];
		}
		myChart.setOption(option);
	}


	function getMonth_rise(){
	/*
		$.post("",{},function(result){
			
		},"json");
		*/
		var result = {
			status:1,
			mess:"成功",
			data:[
				{name:"海口市",num:25.01},
			    {name:"三亚市",num:13.42},
		   	    {name:"儋州市",num:12.26},
				{name:"琼海市",num:11.65},
			    {name:"文昌市",num:11.62},
				{name:"万宁市",num:11.12},
				{name:"东方市",num:10.90},
			    {name:"乐东县",num:10.74},
		   	    {name:"屯昌县",num:10.73},
				{name:"澄迈县",num:10.68},
			    {name:"陵水县",num:10.64},
				{name:"昌江县",num:10.64},
				{name:"定安县",num:10.60},
			    {name:"保亭县",num:10.50},
		   	    {name:"白沙县",num:10.47},
				{name:"临高县",num:10.47},
			    {name:"五指山市",num:10.42},
				{name:"琼中县",num:10.40},
				{name:"三沙市",num:0}
			]
		}
		for(var i=0;i<result.data.length;i++){
			var tmp = result.data[i];
			if(tmp.num>90){
				result.data[i].className = "m_bg01";
			}else if(tmp.num>80){
				result.data[i].className = "m_bg02";
			}
			else if(tmp.num>60){
				result.data[i].className = "m_bg03";
			}
			else if(tmp.num>40){
				result.data[i].className = "m_bg04";
			}
			else if(tmp.num>20){
				result.data[i].className = "m_bg05";
			}
			else {
				result.data[i].className = "m_bg06";
			}
		}
		console.log(result);
		var ht = baidu.template("Month_rise_template",result);
		$("#Month_rise").html(ht);
		$('#monthCom').perfectScrollbar("update");
	}	
	
	function getIndustry_increase(){
	/*
		$.post("",{},function(result){
			
		},"json");
		*/
		var result = {
			status:1,
			mess:"成功",
			data:[
				{name:"交通运输",num:27265},
			    {name:"批发和零售业",num:9518},
		   	    {name:"居民服务",num:5773},
			    {name:"租赁和商务服务",num:3743},
			    {name:"农、林、牧、渔业",num:2094},
			    {name:"建筑业",num:2018},
			    {name:"计算机服务软件",num:1014},
			    {name:"制造业",num:1018},
			    {name:"房地产业",num:1585},
			    {name:"住宿和餐饮业",num:1406}
			]
		}
		var ht = baidu.template("Industry_increase_template",result);
		$("#Industry_increase").html(ht);
	}	
	
	function Market_inf(){
	/*
		$.post("",{},function(result){
			
		},"json");
		*/
		var result = {
			status:1,
			mess:"成功",
			data:[
				{name:"数量增长",num:'同比',increase:"1.34%",decline:"0.00%"},
			    {name:"数量增长",num:'环比',increase:"0.99%",decline:"0.00%"},
		   	    {name:"资金增长",num:'同比',increase:"0.13%",decline:"0.00%"},
				{name:"资金增长",num:'环比',increase:"16.89%",decline:"0.00%"}
			]
		}
		var ht = baidu.template("Market_inf_template",result);
		$("#Market_inf").html(ht);
	}	
	
	function BigData(){
	/*
		$.post("",{},function(result){
			
		},"json");
		*/
		var result = {
			status:1,
			mess:"成功",
			data:{
				num:"77,2206",
				money:375834.4
			}
		}
		var ht = baidu.template("BigData_template",result);
		$("#BigData").html(ht);
	}	
	
	
	function init(){
		getIndustry_increase();
		getMonth_rise();
		Market_inf();
		BigData();
	}
	init();
}); 
</script>
</body>
</html>

