再论百度Echarts技术，如何从后台获取数据并显示在页面上

页面：百度Echarts技术做的

jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<script src="./scripts/dataAnalysis/queryrain.js"></script>
<script src="./scripts/dataAnalysis/rainpic.js"></script>
 <script src="./scripts/echarts-2.2.7/build/dist/echarts.js"></script>
 <!-- <script language="javascript">
setTimeout("$('select#stcd').val('${stcd}')", 100);
</script> --> 
<input type="hidden" id="tips" value="${param.tips}"/>


<c:if test="${param.flag==true}">
    <script type="text/javascript">
        layer.msg(decodeURI($("#tips").val()), 2, 1);
        layer.shift('top',500);
    </script>
</c:if>
<c:if test="${param.flag==false}">
    <script type="text/javascript">
        layer.msg(decodeURI($("#tips").val()), 2, 5);
        layer.shift('top',500);
    </script>
</c:if>


<table style="width: 99%;height: 100%">
    <tr>
        <td style="width:10%;height:18px;color:#000;padding-left: 10px;padding-bottom: 10px;">
            当前位置：数据分析->雨情信息管理->雨量过程线
        </td>
    </tr>
    <tr>
        <td style="width: 100%;height: 10%;">
            <form  id="queryForm" method="post">
                <table style="width:98%;color:#000;margin-left: 10px;">
                    <tr>
                        <td style="width:150px;height:10%;">
                            <label>测站编码</label>
                           
                        <select id="stcd" name="stcd" value="${stcd}">
<option value="" selected="selected">请选择</option>

<c:forEach items="${stationstcd}" var="item2">

<option value="${item2.stcd}">${item2.stnm}(${item2.stcd})</option>
</c:forEach>
</select>
                        </td>
                         
                         <td style="width:150px;height:10%;color:#000;padding-left: 10px;padding-bottom: 10px;">
                            <label>开始时间:</label>
                            <input type="text" id="tmbegin"  onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})" class="Wdate" name="tmbegin" value="${tmbegin}"/>
                        </td>
                       <td style="width:150px;height:10%;color:#000;padding-left: 10px;padding-bottom: 10px;">
                            <label>结束时间:</label>
                            <input type="text" id="tmend" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})" class="Wdate"  name="tmend" value="${tmend}"/>
                        </td>
                    <td style="width: 5%;height:10%;">
                           <div class="btn query_btn" onclick="javaScript:$('#queryForm').submit();"/>  
                        <!--  <div class="btn query_btn" onclick="submitall();"/>--> 
                        
                        </td>
                    <td align="left" style="width: 10%">
                            <c:forEach items="${operate}" var="oper"><c:if test="${oper.operateType=='ADD'}"><div class="btn add_btn"  model="add" title="添加用户" /></c:if></c:forEach>
                        </td> 
                        
                       
                        <td style="width:5%;height:10%;color:#000;"> <div class="btn add_btnf"  model="add1" title="雨量过程线图表" onclick="getrainchart();"/></td>
                    </tr>
                </table>
            </form>
        </td>
    </tr>
    
   <tr>
 <td style="width: 100%;height: 25%;" align="center">
       
 <div id="mainss2" style="height:300px;width:1152px"></div>
    </td>
      </tr>  
    <tr>
           <td style="width: 100%;height: 55%;">
           
            <div id="main" style="width:100%;height:100%;background: #ffffff;overflow:auto;text-align: center;">
     
                <table cellspacing="1" width="100%" class="tablesorter" id="listTable">
              <thead>
                    <tr>
                       <th style="display:none">序号</th>
                       <th>测站编码</th>  
                       <th>测站名称</th>
                       <th>监测时间</th>
                       <th>监测雨量</th>
                       <th>雨量历时</th>
                       <!-- <th>修改时间</th> -->
                       <th width="150px">操作</th>
                    </tr>
                    </thead>
                     <tbody> 
                      <c:forEach items="${pageInfo.result}" var="item">
                    <tr>
                            <td style="display:none">${item.id}</td>
                            <td >${item.stcd}</td>
                            <td >${item.stnm}</td>
                            <td><fmt:formatDate pattern="yyyy-MM-dd HH:mm:ss" 
            value="${item.tm}" /></td>
                            <td>${item.rain}</td>
                            <td>${item.intv}</td>
                            <!-- <td><fmt:formatDate pattern="yyyy-MM-dd hh:mm:ss" 
            value="${item.moditime}" /></td> -->
                                
                           <td align="center">
                                <div style="width: 120px;">
                                
                                    <c:forEach items="${operate}" var="oper">
                                        <c:if test="${oper.operateType=='EDIT'}">
                                            <div class="btn edit_btn" style="float: left;" model="edit" title="修改数据"></div>
                                        </c:if>
                                        <c:if test="${oper.operateType=='DELETE'}">
                                            <div class="btn del_btn" style="float: right" model="delete" title="删除数据"></div>
                                        </c:if>
                                    </c:forEach>
                                </div>
                            </td>
                    </tr>
                    </c:forEach>
                     </tbody> 
                     
             </div>
  </div>
 </td>
  </tr>
 
</table> 
<div id="page" class="page">
                    <a id="UpPage" title="首页" href="${pageInfo.firstPageUrl}"><<</a>
                    <a id="indexPage" title="上一页" href="${pageInfo.prevPageUrl}"><</a>
                    <a class="curp" style="width: 60px;">当前页：</a>
                    <input type="text" id="pageNum" value="${pageInfo.startPageIndex+1}"
                       onkeydown="keyDownSubmit('${pageInfo.firstPageUrl}','${pageInfo.totalPageSize}')"/>
                    <a class="curp" style="width: 60px;"
                       onclick="javaScript:pageJump('${pageInfo.firstPageUrl}','${pageInfo.totalPageSize}')">点击跳转</a>
                    <a class="curp" style="width: 60px;">共${pageInfo.totalPageSize}页</a>
                    <a id="NextPage" title="下一页" href="${pageInfo.nextPageUrl}">></a>
                    <a id="EndPage" title="末页" href="${pageInfo.lastPageUrl}">>></a>
                </div>
                </td>
    </tr>
