Echarts折线图，根据时间条件查询动态数据
这是我第一次接触到Echarts，所以写个小总结。（Echarts官网上有很多实例，还有教程。Echarts官网实例地址）
我写的是，根据开始时间和结束时间这两个条件去查询数据，并且用到Tab转换，一个用table表格展示数据，一个是Echarts折线图展示动态数据。
Tab转换直接在HTML中写就可以了。
HTML：
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-4">
<div class="input-group">
<label class="input-group-addon">
开始时间：
</label>
<input type="text" id="startTime" name="startTime"
class="form-control" placeholder="请选择日期" readonly="readonly"
style="background-color: #FFFFFF;">
</div>
</div>
<div class="col-md-4 col-xs-4">
<div class="input-group">
<label class="input-group-addon">
结束时间：
</label>
<input type="text" id="endTime" name="endTime"
class="form-control" placeholder="请选择日期" readonly="readonly"
style="background-color: #FFFFFF; z-index: 0 !important;">
</div>
</div>
<div class="col-md-4 col-xs-4 text-left common-paddingTop">
<button class="btn btn-info" id="searchBtn">
<span class="glyphicon glyphicon-search"></span> 查询
</button>
</div>
</div>
<div class="row">
<div class="tab-contain">
<ul id="tabs" class="nav nav-tabs">
<li class="active">
<a href="#echarts_content" data-toggle="tab">折线图</a>
</li>
<li>
<a href="#tab-content" data-toggle="tab"> 表格 </a>
</li>
</ul>
<!-- 对应显示内容 -->
<div id="content" class="tab-content">
<div id="tab-content" class="tab-pane fade">
<table class="table table-bordered table-hover" id="list_table">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="echarts_content" class="tab-pane fade in active">
<div id="list_echarts" style="height:300px"></div>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- 折线图 Echarts官网下载源代码echarts.js -->
<script type="text/javascript" src="../..echarts/echarts.js"></script>
JS：
/**
* 初始化折线图
*/
equipWeatherQueryHis.prototype.initEcharts = function(){
var eTime = this.setxAxis();
var eTemperature = [];
var eRain = [];
var eWP = [];
// var eWD = [];
// var eEnpresure = [];
var eHumidity = [];
for ( var i = 0; i < eTime.length; i++) {
eTemperature.push('-');
}
eTemperature.push('0');
//初始化echarts实例
this.myChart = echarts.init(document.getElementById("list_echarts"));
//使用刚指定的配置项和数据显示图
option = ({
tooltip: {
trigger: 'axis'
},legend: { //图例名
data:['温度','雨量','风速','湿度']
},grid: {
left: '3%', //图表距边框的距离
right: '4%',
bottom: '3%',
containLabel: true
},toolbox: { //工具框，可以选择
feature: {
saveAsImage: {}
}
},xAxis:{ //x轴信息样式
type: 'category',
boundaryGap: false,
data:eTime,
axisLabel:{ //x轴文字旋转
rotate:30,
// interval:0
},
},
yAxis:[ //多个Y轴
{
name: '温度(℃)',
type: 'value',
left:100,
max: 50
},{
name: '雨量(mm)',
type: 'value',
left:150,
max: 50
},{
name: '风速(m/s)',
type: 'value',
right:150,
max: 50
},{
name: '湿度(%)',
type: 'value',
right:100,
max: 100
}
],
series:[{
name:'温度',
type:'line',
stack:'℃',
color:['red'],
data:eTemperature
},{
name:'雨量',
type:'line',
stack:'mm',
yAxisIndex:1, //第二个Y轴
color:['yellow'],
data:eRain
},{
name:'风速',
type:'line',
stack:'m/s',
yAxisIndex:2,
color:['green'],
data:eWP
},
// {
// name:'风向',
// type:'line',
// stack:'°',
// color:['blue'],
// data:eWD
// },{
// name:'气压',
// type:'line',
// stack:'hpa',
// color:['orange'],
// data:eEnpresure
//},
{
name:'湿度',
type:'line',
stack:'%',
yAxisIndex:3,
color:['purple'],
data:eHumidity
}]
});
this.myChart.setOption(option);
};
/**
* X轴：时间，默认当前日期的24个小时
*/
equipWeatherQueryHis.prototype.setxAxis = function(){
var date = [];
var start = this.strFormatDate($.trim($("#startTime").val()),0);//开始时间
var end = this.strFormatDate($.trim($("#endTime").val()),1);//结束时间
// this.strFormatDate(start);
// this.strFormatDate(end);
while(start < end){
date.push(start.format("YYYY-MM-DD hh:mm:ss"));
start.setHours(start.getHours()+1);
}
return date;
};
/**
* @param str:传入的字符串类型
* @return 返回时间类型
*/
equipWeatherQueryHis.prototype.strFormatDate = function(str,day){
var date = new Date(str);
date.setDate(date.getDate()+ day);
return date;
};
/**
* 折线图加载数据
*/
equipWeatherQueryHis.prototype.loadEcharts=function(){
var url = this.projectName + "/powerWeather/loadWeatherHis.action?";
//ajax异步请求数据
$.ajax({
async : true,
type: 'get',
url: url,
data:{
begin:$.trim($("#startTime").val()),
end:$.trim($("#endTime").val()),
equipid:this.equip_id,
equiptype:this.equip_type
},
dataType: "json",
success: Tools.bind(this,function (result) {
var option = this.myChart.getOption();
var start = this.strFormatDate($.trim($("#startTime").val()),0);//开始时间
var end = this.strFormatDate($.trim($("#endTime").val()),1);//结束时间
var eTime = [];
var eTemperature = [];
var eRain = [];
// var eEnpresure = [];
var eWP = [];
// var eWD = [];
var eHumidity = [];
var obj = {};
for ( var i = 0; i < result.length; i++) {
obj[new Date(result[i].time.time).format("YYYY-MM-DD hh:mm:ss")] = result[i]
}
var num = 0;
while(start < end){
var xStart = start.format("YYYY-MM-DD hh:mm:ss");
eTime.push(xStart);
start.setHours(start.getHours()+1);
var object = obj[xStart];
if (object == undefined) {
eTemperature[num] = '-';
eRain[num] = '-';
eWP[num] = '-';
// eWD[num] = '-';
// eEnpresure[num] = '-';
eHumidity[num] = '-';
}else{
eTemperature[num] = object.temperature;
eRain[num] = object.rain;
eWP[num] = object.wp;
// eWD = object.wd;
// eEnpresure[num] = object.enpresure;
eHumidity = object.humidity;
}
num++;
}
option.series[0].data = eTemperature;
option.series[1].data = eRain;
option.series[2].data = eWP;
// option.series[4].data = eWD;
// option.series[1].data = eEnpresure;
option.series[3].data = eHumidity;
option.xAxis[0].data=eTime;
this.myChart.setOption(option,true);//重新新加载数据
}),
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!!");
}
});
}
action：
/**
* 查询历史气象数据
*/
public void loadWeatherHis(){
List<StationWeatherInfoVo> resultList = null;
try {
Map<String, Object> map = new HashMap<String, Object>();
String begin=getRequest().getParameter("begin");
String end=getRequest().getParameter("end");
// map.put("begin", getRequest().getParameter("begin"));
// map.put("end", getRequest().getParameter("end"));
map.put("equip_id", getRequest().getParameter("equipid"));
map.put("equip_type", getRequest().getParameter("equiptype"));
if(!ToolsUtil.isEmpty(begin)){
try {
map.put("begin", sdfFull.parse(begin+" 00:00:00"));
} catch (ParseException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}//开始时间
}
if(!ToolsUtil.isEmpty(end)){
try {
map.put("end", sdfFull.parse(end+" 23:59:59"));
} catch (ParseException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}//结束时间
}
// 查询列表数据
resultList = equipWeatherQueryService.loadWeatherHis(map);
} catch (Exception e) {
e.printStackTrace();
}
jsonResponse(resultList);
}
我在写的过程中，JS有些地方感觉转不出来，不过最后还是写出来了，有些细节地方还需要改正。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
