使用Echarts实现动态曲线图表
| 最近做的一个在线气象观测网站要实现一个需求：使用图表展示最近五天温湿度等气象要素的曲线变化 具体效果参考：http://www.weatherobserve.com/showInfoIndex.jsp 图示如下（2016-5-25日的数据）：
下面就详述一下实现过程吧（注：相较于原网页我隐去了很多内容，本实现过程就只专注于Echarts图表实现）
一： HTML页面部分，代码如下： DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="Author" content="Dreamer-1."> <script type="text/javascript" src="js/jquery-1.12.3.min.js">script> <script type="text/javascript" src="js/echarts.common.min.js">script> <title>- 观测数据 -title> head> <body> <div style="height:410px;min-height:100px;margin:0 auto;" id="main">div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { //图表标题 text: '过去五天数据图表' }, tooltip: { trigger: 'axis', //坐标轴触发提示框，多用于柱状、折线图中 /* 控制提示框内容输出格式 formatter: '{b0}
二： Servlet部分，客户端请求提交到 ShowInfoIndex 处，先在 web.xml 里配置一下Servlet映射： xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1"> <display-name>BlogExampledisplay-name> <servlet> <servlet-name>ShowInfoIndexServletservlet-name> <servlet-class>EchartsExample.ShowInfoIndexServletservlet-class> servlet> <servlet-mapping> <servlet-name>ShowInfoIndexServletservlet-name> <url-pattern>/ShowInfoIndexServleturl-pattern> servlet-mapping> web-app>关于ShowInfoIndexServlet，简单说一下请求-响应中间的过程： 客户端发送图表请求给Servlet，Servlet接收到请求后先获取客户端请求查看的气象站名称，然后从数据库（SqlServer2005 Express版）中获取最近五天内该气象站所有的采集数据（装在List中），再用Gson工具将该List转换成Json对象返回给客户端，客户端接收到返回的Json对象后对其进行解析并将相应数据填入Echarts中，然后作显示； 其中Record.java是只对外提供get/set方法的用于封装数据的普通实体类，DBUtil.java是JDBC方式下专门提供Connection、Statement、ResultSet等的数据库工具类。 （原本的连接数据库并获取数据过程需经过业务逻辑层与数据访问层，较为复杂，这里隐去这两层，直接在Servlet内连接数据库并拿取数据） Ps：墙裂建议使用PreparedStatement进行参数化查询，这样可以有效避免SQL注入！
ShowInfoIndexServlet代码如下： package EchartsExample;import java.io.IOException;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;import java.text.SimpleDateFormat;import java.util.*;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.google.gson.Gson;/** * 响应观测记录展示页的Echarts图表数据请求（使用json格式返回客户端需要的数据） * @author zhong * */public class ShowInfoIndexServlet extends HttpServlet { /** * */ private static final long serialVersionUID = 1L; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req,resp); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); //设定客户端提交给servlet的内容按UTF-8编码 response.setCharacterEncoding("UTF-8"); //设定servlet传回给客户端的内容按UTF-8编码 response.setContentType("text/html;charset=UTF-8"); //告知浏览器用UTF-8格式解析内容 String name = request.getParameter("name"); //获取台站名参数 //获取当天在内的五天以前的0点格式字符串（用于数据库查询） Calendar cal = Calendar.getInstance(); cal.add(Calendar.DATE, -4); //获取当天在内的五天以前的日期时间 SimpleDateFormat sdf1 = new SimpleDateFormat("yyyy-MM-dd 00:00:00"); //设定日期格式 String fiveDaysAgoStr = sdf1.format(cal.getTime()); //将五天前的日期时间按指定格式转换成字符串 //获取当前时间并将其转换成指定格式的字符串（用于数据库查询） Date now = new Date(); SimpleDateFormat sdf2 = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String nowStr = sdf2.format(now); //System.out.println(nowStr); //======================================连接数据库操作============================================================================================ /* * 连接数据库并获取五天内该名称的气象站的所有采集数据 */ List
alldata表部分数据截图：
Record类代码如下： package EchartsExample;import java.sql.*;/** * 封装气象数据信息 * @author zhong * */public class Record { private String taizhan_num; //台站名 private String tem; //温度 private String hum; //湿度 private String pa; //压强 private String rain; //雨量 private String win_dir; //风向 private String win_sp; //风速 private String dateStr; //观测日期（用于Echarts显示格式） private Timestamp date; //观测日期（原始格式） /** * 获取观测日期（用于echarts图表展示）； * @return 观测日期值 */ public String getDateStr() { return dateStr; } /** * 设置观测日期（用于echarts图表展示）； * @param dateStr 待设置观测日期值 */ public void setDateStr(String dateStr) { this.dateStr = dateStr; } /** * 获取产生该观测记录的台站名称； * @return 台站名称 */ public String getTaizhan_num() { return taizhan_num; } /** * 设置产生该观测记录的台站名称； * @param taizhan_num 待设置台站名称 */ public void setTaizhan_num(String taizhan_num) { this.taizhan_num = taizhan_num; } /** * 获取温度； * @return 温度值 */ public String getTem() { return tem; } /** * 设置温度； * @param tem 待设置温度值 */ public void setTem(String tem) { this.tem = tem; } /** * 获取湿度； * @return 湿度值 */ public String getHum() { return hum; } /** * 设置湿度； * @param hum 待设置湿度值 */ public void setHum(String hum) { this.hum = hum; } /** * 获取压强； * @return 压强值 */ public String getPa() { return pa; } /** * 设置压强； * @param pa 待设置压强值 */ public void setPa(String pa) { this.pa = pa; } /** * 获取雨量； * @return 雨量值 */ public String getRain() { return rain; } |
