Echarts连接数据库，实时绘制动态图

网页和数据库连接可以实现实时出图，出图的方式有两种，第一种，数据单独写在网页里面，不用，不用连接数据库，这个方法比较简单，首先引入echarts.js，后面引入到到网页上，下面是实际代码。

生成的折线图如下所示：

这是第一种方法，数据不用从数据库读取。
下面是第二种方法：从数据库读取数据，实时出图。
首先，在数据库中建立一张数据表，如下所示：

这是我的数据表。
第二步，开始连接数据库。
写一个连接数据库的java类，把地址改为我的表所在的位置，如下所示

public class DBUtil {
	
	static{
		
		try {
			Class.forName("com.mysql.jdbc.Driver");
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	
	public static Connection getConnection(){
		Connection conn = null;
		String url = "jdbc:mysql://localhost:3306/tunnel";
		try {
			conn = DriverManager.getConnection(url, "root", "1234");
		}catch (Exception e) {
			throw new RuntimeException(e);
		}
		return conn;
	}
}

进行数据转换

public class barBean {
	public String name;

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public Integer getNum() {
		return num;
	}

	public void setNum(Integer num) {
		this.num = num;
	}

	public Integer num;
}

建立服务端，代码如下；

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

public class helloBar extends HttpServlet {

	
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		//创建了一个bardao的对象，barDAO主要是对数据库的连接和对数据库的操作
        barDAO bardao=new barDAO();
        //调用bardao的select_all()方法把从数据库中读取所有的数据返回的是一个ArrayList，ArrayList里面放的是一个barBean
        ArrayList array = bardao.select_all();
        //设置返回时的编码格式
        response.setContentType("text/html; charset=utf-8");
        //调用JSONArray.fromObject方法把array中的对象转化为JSON格式的数组
        JSONArray json=JSONArray.fromObject(array);
        System.out.println(array.toString());
        //返回给前段页面
        PrintWriter out = response.getWriter();  
        out.println(json);  
        out.flush();  
        out.close();   
		
	}
}

最后是index.jsp代码编写，如下所示；

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%-- <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> --%>




    <%--  --%>
    
    
    

最后看一下，实际效果；

从图中我们可以看到，数据库中的数据已经全部，显示在折线图中，而且是实时显示的，当数据库中的数值发生变化时，图片也跟着一起变化。

这是效果图。