<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--引入ECharts文件--> <title>Echarts</title> <script src="https://www.jb51.net/js/echarts.common.min.js"></script> </head> <script src="https://www.jb51.net/js/jquery.js"></script> <?php include('php/datehelper.php');include('php/statistics.php');?> <?php //获得系统年份 $year_arr = getSystemYearArr(); //获得系统月份 $month_arr = getSystemMonthArr(); //存储参数 $search_arr = $_REQUEST; $search_arr =dealwithSearchTime($search_arr); //获得本月的周时间段 $week_arr = getMonthWeekArr($search_arr['week']['current_year'],$search_arr['week']['current_month']); //天数 if(!isset($_REQUEST['search_time'])){ $_REQUEST['search_time'] = date('Y-m-d', time()-86400); } $search_time = $_REQUEST['search_time'];//搜索的时间 //周 if(!isset($_REQUEST['search_time_year'])){ $_REQUEST['search_time_year'] = date('Y', time()); } if(!isset($_REQUEST['search_time_month'])){ $_REQUEST['search_time_month'] = date('m', time()); } if(!isset($_REQUEST['search_time_week'])){ $_REQUEST['search_time_week'] = implode('|', getWeek_SdateAndEdate(time())); } $current_year = $_REQUEST['search_time_year']; $current_month = $_REQUEST['search_time_month']; $current_week = $_REQUEST['search_time_week']; ?> <style> #search_type{float:left} #searchtype_day{float:left} #searchtype_week{float:left} #searchtype_month{float:left} </style> <body> <select > <option value="day" >按照天统计</option> <option value="week" >按照周统计</option> <option value="month">按照月统计</option> </select> <div> <div> <input type="text" value="<?php echo $search_time;?>"> <span><span></span></span> </div> </div> <div> <select> <?php foreach ($year_arr as $k=>$v){?> <option value="<?php echo $k;?>" <?php echo $current_year == $k?'selected':'';?>><?php echo $v; ?></option> <?php } ?> </select> <select> <?php foreach ($month_arr as $k=>$v){?> <option value="<?php echo $k;?>" <?php echo $current_month == $k?'selected':'';?>><?php echo $v; ?></option> <?php } ?> </select> <select> <?php foreach ($week_arr as $k=>$v){?> <option value="<?php echo $v['key'];?>" <?php echo $current_week == $v['key']?'selected':'';?> ><?php echo $v['val']; ?></option> <?php } ?> </select> </div> <div> <select> <?php foreach ($year_arr as $k=>$v){?> <option value="<?php echo $k;?>" <?php echo $current_year == $k?'selected':'';?> ><?php echo $v; ?></option> <?php } ?> </select> <select> <?php foreach ($month_arr as $k=>$v){?> <option value="<?php echo $k;?>" <?php echo $current_month == $k?'selected':'';?>><?php echo $v; ?></option> <?php } ?> </select> </div> <div></div> <?php $thearray=array(11,11,15,13,12,13,10);?> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var mylineChart=echarts.init(document.getElementById('line_chart')); option1 = { title: { text: '未来一周气温变化', subtext: '纯属虚构' }, tooltip: { trigger: 'axis' }, legend: { data:['最高气温','最低气温'] }, toolbox: { show: true, feature: { dataZoom: {}, // dataView: {readOnly: false}, magicType: {type: ['line', 'bar']}, restore: {}, saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['周一','周二','周三','周四','周五','周六','周日'] }, yAxis: { type: 'value', axisLabel: { formatter: '{value} °C' } }, series: [ { name:'最高气温', type:'line', data:<?php echo(json_encode($thearray)); ?>, markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, markLine: { data: [ {type: 'average', name: '平均值'} ] } }, { name:'最低气温', type:'line', data:[1, 4, 2, 5, 3, 2, 0], markPoint: { data: [ {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5} ] }, markLine: { data: [ {type: 'average', name: '平均值'} ] } } ] }; // 使用刚指定的配置项和数据显示图表。 mylineChart.setOption(option1); </script> <script> //展示搜索时间框 function show_searchtime(){ s_type = $("#search_type").val(); $("[id^='searchtype_']").hide(); $("#searchtype_"+s_type).show(); } $(function(){ show_searchtime(); $("#search_type").change(function(){ show_searchtime(); }); //更新周数组 $("[name='search_time_month']").change(function(){ var year = $("[name='search_time_year']").val(); var month = $("[name='search_time_month']").val(); $("[name='search_time_week']").empty(); $.getJSON('php/ajax.php',{y:year,m:month},function(data){ if(data != null){ for(var i = 0; i < data.length; i++) { $("[name='search_time_week']").append('<option value="'+data[i].key+'">'+data[i].val+'</option>'); } } }); }); //更新年数组 $("[name='search_time_year']").change(function(){ var year = $("[name='search_time_year']").val(); $("[name='search_time_week']").empty(); $("#searchweek_mouth option:first").prop("selected", 'selected'); $.getJSON('php/ajax.php',{y:year},function(data){ if(data != null){ for(var i = 0; i < data.length; i++) { $("[name='search_time_week']").append('<option value="'+data[i].key+'">'+data[i].val+'</option>'); } } }); }); }); </script> </body> </html>
5.time_deal.php