<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--引入ECharts文件-->
<title>Echarts</title>
<script src="js/echarts.common.min.js"></script>
</head>
<script src="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 name="search_type" id="search_type" >
<option value="day" >按照天统计</option>
<option value="week" >按照周统计</option>
<option value="month">按照月统计</option>
</select>
<div class="w140" id="searchtype_day">
<div class='input-group date' id='datetimepicker1'>
<input id="stime" class="form-control" type="text" value="<?php echo $search_time;?>" name="search_time">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<div id="searchtype_week" style="display:none;">
<select name="search_time_year" id="searchweek_year">
<?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 name="search_time_month" id="searchweek_mouth">
<?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 name="search_time_week" id="searchweek_week">
<?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 id="searchtype_month" style="display:none;">
<select name="search_time_year" class="querySelect">
<?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 name="search_time_month" class="querySelect">
<?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 id="line_chart" style="width:600px;height:400px;"></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>
Copy after login
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