</table>       


<div id="delete" class="dialog" style="display: none;">
    <form action="deletequeryrain.do" method="post" id="delete_form">
        <table  style="border-spacing:15px">
            <tr>
                <td>序号</td>
                <td><input type="text" readonly id="delete_queryrain_id" name="delete_queryrain_id" /></td>
            </tr>
            <tr>
                <td>测站编码</td>
                <td><input type="text" readonly id="delete_queryrain_stcd" name="delete_queryrain_stcd" /></td>
            </tr>
            
            <tr>
                <td colspan="4" align="center" >
                    <div style="width: 150px;">
                        <div class="btn del_btn" onclick="submit_form('delete_form')"  style="float: left;"></div>
                        <div class="btn close_btn" model-close="delete" style="float: right;"></div>
                    </div>
                </td>
            </tr>
        </table>
    </form>
</div>
 <div id="add1" class="dialog" style="display: none;">
 <div id="mainss" style="height:410px;width:600px"></div>
    </div>
<div id="add" class="dialog" style="display: none;">


    <form action="addqueryrain.do" method="post" onsubmit="return validate(this)" id="add_form">
        <table  style="border-spacing:15px">
            <tr>
                <td>序号</td>
                <td>自增</td>
                <td>测站编码</td>
                <td>
                 <select id="add_queryrain_stcd" name="add_queryrain_stcd">
<option value="" selected="selected">请选择</option>
<c:forEach items="${sessionScope.rainstations}" var="item2">
<option value="${item2.stcd}"> ${item2.stcd}</option>
</c:forEach>
</select>
                </td> 
                <td>监测时间</td>
                <td><input type="text" id="add_queryrain_tm" name="add_queryrain_tm"  onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})" class="Wdate" style="width: 100%"/></td>
             </tr>
             <tr>  
                <td>监测雨量</td>
                <td colspan="1"><input type="text" id="add_queryrain_rain" name="add_queryrain_rain" style="width: 100%"/></td>
                <td>雨量历时</td>
                <td colspan="1"><input type="text" id="add_queryrain_intv" name="add_queryrain_intv" style="width: 100%"/></td> 
                <td></td>
                <td colspan="1"></td> 
            </tr>
            
                  
           
             <tr>
                <td colspan="2" align="center" >
                    <div style="float:middle;'">
                        <div class="btn save_btn" onclick="submit_form('add_form')" style="float:right;'" ></div>
                        
                    </div>
                </td>
                 <td colspan="2" align="center" >
                    <div style="float:middle;'">
                        
                        <div class="btn close_btn" model-close="add" style="float:left;'" ></div>
                    </div>
                </td>
            </tr>
        </table>
    </form></div>
    
    <div id="edit" class="dialog" style="display: none;">


    <form action="editqueryrain.do" method="post" onsubmit="return validate(this)" id="edit_form">
        <table  style="border-spacing:15px">
            <tr>
                <td>序号</td>
                <td><input type="text" id="edit_queryrain_id" readonly name="edit_queryrain_id" style="width: 100%"/></td>
                <td>测站编码</td>
                <td>
                 <select id="edit_queryrain_stcd" name="edit_queryrain_stcd">
<option value="" selected="selected">请选择</option>
<%-- <c:forEach items="${sessionScope.rainstations}" var="item2">
<option value="${item2.stcd}"> ${item2.stcd}</option>
</c:forEach> --%>
<c:forEach items="${stationstcd}" var="item2">

<option value="${item2.stcd}">${item2.stnm}(${item2.stcd})</option>
</c:forEach>
</select>
                </td>
                <td>监测时间</td>
                <td><input type="text" id="edit_queryrain_tm" name="edit_queryrain_tm"  onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})" class="Wdate" style="width: 100%"/></td>
             </tr>
             <tr>  
              <td>监测雨量</td>
                <td colspan="1"><input type="text" id="edit_queryrain_rain" name="edit_queryrain_rain" style="width: 100%"/></td>
                <td>雨量历时</td>
                <td colspan="1"><input type="text" id="edit_queryrain_intv" name="edit_queryrain_intv" style="width: 100%"/></td> 
                <td></td>
                <td colspan="1"></td> 
            </tr>
            
            
                
           
             <tr>
                <td colspan="2" align="center" >
                    <div style="float:middle;'">
                        <div class="btn save_btn" onclick="submit_form('edit_form')" style="float:right;'" ></div>
                        
                    </div>
                </td>
                 <td colspan="2" align="center" >
                    <div style="float:middle;'">
                        
                        <div class="btn close_btn" model-close="edit" style="float:left;'" ></div>
                    </div>
                </td>
            </tr>
        </table>
    </form>
    </div>
    

service:

