danci/www.hanlinyuanonline.com/Application/Admin/View/Index/index.html

<!-- 头部 -->
<include file="Public/top" />
<div class="wrapper row-offcanvas row-offcanvas-left">
	<!-- Left side column. contains the logo and sidebar -->
	<aside class="left-side sidebar-offcanvas">
		<!-- 左边 -->
		<include file="Public/left" />
	</aside>

	<!-- Right side column. Contains the navbar and content of the page -->
	<aside class="right-side">
		<!-- Content Header (Page header) -->
		<!-- bar -->
		<include file="Public/bar" />
		<script src="__PUBLIC__/js/My97DatePicker/WdatePicker.js"></script>
		<!-- Main content -->
		<!-- 右侧 -->
		<div class="row">
			<div class="col-sm-12">
                <div class="row pad">
                    <form name="form1" method="get">
                        <div class="col-sm-10">
                            <div class="btn-group">
                                时间：<input id="startDate" name="start_date" value="<{$startDate}>" class="Wdate" type="text" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'endDate\')}'})"/>
                                <input id="endDate" name="end_date" value="<{$endDate}>" class="Wdate" type="text" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'startDate\')}'})"/>
                            </div>
                            <div class="btn-group">
                                <select name="day_type" id="day_type" class="form-control input-sm">
                                    <option <if condition="$dayType eq 1">selected="selected"</if> value="1">今天</option>
                                    <option <if condition="$dayType eq 2">selected="selected"</if> value="2">昨天</option>
                                    <option <if condition="$dayType eq 3">selected="selected"</if> value="3">最近7天</option>
                                    <option <if condition="$dayType eq 4">selected="selected"</if> value="4">最近30天</option>
                                </select>
                            </div>
                            <div class="btn-group">
                            	<input type="hidden" name="flag" id="flag" value="2" />
                                <button class="btn btn-sm btn-primary" name="sub" type="submit"><i class="fa fa-search"></i></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
	        <div class="col-md-6">
	        	<!-- BAR CHART -->
                <div class="box box-success">
                    <div class="box-header">
                        <h3 class="box-title">总数</h3>
                    </div>
                    <div class="box-body chart-responsive">
                    <div style="height: 300px;">
                        <table class="table table-bordered table-striped">
	                        <tbody>
		                        <tr>
		                            <th>总用户数</th>
		                            <th>normal模式对战次数</th>
		                            <th>rank模式对战次数</th>
		                            <th>人机对战次数</th>
		                        </tr>
		                        <tr>
		                            <td><{$info['reg']}></td>
		                            <td><{$info['normal']}></td>
		                            <td><{$info['rank']}></td>
		                            <td><{$info['pve']}></td>
		                        </tr>
	                    	</tbody>
	                	</table>
	                	</div>
                    </div><!-- /.box-body -->
                </div><!-- /.box -->
	            <!-- AREA CHART -->
	            <div class="box box-primary">
	                <div class="box-header">
	                    <h3 class="box-title">新增用户数</h3>
	                </div>
	                <div class="box-body chart-responsive">
	                    <div class="chart" id="regChart" style="height: 300px;"></div>
	                </div><!-- /.box-body -->
	            </div><!-- /.box -->
				<div class="box box-warning">
                    <div class="box-header">
                        <h3 class="box-title">新增人机模式对战次数</h3>
                    </div>
                    <div class="box-body chart-responsive">
                        <div class="chart" id="pveChart" style="height: 300px;"></div>
                    </div><!-- /.box-body -->
                </div><!-- /.box -->
	        </div><!-- /.col (LEFT) -->
            <div class="col-md-6">
             	<!-- DONUT CHART -->
	            <div class="box box-danger">
	                <div class="box-header">
	                    <h3 class="box-title">新增normal模式对战次数</h3>
	                </div>
	                <div class="box-body chart-responsive">
	                    <div class="chart" id="normalChart" style="height: 300px; position: relative;"></div>
	                </div><!-- /.box-body -->
	            </div><!-- /.box -->
                <!-- LINE CHART -->
                <div class="box box-info">
                    <div class="box-header">
                        <h3 class="box-title">新增rank模式对战次数</h3>
                    </div>
                    <div class="box-body chart-responsive">
                        <div class="chart" id="rankChart" style="height: 300px;"></div>
                    </div><!-- /.box-body -->
                </div><!-- /.box -->
            </div><!-- /.col (RIGHT) -->
        </div><!-- /.row -->
        <script type="text/javascript" src="__PUBLIC__/js/echarts.min.js"></script>
        <script type="text/javascript">
        	$(function(){
        		console.log(222);
        		$('#day_type').on('change',function(){
        			console.log(111);
        			$('#flag').val('1');
        		});
        	})
        	var regChart = echarts.init(document.getElementById('regChart'));
        	var regOption = {
        	        tooltip : {trigger: 'axis'},
        	        xAxis : [{type : 'category',boundaryGap : false,data : [<{$xAxis}>]}],
        	        yAxis : [{type : 'value'}],
        	        series : [{name:'数量',type:'line',data:[<{$yAxisReg}>],itemStyle:{normal:{color:'#3c8dbc',lineStyle:{width:3,color:'#3c8dbc'}}},}]
        	    };
        	    regChart.setOption(regOption);
        	    
        	    var normalChart = echarts.init(document.getElementById('normalChart'));
            	var normalOption = {
            	        tooltip : {trigger: 'axis'},
            	        xAxis : [{type : 'category',boundaryGap : false,data : [<{$xAxis}>]}],
            	        yAxis : [{type : 'value'}],
            	        series : [{name:'数量',type:'line',data:[<{$yAxisNormal}>],itemStyle:{normal:{color:'#3c8dbc',lineStyle:{width:3,color:'#3c8dbc'}}},}]
            	    };
            	normalChart.setOption(normalOption);
            	    
            	    var rankChart = echarts.init(document.getElementById('rankChart'));
                	var rankOption = {
                	        tooltip : {trigger: 'axis'},
                	        xAxis : [{type : 'category',boundaryGap : false,data : [<{$xAxis}>]}],
                	        yAxis : [{type : 'value'}],
                	        series : [{name:'数量',type:'line',data:[<{$yAxisRank}>],itemStyle:{normal:{color:'#3c8dbc',lineStyle:{width:3,color:'#3c8dbc'}}},}]
                	    };
                	rankChart.setOption(rankOption);
                	
                	var pveChart = echarts.init(document.getElementById('pveChart'));
                	var pveOption = {
                	        tooltip : {trigger: 'axis'},
                	        xAxis : [{type : 'category',boundaryGap : false,data : [<{$xAxis}>]}],
                	        yAxis : [{type : 'value'}],
                	        series : [{name:'数量',type:'line',data:[<{$yAxisPve}>],itemStyle:{normal:{color:'#3c8dbc',lineStyle:{width:3,color:'#3c8dbc'}}},}]
                	    };
                	pveChart.setOption(pveOption);
        </script>
		<!-- 右侧 -->
		<!-- /.content -->
	</aside>
	<!-- /.right-side -->
</div>
<!-- ./wrapper -->

</body>
</html>