yunsu/cloud-socket/WebContent/tpl/house_chartUser.html

<script>
var param = {};
var chartDateArr;
var chartValArr;
param.type = 1;
	$(function(){
// 		$("aside>ul>li").eq(10).find("a").css({"background":"#00C1DE"})
		$("aside>ul>li").eq(10).siblings('li').find("a").css({"background":"#42485B"})
		$("aside>ul>li").eq(10).children('ul').find("li").eq(0).find('a').css({"background":"#00C1DE"})
		$("aside>ul>li").eq(10).children('ul').find("li").eq(0).siblings('li').find("a").css({"background":"#42485B"})
		adjustChartSize();
		loadChart(); 
	})
/*展开时间选择框*/
	function showDate(){	
		if($("#dateChouse ul").is(":hidden")){
			$("#dateChouse ul").slideDown(100)
		}else{
			$("#dateChouse ul").slideUp(100)
		}
	}
/*选择时间*/
	function selectDate(index){
		$("#dateChouse>span").html($("#dateChouse li").eq(index-1).find('a').html());
		param.type = index;
		loadChart();
	}
/*图表区大小*/
	function adjustChartSize(){
		var mainHeight = $(window).height()-280+"px";
		$(".scrollChart").css({"height":mainHeight});
	}
/*加载图表*/	
	function loadChart(){
		if(param.type == 5){
			param.start = $("input[name=daterangepicker_start]").val();
			param.end = $("input[name=daterangepicker_end]").val();
		}else{
			delete param.start;
			delete param.end;
		}
		$.post($("#secShow option:selected").val() == 1?"geuUserAsc.do":"geuUserNum.do",param,function(resp){
			var chartDateArr = [];
			var chartValArr = [];
			var listArray = resp.data;
			for(var i = 0;i<listArray.length;i++){
				chartDateArr.push(listArray[i].indate);
				chartValArr.push(listArray[i].sl);
			}
			var commChart = echarts.init(document.getElementById('yearChart'));
			var commoption = {
//		 			title: {
//		 		        text: '折线图堆叠'
//		 		    },
				    tooltip: {
				        trigger: 'axis'
				    },
				    legend: {
				        data:[$("#secShow option:selected").text()]
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '2%',
				        containLabel: true
				    },
				    toolbox: {
				        feature: {
				            saveAsImage: {}
				        }
				    },
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: chartDateArr
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [
				        {
				            name:$("#secShow option:selected").text(),
				            type:'line',
				            stack: '总量',
				            data:chartValArr
				        }

				    ]
				};
			commChart.setOption(commoption);
		})
		
	}
</script>
<div class="section">
    <div  class="section_top">
        <p>
            <a>统计分析 > 用户量</a>
        </p>
    </div>
    <div class="add_item">	
    	<span id="dateChouse" onclick="showDate()">
    		<span>最近7天</span>
    		<img src="images/down.png">
    		<input type="text" readonly name="reservation" id="reservation">
    		<ul style="display:none;">
    			<li onclick="selectDate(1)"><a>最近7天</a></li>
    			<li onclick="selectDate(2)"><a>最近1个月</a></li>
    			<li onclick="selectDate(3)"><a>最近3个月</a></li>
    			<li onclick="selectDate(4)"><a>最近1年</a></li>
    			<li><label for ="reservation">自定义</label></li>
    		</ul>
    	</span>
    	<select id="secShow" onchange="loadChart()" class="form-control" style="width: 200px;display: inline-block;margin-left: 20px;">
    		<option value="1">用户增长量</option>
    		<option value="2">用户总量</option>
    	</select>
    </div>
    <div class="information">
    	<div class="scrollChart" id="yearChart" style="border:1px solid #ccc;">
    		
         </div>        
    </div>
</div>
<script>
	
    $('#reservation').daterangepicker(null, function(start, end, label) {
    });
    $(".applyBtn").click(function(){
    	$("#dateChouse>span").html($("input[name=daterangepicker_start]").val()+" 至 "+$("input[name=daterangepicker_end]").val());
    	param.type = 5;
    	loadChart();
    })
</script>