//雨量过程线图表
public List<Map<String, Object>> findrainpic(String stcd,String tmbegin,String tmend ) {
String quanbu="quanbu";
JdbcTemplate ff=allJDBCTemplate.getJdbcTemplate();
if(!isNull(stcd)){

/* String sql = "  select top 1000 a.*,b.stnm  from dt_rain a inner join tb_station b on  a.stcd=b.stcd where a.stcd='"
+ stcd
+ "' and tm >'"
+ tmbegin
+ "' and tm<'"
+ tmend
+ "' order by tm desc" ;*/
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
Date sd = null;
Date ed = null;
try{
sd = sdf.parse(tmbegin);
ed = sdf.parse(tmend);
}catch(Exception e){
e.printStackTrace();
}
String sql = "";
if(ed.getTime() - sd.getTime() < 3*24*3600*1000){
// sql = "select * from (select SUBSTRING(tm, 1 ,13)+':00:00' as tm, ROUND(SUM(rain), 2) as rain, stcd from dt_rain where stcd='"+stcd+"' AND tm between ? and ? group by stcd,SUBSTRING(tm, 1, 13) ) n order by n.stcd ,n.tm asc";
sql = "select SUBSTRING(CONVERT(varchar, tm, 120), 1, 13)+':00' as tm, ROUND(SUM(rain), 2) as rain, stcd from dt_rain"
+ " where stcd='"+stcd+"' and tm between ? and ? group by stcd,SUBSTRING(CONVERT(varchar, tm, 120), 1, 13)"
+ " order by stcd,tm";
}else{
sql = "select stcd, SUM(rain) as rain, SUBSTRING(CONVERT(varchar, tm, 120), 1, 10)  as tm from (select stcd, rain, case when DATEPART(HH, tm) < 9 then DATEADD(DAY, -1, tm) else tm end as tm from dt_rain where  stcd='"+stcd+"' AND tm between ? and ?) as a group by a.stcd, SUBSTRING(CONVERT(varchar, tm, 120), 1, 10) order by stcd ,tm asc";
}


return ff.queryForList(sql, tmbegin, tmend);
}
else{
/*String sql = "  select a.*,b.stnm  from dt_rain a inner join tb_station b on  a.stcd=b.stcd where tm >'"
+ tmbegin
+ "' and tm<'"
+ tmend
+ "'order by tm desc";*/
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
Date sd = null;
Date ed = null;
try{
sd = sdf.parse(tmbegin);
ed = sdf.parse(tmend);
}catch(Exception e){
e.printStackTrace();
}
String sql = "";
if(ed.getTime() - sd.getTime() < 3*24*3600*1000){
//sql = "select SUBSTRING(tm, 1 ,13)+':00:00' as tm, ROUND(SUM(rain), 2) as rain, stcd from dt_rain where tm between '"+tmbegin+"' and '"+tmend+"' group by stcd,SUBSTRING(tm, 1, 13)";
sql = "select SUBSTRING(CONVERT(varchar, tm, 120), 1, 13)+':00' as tm, ROUND(SUM(rain), 2) as rain, stcd from dt_rain"
+ " where tm between ? and ? group by stcd,SUBSTRING(CONVERT(varchar, tm, 120), 1, 13)"
+ " order by stcd,tm";
}else{
sql = "select stcd, SUM(rain) as rain, SUBSTRING(CONVERT(varchar, tm, 120), 1, 10)  as tm from (select stcd, rain, case when DATEPART(HH, tm) < 9 then DATEADD(DAY, -1, tm) else tm end as tm from dt_rain where tm between ? and ?) as a group by a.stcd, SUBSTRING(CONVERT(varchar, tm, 120), 1, 10)  order by stcd,tm asc";
}

return ff.queryForList(sql, tmbegin, tmend);

}

}

controller:

// 加载雨量过程线图表

