JSP+Java+Servlet+DM8+Echarts动态网页

简介

ECharts是一款基于JavaScript的数据可视化图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11、Chrome、360 浏览器、Firefox、Safari等），底层依赖轻量级的矢量图形库，提供直观、交互丰富，可高度个性化定制的数据可视化图表。

实际开发中使用，会要求从服务器端取数据进行动态显示，一般来说数据请求过程如下：

1.客户端通过ajax发送请求；

2.服务器端Servlet接收请求；

3.后端JAVA通过JDBC SQL获取数据库数据；

4.生成Json数据并返回给客户端；

5.客户端接收数据后，绘制图表显示。

注：需要源码的小伙伴，请私信发邮箱给我

现在以JSP+Java+Servlet+DM8+Echarts，实现动态网页

最终效果图

1、实践过程 1.1 前端JSP

客户端通过ajax发送请求，在jsp中先绘制一个最简单的Echarts图表，在option中的xAxis和yAxis里的data都是空值。

<%@ page language="java" import="java.util.Date,java.text.SimpleDateFormat" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>



    
    
    
    
    
    



    JSP+Java+Servlet+DM8+Echarts动态网页
    作者：qinyg
    时间：<%Date date=new Date(); %><% SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); %> <%=sdf.format(date) %>

1.2 服务器端Servlet

在web.xml中，配置映射关系

    TestServlet
    com.dm.servlet.TestServlet


    TestServlet
    /TestServlet

Servlet代码

package com.dm.service;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import com.dm.beans.Product;
import com.dm.jdbc.jdbcConn;

public class productService {
    private Connection daconnection;
    private Statement st;
    private ResultSet rs;
    private String sql;
    private List list;
    private Product pd;
    public List getProduct() {
        list = new ArrayList();
        daconnection= jdbcConn.getConnection();

        try {
            st=(Statement)daconnection.createStatement();
            sql="select GOODS_ID,GOODS_NAME,SALES_NUM from T_GOODS_SALES;";
            rs=st.executeQuery(sql);
            while(rs.next()) {
                pd = new Product();
                pd.setName(rs.getString("GOODS_NAME"));
                pd.setNum(rs.getInt("SALES_NUM"));
                list.add(pd);
                // System.out.println(rs.getString("GOODS_NAME"));
            }
            rs.close();
            st.close();
            daconnection.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return list;


    }
}

1.3连接数据库获取数据

JDBC连接类

package com.dm.jdbc;

import java.sql.*;
import java.text.SimpleDateFormat;
/*
建立数据库连接
*/
public class jdbcConn {
    //
    private static String cname = "dm.jdbc.driver.DmDriver";
    private static String url = "jdbc:dm://192.168.137.177:5236";
    private static String userid = "SYSDBA";
    private static String pwd = "SYSDBA";

    public static Connection con;
    public static PreparedStatement ps;
    public static ResultSet rs;
    public static Statement st;

    public static Connection getConnection(){
        try {
            SimpleDateFormat sdf= new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
            Class.forName(cname);
            //获取连接，通过驱动管理
            con = DriverManager.getConnection(url, userid, pwd);
            con.setAutoCommit(true);
            // System.out.println("[SUCCESS]conn database");

        } catch (Exception e) {
            e.printStackTrace();
        }
        return con;
    }

    public void disConn(Connection con) throws SQLException {
        if (con != null) {
            con.close();
        }
    }
}

实体类

package com.dm.beans;

public class Product {

    private String name;         // 类别名称
    private int num;            // 销量

//    public Product(String name, int num) {
//        this.name = name;
//        this.num = num;
//    }

    public String getName() {
        return name;
    }

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

    public int getNum() {
        return num;
    }

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

    @Override
    public String toString() {
        return "Product [name=" + name + ", num=" + num + "]";
    }
}

获取数据服务类

package com.dm.service;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import com.dm.beans.Product;
import com.dm.jdbc.jdbcConn;

public class productService {
    private Connection daconnection;
    private Statement st;
    private ResultSet rs;
    private String sql;
    private List list;
    private Product pd;
    public List getProduct() {
        list = new ArrayList();
        daconnection= jdbcConn.getConnection();

        try {
            st=(Statement)daconnection.createStatement();
            sql="select GOODS_ID,GOODS_NAME,SALES_NUM from T_GOODS_SALES;";
            rs=st.executeQuery(sql);
            while(rs.next()) {
                pd = new Product();
                pd.setName(rs.getString("GOODS_NAME"));
                pd.setNum(rs.getInt("SALES_NUM"));
                list.add(pd);
                // System.out.println(rs.getString("GOODS_NAME"));
            }
            rs.close();
            st.close();
            daconnection.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return list;


    }
}

更多资料，请查阅官方网站：https://eco.dameng.com