Echarts----折线图(年月日，日期查询)

前端

<input type="button" value="天" ar="day" onclick="searchInterval(this)"/>
<input type="button" value="月" ar="month" onclick="searchInterval(this)"/>
<input type="button" value="季" ar="season" onclick="searchInterval(this)"/>
<input type="button" value="年" ar="year" onclick="searchInterval(this)"/>
<input class="easyui-datebox" name="startTime" id="startTime" class="text easyui-datebox         
       disabled lg-input" data-options="editable:false" size="12"/>
<input class="easyui-datebox" name="endTime" id="endTime" class="text easyui-datebox 
       disabled lg-input" data-options="editable:false" size="12"/>
<input type="button" value="查询" onclick="search(this)"/>

<iframe src="" id="frams" scrolling="none" frameborder="0" name="rright"></iframe>


<li class="liunselected" ar="temp1">温度</li>
<li class="liunselected" ar="ia,ib,ic">电流</li>
<li class="liunselected" ar="rcv">电压</li>


<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
    var begintime,endtime,tr,name
    $(function(){
        //初始化参数
        endtime = '';
        var t=$('.ultype li')[0];
        tr=$(t).attr('ar');
        name=$(t).html();
        begintime = getNowFormatDate('day');
        if(name==null){
            return ;
        }
        $('#frams').attr('src','url');
    });

    function searchType(ob){
        tr=$(ob).attr('ar');
        name=$(ob).html();
        $('#frams').attr('src','url');
    }

    function searchInterval(dom){
        begintime=getNowFormatDate($(dom).attr('ar'));
        endtime='';
        $('#frams').attr('src','url');
    }

    function search(){
        var startTime = $('input[name=startTime]').val();
        var endTime = $('input[name=endTime]').val();
        if(startTime == ""|| endTime == ""){
            parent.layer.open({icon:2,title: '提示信息',content: '请输入开始时间和结束时间！！！'});
            return ;
        }
        $('#frams').attr('src','url');
    }

    function getNowFormatDate(type) {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate;
        if(type == 'day'){
            currentdate = year + seperator1 + month + seperator1 + strDate;
        }
        if(type == 'month'){
            currentdate = year + seperator1 + month + seperator1 + '01';
        }
        if(type == 'season'){
            if(month  <= 3) {
                currentdate = year + seperator1 + '01' + seperator1 + '01';
            }else if(month <= 6) {
                currentdate = year + seperator1 + '04' + seperator1 + '01';
            }else if(month <= 9) {
                currentdate = year + seperator1 + '07' + seperator1 + '01';
            }else if(month <= 12) {
                currentdate = year + seperator1 + '10' + seperator1 + '01';
            }
        }
        if(type == 'year'){
            currentdate = year + seperator1 + '01' + seperator1 + '01';
        }
        return currentdate;
    }

</script>

后台

@RequestMapping("/xxx")
public String xxx(Monitoring moni,Map<String,Object> map){
	List<MonitoringRecord> list=monitoringRecordService.getListByMid(moni);
	map.put("list", JSON.toJSONString(list));
	String name = moni.getName();
	if(name!=null && !name.equals("")){
		try {
			name=new String(name.getBytes("iso-8859-1"),"utf-8");
		} catch (UnsupportedEncodingException e) {}
	}
	map.put("name", name);
	return "页面路径";
}

图形展示界面

<div id="main"  style="height:280px;margin-right: 10px;padding: 0px;margin: 0px;overflow: hidden;"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
var name='${name}';
$(function(){
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });
    // 使用
    require(
        [
            'echarts',
            'echarts/theme/macarons',
            'echarts/chart/line',
            'echarts/chart/bar'
        ],
         function (ec) {
             // 基于准备好的dom，初始化echarts图表
             var myChart = ec.init(document.getElementById('main'),'macarons'); 
             var unit = 'mA';
             if('${name}' == '温度'){
            	 unit = '°C';
         	}
			if('${name}' == '水压'){
            	 unit = 'MPa';
         	}
             var option = {
			    title : {
			        text: '',
			        subtext: ''
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter:function(params, ticket, callback){
			        	return dateToString(params.name)+"<br/>"+"${name}:"+params.value[1];
			        }
			    },
			    legend: {
			        data:getLegend('${name}')
			    },
			    grid: {
			        x: 60,
			        y: 30,
			        x2:30,
			        y2:50
			    },
			    toolbox: {
			        show : true,
			        feature : {
			            mark : {show: true},
			            dataView : {show: true, readOnly: false},
			            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
			            restore : {show: true},
			            saveAsImage : {show: true}
			        }
			    },
			    calculable : true,
			    xAxis : [
			        {
			            type : 'time'
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value',
			            axisLabel : {
			            	formatter: '{value} '+ unit    
			            }
			        }
			    ],
			    series : getSeries('${name}')
			};
     
             // 为echarts对象加载数据 
             myChart.setOption(option); 
         }
     ); 
});  

function sToTime(s){
	var str = s.toString();
	str = str.replace("/-/g", "/");
	var date = new Date(str);
	return date;
}
function dateToString(now){  
    var year = now.getFullYear();  
    var month =(now.getMonth() + 1).toString();  
    var day = (now.getDate()).toString();  
    var hour = (now.getHours()).toString();  
    var minute = (now.getMinutes()).toString();  
    var second = (now.getSeconds()).toString();  
    if (month.length == 1) {  
        month = "0" + month;  
    }  
    if (day.length == 1) {  
        day = "0" + day;  
    }  
    if (hour.length == 1) {  
        hour = "0" + hour;  
    }  
    if (minute.length == 1) {  
        minute = "0" + minute;  
    }  
    if (second.length == 1) {  
        second = "0" + second;  
    }  
     var dateTime = year + "-" + month + "-" + day +" "+ hour +":"+minute+":"+second;  
     return dateTime;  
  }
  
function getSeries(name){
    var serie = [];
    if(name == '电流监测'){
        for(var i = 0; i < 3; i++){
        	var realname = ''
        	if(i == 0){
        		realname = 'A相电流'
        	}
        	if(i == 1){
        		realname = 'B相电流'
        	}
        	if(i == 2){
        		realname = 'C相电流'
        	} 
        	var item = {
                    name:realname,
                    type: 'line',
                    smooth:false,
                    data: getData(i)
                }
        	serie.push(item);
        };
    }else{
    	var item = {
                name:'${name}',
                type: 'line',
                smooth:false,
                data: getData(name)
            }
    	serie.push(item);
    }
    return serie; 
}
  
function getData(name){
	var list=JSON.parse('${list}');
	var data=new Array();
	for(var i=0;i<list.length;i++){
		var item=new Array();
		item.push(sToTime(list[i].recordtime));
		if(name == '温度'){
			item.push(Number(list[i].temp1));
		}
		if(name == '水压'){
			item.push(Number(list[i].rcv));
		}
		if(name == '剩余电流'){
			item.push(Number(list[i].rcv));
		}
		if(name == 0){
			item.push(Number(list[i].ia));
		}
		if(name == 1){
			item.push(Number(list[i].ib));
		}
		if(name == 2){
			item.push(Number(list[i].ic));
		}
		data.push(item);
	}
	return data;
} 

function getLegend(name){
	var data=new Array();
	if(name == '电流监测'){
		data.push('A相电流');
		data.push('B相电流');
		data.push('C相电流');
	}
	else{
		data.push(name);
	}	
	return data;
}


</script>