@RequestMapping(value = "rainmnpic1")
public void rainmnpic1(// @RequestParam(value = "stcd", required = false, defaultValue = "") String stcd,
HttpServletRequest request, HttpServletResponse response) {
Map<String, Object> queryParams = new HashMap<String, Object>();
Map<String, Object> queryParams1 = new HashMap<String, Object>();
SimpleDateFormat sdfh=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
logger.info("查图表controller开始："+sdfh.format(new Date()));
String stcd=request.getParameter("stcd");
String tmend1=request.getParameter("tmend");

String tmbegin1=request.getParameter("tmbegin");
 Date now = new Date();
       SimpleDateFormat dateFormat1 = new SimpleDateFormat("yyyy-MM");
       SimpleDateFormat dateFormat2 = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
 
       String nowtime1 = dateFormat1.format( now )+"-01 00:00:00"; 
       String nowtime2 = dateFormat2.format( now ); 
SimpleDateFormat sdf1=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
java.util.Date tmbegin2=new  java.util.Date();
java.sql.Timestamp tmbegin=null;
/* String tmbegin="";*/
if(tmbegin1!=""){
try {
tmbegin2= (java.util.Date) sdf1.parse(tmbegin1);


 
tmbegin = new java.sql.Timestamp(tmbegin2.getTime());
      tmbegin1=tmbegin.toString();
} catch (ParseException e) {

e.printStackTrace();
}
/* tmbegin=tmbegin1;*/
} else{
/*try {
tmbegin2= (java.util.Date) sdf1.parse(nowtime1);
tmbegin = new java.sql.Timestamp(tmbegin2.getTime());
tmbegin1=tmbegin.toString();
} catch (ParseException e) {

e.printStackTrace();
}
*/

tmbegin1=nowtime1; 


}
 
 
 
SimpleDateFormat sdf2=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
java.util.Date tmend2=new  java.util.Date();
java.sql.Timestamp tmend=null;
/*String  tmend="";*/
if(tmend1!=""){
try {
tmend2= (java.util.Date) sdf1.parse(tmend1);


 
tmend = new java.sql.Timestamp(tmend2.getTime());
 tmend1=tmend.toString();
} catch (ParseException e) {

e.printStackTrace();
}
/* tmend=tmend1;*/

}  else{
/*try {
tmend2= (java.util.Date) sdf1.parse(nowtime2);
tmend = new java.sql.Timestamp(tmend2.getTime());
tmend1=tmend.toString();
} catch (ParseException e) {

e.printStackTrace();
}*/

tmend1=nowtime2;



}
JSONObject json = new JSONObject();
List<Object> listrainstcd=queryrainService.queryStationsrain(null);
/* List<Object> rainstcds=new ArrayList();
for(int i=0;i<listrainstcd.size();i++){
String stcds=null;
      stcds=(listrainstcd.get(i)).getStcd();
rainstcds.add(stcds.toString());
}*/
json.put("stationrain", queryrainService.queryStationsrain(null));
//System.out.println("stationrain:"+ queryrainService.queryStationsrain(null));
List<Map<String,Object>> list=queryrainService.findrainpic(stcd,tmbegin1,tmend1);

JSONArray jsonArr = new JSONArray();
Map<String, EcharsData> jsonMap = new HashMap<String, EcharsData>();
for(Map<String,Object> map: list) {
String jstcd = (String)map.get("stcd");
String jtm = (String)map.get("tm");
BigDecimal jrain = (BigDecimal)map.get("rain");
if(jsonMap.containsKey(jstcd)) {
EcharsData edata = jsonMap.get(jstcd);
edata.getTmlist().add(jtm);
edata.getRainlist().add(jrain);
} else {
EcharsData edata = new EcharsData();
//List<String> jtmlist = new ArrayList<String>();
//List<BigDecimal> jrainlist = new ArrayList<BigDecimal>();
edata.setStcd(jstcd);
edata.getTmlist().add(jtm);
edata.getRainlist().add(jrain);
jsonMap.put(jstcd, edata);
}
}

Iterator it = jsonMap.entrySet().iterator();
while (it.hasNext()) {
Map.Entry entry = (Map.Entry) it.next();
String jstcd = (String)entry.getKey();
EcharsData edata = (EcharsData)entry.getValue();
JSONObject jsonObj = new JSONObject();
jsonObj.put("name", jstcd); jsonObj.put("type", "line");
jsonObj.put("barMinHeight", 10);
jsonObj.put("tm", edata.getTmlist().toArray());
jsonObj.put("barMaxWidth", 40);
jsonObj.put("data", edata.getRainlist().toArray());

if(json.get("tmdata")==null) {
json.put("tmdata", edata.getTmlist().toArray());
}
jsonArr.add(jsonObj);
}



List<Object> rain0 = new ArrayList();List<String> stcd0 = new ArrayList();
for (int k = 4; k < list.size(); k=k+8) {
BigDecimal tmtm = (BigDecimal) list.get(k).get("rain");
rain0.add(list.get(k));


}
for (int k = 0; k < list.size(); k++) {
String tmtm = (String) list.get(k).get("stcd");
stcd0.add(tmtm);
}


List<Map<String,Object>> listnew= new ArrayList();;
for(int w=0;w<listrainstcd.size();w++){


Map map1 = new HashMap();
map1.put("barMinHeight", 10);
map1.put("barMaxWidth", 40);
map1.put("name", listrainstcd.get(w));
map1.put("type", "bar");
map1.put("data", "bar");
Map map20 = new HashMap();

Map map21 = new HashMap();
map21.put("type", "max");map21.put("name", "最大值");
Map map22 = new HashMap();
map22.put("type", "min");map22.put("name", "最小值");
map20.put("", map21);map20.put("", map22);
map1.put("markPoint", "["+map20+"]");

listnew.add(map1);
}

//Map map1 = new HashMap();
// map1.put("feihuolong",2);list.add(map1);
/* List<Map<String, Object>>  aList = new ArrayList();
Map map = new HashMap();
map.put("a",2);map.put("B","222");map.put("name","梁小龙");
aList.add(map);

//List<Map<Object,Object>> list1=queryrainService.findrainpic2(stcd,tmbegin1,tmend1);

/* String[] col=new String[]{"tm", "rain", "stcd"}; 
boolean requireExtremum=true;
StringBuffer xys = new StringBuffer();
StringBuffer lbs = new StringBuffer();
try{
Set<String> labelSet = new HashSet<String>(); 
for(int i=0;i<list.size();i++){
labelSet.add(list.get(i).get(col[2]).toString());
}
String[] labels = labelSet.toArray(new String[]{});
Arrays.sort(labels);
// 按x轴排序，时间格式
Collections.sort(list, new TimeComparator(col[0]));
xys.append("[");
lbs.append("[");
for(int i=0;i<labels.length;i++){
lbs.append("\""+labels[i]+"\",");
xys.append("[");
for(int j=0;j<list.size();j++){
if(list.get(j).get(col[2]).toString().equals(labels[i])){
// xys.append("[\"");
//xys.append(list.get(j).get(col[0]).toString());
//xys.append(",");
xys.append(list.get(j).get(col[1]).toString());
//xys.append(",\"");
xys.append(",");
// xys.append(labels[i]);
//xys.append("\"],");
}
}
xys = xys.deleteCharAt(xys.length() - 1);
xys.append("],");
}
if(xys.length() > 1)
xys = xys.deleteCharAt(xys.length() - 1);
if(lbs.length() > 1)
lbs = lbs.deleteCharAt(lbs.length() - 1);
xys.append("]");
lbs.append("]");
if(requireExtremum && list.size() > 0){
String[] xs = new String[list.size()];
double[] ys = new double[list.size()];
for(int i=0;i<list.size();i++){
xs[i] = list.get(i).get(col[0]).toString();
ys[i] = Double.parseDouble(list.get(i).get(col[1]).toString());
}
Arrays.sort(ys);
Arrays.sort(xs);
lbs.append(",\"xmax\":\"");
lbs.append(xs[xs.length -1]);
lbs.append("\",\"xmin\":\"");
lbs.append(xs[0]);
lbs.append("\",\"ymax\":");
lbs.append(ys[ys.length-1]);
lbs.append(",\"ymin\":");
lbs.append(ys[0]);

}
}catch(Exception e){
e.printStackTrace();
}*/


//json.put("xys", xys);


json.put("data", jsonArr);

try {
response.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
PrintWriter out = response.getWriter();
json.put("status", "1");
json.put("info", "查询成功!");
out.write(json.toString());

} catch (IOException e) {
logger.error(e.getLocalizedMessage());
}
SimpleDateFormat sdfg=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
logger.info("查图表controller结束："+sdfg.format(new Date()));
return ;

}

