Echarts折线图，根据时间条件查询动态数据

Echarts折线图，根据时间条件查询动态数据

这是我第一次接触到Echarts，所以写个小总结。（Echarts官网上有很多实例，还有教程。Echarts官网实例地址）
我写的是，根据开始时间和结束时间这两个条件去查询数据，并且用到Tab转换，一个用table表格展示数据，一个是Echarts折线图展示动态数据。
Tab转换直接在HTML中写就可以了。
HTML：

	
		

			

				

					

						
							开始时间：
						
						
					
				
				

					

						
							结束时间：
						
						
					
				
				

					
						 查询
					
				
			
			

				

					

						

							折线图
						
						

							 表格 
						
					
					
					

						

								
						
						

							

						
					
				
			
		
	
	
	

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 resultList = null;
		try {
			Map map = new HashMap();
			
			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有些地方感觉转不出来，不过最后还是写出来了，有些细节地方还需要改正。