js:

$().ready(function(){
    $("#listTable").find("tr").hover(function () {
        $("#delete_queryrain_id").val($(this).children("td").eq(0).html());
        $("#delete_queryrain_stcd").val($(this).children("td").eq(1).html());


        $("#edit_queryrain_id").val($(this).children("td").eq(0).html());
        $("#edit_queryrain_stcd").val($(this).children("td").eq(1).html());
        $("#edit_queryrain_tm").val($(this).children("td").eq(3).html());
        $("#edit_queryrain_rain").val($(this).children("td").eq(4).html());
        $("#edit_queryrain_intv").val($(this).children("td").eq(5).html());
        $("#edit_queryrain_moditime").val($(this).children("td").eq(6).html());
        
   
        
       
    });
  /*  bindDate();*/
    getrainchart2();
})


/*function bindDate(){
$("#tmend").empty();
var now = new Date();
var year = now.getFullYear();       //年
     var month = now.getMonth() + 1 < 10 ? "0" + (now.getMonth() + 1) : now.getMonth() + 1;
     var day = now.getDate()  < 10 ? "0" + (now.getDate()) : now.getDate();
     var hh = now.getHours()  < 10 ? "0" + (now.getHours()) : now.getHours();
     var minutes = now.getMinutes()  < 10 ? "0" + (now.getMinutes()) : now.getMinutes();
     var second = now.getSeconds() < 10 ? "0" + (now.getSeconds()) : now.getSeconds();
     


$("#select_rainmax_year").val(now.format("yyyy"));
$("#tmend").val(year+"-"+month+"-"+day+" "+ hh+":"+minutes+":"+second);
$("#tmbegin").val(year+"-"+month+"-01"+" "+"00:00:00");
}*/
function validate(form) {
    var id=$(form).attr("id");
    var prefix=id.substring(0,id.indexOf('_')+1);
    var queryrain_stcd=$("#"+prefix+"queryrain_stcd").val();
    var queryrain_tm=$("#"+prefix+"queryrain_tm").val();
    var queryrain_rain=$("#"+prefix+"queryrain_rain").val();
    
    if(queryrain_stcd == "") {
        inlineMsg(prefix+"queryrain_id",'编码不能为空.',2);
        return false;
    }
    /*if(!$.isNumeric(queryrain_stcd)) {
        inlineMsg(prefix+"queryrain_stcd",'只能为数字.',2);
        return false;
    }*/


    if(queryrain_tm == "") {
        inlineMsg(prefix+"queryrain_tm",'监测时间不能为空.',2);
        return false;
    }
    if(queryrain_rain == "") {
        inlineMsg(prefix+"queryrain_rain",'监测雨量不能为空.',2);
        return false;
    }
    if(!$.isNumeric(queryrain_rain)) {
        inlineMsg(prefix+"queryrain_rain",'只能为数字.',2);
        return false;
    }
    return true;
}


function getrainchart2(){//把图形函数放在ajax函数里，使用它的获取值
 var data2=new Array() ;var data3 = new Array();var data1 =new Array() 
 var data11 =new Array() ;var data22 =new Array() ;//把ajax里定义的变量赋给全局变量（ajax不好写全局变量）
 var data33 = new Array();var time=new Array();
 var times = new Array();var stationrainstcd = new Array();var times2 = new Array();
var  year=new Array();var month=new Array();var date=new Array();var hours=new Array();var minutes=new Array();var seconds=new Array();var nanos=new Array();
// var stcd1=$(btn).parent().parent().children("td").eq(0).find("select").val();
// var tmbegin1=$(btn).parent().parent().children("td").eq(1).find("input").val();
// var tmend1=$(btn).parent().parent().children("td").eq(2).find("input").val();
var dataall = new Array(); var dataallname = new Array(); var dataalltype = new Array(); var dataallbarMinHeight = new Array();
var dataallbarMaxWidth = new Array(); var dataalldata = new Array();
var stcd=$("#stcd").val();
var tmbegin=$("#tmbegin").val();
var tmend=$("#tmend").val();
var data = {
    stcd:stcd,
    tmbegin:tmbegin,
    tmend:tmend
};
  var itemId=$("#stationType").val();
var url = "";var name="";var kk="";

url =  "rainmnpic1.do";
name="雨量过程线(单位:mm)";
kk="雨量数据";
var xdata,ydata;
$.ajax({


type : "post",
   data:data,
url : url,
async: false,
success : function(msg) {
xdata = JSON.parse(msg).tmdata;
ydata = JSON.parse(msg).data;var stationrain = JSON.parse(msg).stationrain;
for (var i = 0; i < stationrain.length; i++) {
stationrainstcd[i]=stationrain[i].stcd;
}
/*
var xys = JSON.parse(msg).xys;
var allchart = JSON.parse(msg).data;
var stationrain = JSON.parse(msg).stationrain;
var oJSON = eval_r('('+stationrain+')');
      for (var i = 0; i < stationrain.length; i++) {
stationrainstcd[i]=stationrain[i].stcd;
}
               for (var i = 0; i < allchart.length; i++) {
dataallname[i]=allchart[i].name; dataalltype[i]=allchart[i].type;
dataallbarMinHeight[i]=allchart[i].barMinHeight;dataallbarMaxWidth[i]=allchart[i].barMaxWidth;
dataalldata[i]=allchart[i].data;
dataall[i]=dataallbarMinHeight[i]+","+dataallbarMaxWidth[i]+","+dataallname[i]+","+dataalltype[i]+","+dataalldata[i];
}
alert("dataall:"+dataall);

for (var i = 0; i < allchart.length; i++) {


//mm[0]=allchart[0].tm.month+1;
// alert("2"+allchart[0].tm.year-100+"-"+"0"+mm[0]+"-"+allchart[0].tm.date);
 year[i] = "2"+allchart[i].tm.year-100; 
 
     month[i] = allchart[i].tm.month + 1 < 10 ? "0" + (allchart[i].tm.month + 1) : allchart[i].tm.month + 1;
    
     date[i] = allchart[i].tm.date  < 10 ? "0" + (allchart[i].tm.date) : allchart[i].tm.date;
    
     hours[i] = allchart[i].tm.hours  < 10 ? "0" + (allchart[i].tm.hours) : allchart[i].tm.hours;
    
     minutes[i] = allchart[i].tm.minutes  < 10 ? "0" + (allchart[i].tm.minutes) : allchart[i].tm.minutes;
   
    seconds[i] = allchart[i].tm.seconds < 10 ? "0" + (allchart[i].tm.seconds) : allchart[i].tm.seconds;
   
    // alert(year[0]+"-"+month[0]+"-"+date[0]+" "+hours[0]+":"+minutes[0]+":"+seconds[0]);
    times[i]=year[i]+"-"+month[i]+"-"+date[i]+" "+hours[i]+":"+minutes[i]+":"+seconds[i];
// alert("时间1："+times[0]);
    times2[i]=allchart[i].tm;
    data1.push(allchart[i].stcd);
        data22[i]=(allchart[i].rain);
        // data33[i].push(year[i]+"-"+month[i]+"-"+date[i]+" "+ hours[i]+":"+minutes[i]+":"+second[i]);
        //data33[i].push(year[i]+"-"+month[i]+"-"+date[i]);
        // data33[i].push(year[i]);
               data2[i]=data22[i] ;
                data3[i]=data33[i]




       
}*/



     




}
});


 
// 路径配置
require.config({
paths : {
echarts : './scripts/echarts-2.2.7/build/dist'
}
});


require([ 'echarts', 'echarts/chart/bar' ,'echarts/chart/line' ], function(ec) {


var myChart = ec.init(document.getElementById('mainss2'));


var option = { 
title : {
       text: name,
       textStyle:{
           fontSize: 18,
           fontWeight: 'bolder',
           color: '#0A8ECE'
       } 
   },
tooltip : {
show : true
},
legend : {
data : stationrainstcd,
itemWidth : 20
},
dataZoom : {

//y:50,
handleSize:4,
       show : true,
       realtime : true,
       start : 0,
       end : 100
   },
   toolbox: {
       show : true,
       feature : {
           mark : {show: true},
           dataView : {show: true, readOnly: false},
           magicType : {show: true, type: ['line', 'bar']},
           restore : {show: true},
           saveAsImage : {show: true}
       }
   },
   calculable : true,
xAxis : [ {
type : 'category',
data : xdata
} /*,{

type : 'category',

data :data1,

}*/],


yAxis : [ {name:'',
type : 'value'
} ],
/*series : [ 
          
    
          {
barMinHeight:10,
barMaxWidth:40,

name :'RR003',
type : "bar",




data:data2,
markPoint : {
               data : [
                   {type : 'max', name: '最大值'},
                   {type : 'min', name: '最小值'},
//       function(){
//       int i=0;var res=new Array();int k=2;
//       for( i=0;i<data2.size();i++){
//               res[i]=  {name:data1[i],value: data2[i],  xAxis: times[i], yAxis:data2[i]};
//          for( k=0;k<data2.size();k++){
//               res[k]=res[k-1]+res[k-2]+",";
//          }  
//       }
//               return res;
//                }     
                 ]
           },
           markLine : {
               data : [
                   {type : 'average', name: '平均值'}
               ]
           },
         

} ]*/
series : ydata
};

myChart.setOption(option);
});
 
  }
/**
 * 绑定事件
 * 
 * @return
 */
function bindChangeEvent() {

$("#stcd").live("change", function() {

var stcd = $(this).val();


});

}




function submit(){
var stcd = $("#stcd").val();
var tmbegin = $("#tmbegin").val();
var tmend = $("#tmend").val();
$("#queryForm").action="queryrain.do?stcd="+stcd+"&tmbegin="+tmbegin+"&tmend="+tmend+"";


}


alljdbctemple:

package com.szllt.pingshan.dao;


import java.sql.Connection;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.List;
import java.util.Map;


import com.szllt.pingshan.entity.data.PageInfos;


import javax.sql.DataSource;


import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.log4j.Logger;
import org.springframework.dao.DataAccessException;
import org.springframework.jdbc.core.ConnectionCallback;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.core.StatementCallback;
import org.springframework.jdbc.object.SqlQuery;
import org.springframework.stereotype.Service;






/**
 * @author liangxiaolei
 * @version 创建时间：2016年1月5日 下午3:58:13
 * 类说明
 * @param <Session>
 */
@Service
public class AllJDBCTemplate<Session> {
protected static final String Transformers = null;


private Logger log = Logger.getLogger(this.getClass());


private DataSource dataSource;
private JdbcTemplate jdbcTemplate;


public JdbcTemplate getJdbcTemplate() {
return jdbcTemplate;
}


public void setJdbcTemplate(JdbcTemplate jdbcTemplate) {
this.jdbcTemplate = jdbcTemplate;
}


public void setDataSource(DataSource dataSource) {
this.dataSource = dataSource;
this.jdbcTemplate = new JdbcTemplate(dataSource);
}

public List<Map<String, Object>> getList(String sql) {

return  jdbcTemplate.queryForList(sql);

}
    public List<Map<String, Object>> findBystcd(String sql) {

return  jdbcTemplate.queryForList(sql);

}
public List<Map<Object, Object>> getList2(String sql) {

return  (List<Map<Object, Object>>) jdbcTemplate.queryForMap(sql);

}
}
spring-servlet.xml:

<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:aop="http://www.springframework.org/schema/aop" xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/aop
        http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
        http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context-3.0.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
        http://www.springframework.org/schema/tx
        http://www.springframework.org/schema/tx/spring-tx-3.0.xsd">


<!-- 定时任务类 -->
<bean id="szmbTask" class="com.szllt.common.util.SzmbImageRequest">
<property name="cloudPath" value="${cloud_path}" />
<property name="radarPath" value="${radar_path}" />
</bean> 
<bean id="alertTask" class="com.szllt.common.util.AlertTask" />
<bean id="oracletosqlTask" class="com.szllt.common.util.OracletosqlTask" />

<!-- 定时任务执行的方法 -->
<bean id="cloudJobDetail" class="org.springframework.scheduling.quartz.MethodInvokingJobDetailFactoryBean">
<property name="targetObject"><ref bean="szmbTask"/></property>
<property name="targetMethod"><value>getSatPic</value></property>
</bean>

<bean id="radarJobDetail" class="org.springframework.scheduling.quartz.MethodInvokingJobDetailFactoryBean">
<property name="targetObject"><ref bean="szmbTask"/></property>
<property name="targetMethod"><value>getRadarPic</value></property>
</bean>

<bean id="alertJobDetail" class="org.springframework.scheduling.quartz.MethodInvokingJobDetailFactoryBean">
<property name="targetObject"><ref bean="alertTask"/></property>
<property name="targetMethod"><value>checkAlert</value></property>
</bean>
<bean id="oracletosqlJobDetail" class="org.springframework.scheduling.quartz.MethodInvokingJobDetailFactoryBean">
<property name="targetObject"><ref bean="oracletosqlTask"/></property>
<property name="targetMethod"><value>checkOracletosql</value></property>
</bean>
<!-- 卫星云图下载定时器：每小时执行一次 -->
<bean id="cloudTrigger" class="org.springframework.scheduling.quartz.CronTriggerFactoryBean">
<property name="jobDetail">
<ref bean="cloudJobDetail" />
</property>
<property name="cronExpression">
<!-- 时间大小由小到大排列，从秒开始，顺序为 秒，分，时，天，月，年 *为任意 ？为无限制。 -->
<value>0 41 * * * ?</value>
</property>
</bean>

<!-- 雷达图下载定时器：每十分钟执行一次 -->
<bean id="radarTrigger" class="org.springframework.scheduling.quartz.CronTriggerFactoryBean">
<property name="jobDetail">
<ref bean="radarJobDetail" />
</property>
<property name="cronExpression">
<!-- 时间大小由小到大排列，从秒开始，顺序为 秒，分，时，天，月，年 *为任意 ？为无限制。 -->
<value>0 0/15 * * * ?</value>
</property>
</bean>

<!-- 预警检查定时器：每五分钟执行一次 -->
<bean id="alertTrigger" class="org.springframework.scheduling.quartz.CronTriggerFactoryBean">
<property name="jobDetail">
<ref bean="alertJobDetail" />
</property>
<property name="cronExpression">
<!-- 时间大小由小到大排列，从秒开始，顺序为 秒，分，时，天，月，年 *为任意 ？为无限制。 -->
<value>0 0/5 * * * ?</value>
</property>
</bean>

<!-- oracle同步到SQL定时器：每半小时执行一次 -->
<bean id="oracletosqlTrigger" class="org.springframework.scheduling.quartz.CronTriggerFactoryBean">
<property name="jobDetail">
<ref bean="oracletosqlJobDetail" />
</property>
<property name="cronExpression">
<!-- 时间大小由小到大排列，从秒开始，顺序为 秒，分，时，天，月，年 *为任意 ？为无限制。 -->
<value>0 0/30 * * * ?</value>
</property>
</bean>


<bean id="pingshanQuertz" lazy-init="false" autowire="no" class="org.springframework.scheduling.quartz.SchedulerFactoryBean">
<property name="triggers">
<list>
<ref bean="cloudTrigger" />
<ref bean="radarTrigger" />
<ref bean="alertTrigger" />
<!-- <ref bean="oracletosqlTrigger" /> -->
</list>
</property>
</bean>  


<!-- 指定配置文件路径 -->
<bean class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
<property name="location" value="classpath:config.properties" />
</bean>


<bean id="viewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">
<property name="viewClass">
<value>org.springframework.web.servlet.view.tiles2.TilesView</value>
</property>
</bean>


<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">
<property name="definitions">
<list>
<value>/WEB-INF/tiles.xml</value>
</list>
</property>
</bean>


<bean id="mappingJacksonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter" />


<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
<property name="messageConverters">
<list>
<ref bean="jsonHttpMessageConverter" />
</list>
</property>
</bean>


<bean id="jsonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>application/json;charset=UTF-8</value>
</list>
</property>
</bean>


<!-- 启动Spring MVC的注解功能，完成请求和注解POJO的映射 -->
<mvc:annotation-driven />


<!-- 描述程序中所有注解 -->
<!-- enable component scanning and autowire (beware that this does not enable mapper scanning!) -->
<context:component-scan base-package="com.szllt.pingshan" />


<bean id="webObjectsAspect" class="com.szllt.common.aspects.WebObjectsAspect" />
<aop:aspectj-autoproxy />


<mvc:interceptors>
<mvc:interceptor>
<mvc:mapping path="/*" />
<bean class="com.szllt.common.filter.RequestInterceptor" />
</mvc:interceptor>
</mvc:interceptors>


<!-- SQL Server 数据源 -->
<bean name="dataSource" class="com.alibaba.druid.pool.DruidDataSource" init-method="init" destroy-method="close">
<property name="url" value="${jdbc_url}" />
<property name="username" value="${jdbc_username}" />
<property name="password" value="${jdbc_password}" />


<!-- 初始化连接大小 -->
<property name="initialSize" value="0" />
<!-- 连接池最大使用连接数量 -->
<property name="maxActive" value="20" />
<!-- 连接池最大空闲 -->
<property name="maxIdle" value="20" />
<!-- 连接池最小空闲 -->
<property name="minIdle" value="0" />
<!-- 获取连接最大等待时间 -->
<property name="maxWait" value="60000" />


<!-- <property name="poolPreparedStatements" value="true" /> 
<property name="maxPoolPreparedStatementPerConnectionSize" value="33" /> -->


<property name="validationQuery" value="${validationQuery}" />
<property name="testOnBorrow" value="false" />
<property name="testOnReturn" value="false" />
<property name="testWhileIdle" value="true" />


<!-- 配置间隔多久才进行一次检测，检测需要关闭的空闲连接，单位是毫秒 -->
<property name="timeBetweenEvictionRunsMillis" value="60000" />
<!-- 配置一个连接在池中最小生存的时间，单位是毫秒 -->
<property name="minEvictableIdleTimeMillis" value="25200000" />


<!-- 打开removeAbandoned功能 -->
<property name="removeAbandoned" value="true" />
<!-- 1800秒，也就是30分钟 -->
<property name="removeAbandonedTimeout" value="1800" />
<!-- 关闭abanded连接时输出错误日志 -->
<property name="logAbandoned" value="true" />


<!-- 监控数据库 -->
<!-- <property name="filters" value="stat" /> -->
<property name="filters" value="mergeStat" />
</bean>


<!-- 数据连接管理 -->
<!-- transaction manager, use JtaTransactionManager for global tx -->
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource" />
</bean>
<bean id="jttransactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="jtdataSource" />
</bean>


<!-- 注解式事务处理 -->
<!-- enable transaction demarcation with annotations -->
<tx:annotation-driven transaction-manager="transactionManager" />
<tx:annotation-driven transaction-manager="jttransactionManager" />


<!-- MyBatisSqlSessionFactory配置 -->
<!-- define the SqlSessionFactory -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource" />
<property name="configLocation" value="classpath:mybatis-config.xml" />
<!-- 自动扫描目录, 省掉Configuration.xml里的手工配置 -->
<property name="typeAliasesPackage" value="com.szllt.pingshan.entity" />
<!-- 显式指定Mapper文件位置 -->
<property name="mapperLocations" value="classpath:/com/szllt/pingshan/dao/**/*Mapper.xml" />
</bean>


<!-- 扫描映射文件，并自动装载 -->
<!-- scan for mappers and let them be autowired -->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="com.szllt.pingshan.dao" />
<property name="markerInterface" value="com.szllt.pingshan.dao.ISqlMapper" />
</bean>
<!-- 解析器注册 -->
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
<property name="messageConverters">
<list>
<ref bean="stringHttpMessageConverter" />
</list>
</property>
</bean>
<!-- String类型解析器，允许直接返回String类型的消息 -->
<bean id="stringHttpMessageConverter"
class="org.springframework.http.converter.StringHttpMessageConverter" />


<!-- jtds dataSource -->
<bean id="jtdataSource"
class="org.springframework.jdbc.datasource.DriverManagerDataSource">
<property name="driverClassName" value="net.sourceforge.jtds.jdbc.Driver" />
<property name="url"
value="jdbc:jtds:sqlserver://192.168.1.15:1433/PingshanDb" />
<property name="username" value="sa" />
<property name="password" value="szllt" />
</bean>
<!-- Oracle 数据源 -->
<bean id="oracleDataSource"
class="org.springframework.jdbc.datasource.DriverManagerDataSource">
<property name="driverClassName" value="oracle.jdbc.driver.OracleDriver" />
<property name="url" value="jdbc:oracle:thin:@10.4.1.1:1521:ORCL" />
<property name="username" value="datacenter" />
<property name="password" value="R720sjjh" />
</bean>

<!-- jdbcTemplate -->
<bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
<property name="dataSource">
<ref local="jtdataSource" />
</property>
</bean>
<!-- <bean id="jdbcTemplateoracle" class="org.springframework.jdbc.core.JdbcTemplate">
<property name="dataSource">
<ref local="oracleDataSource" />
</property>
</bean> -->
<!-- 所有的jdbctemlate -->
<bean id="allJDBCTemplate" class="com.szllt.pingshan.dao.AllJDBCTemplate">
<property name="dataSource" ref="jtdataSource" />
</bean>
<bean id="oracleJDBCTemplate" class="com.szllt.pingshan.dao.OracleJDBCTemplate">
<property name="dataSource" ref="oracleDataSource" />
</bean>
<!-- </>multipart 的解析器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="26214400"></property>
<property name="defaultEncoding" value="utf-8" /><!--属性：编码 -->
</bean>  


</beans>