devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JAVA+Echarts封装DM8数据库实现动态大屏_java大屏数据动态展示

作者：我家自动化 | 2024-07-15 08:37:50

赞

踩

java大屏数据动态展示

简介

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

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

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

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

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

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

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

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

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

最终效果图（注：目前已使用ajax实现，无闪屏动态局部刷新图表数据）

 注：仅提供部分代码

准备数据

-- 商品销量

CREATE TABLE T_GOODS_SALES(

GOODS_ID VARCHAR2(30) NOT NULL,

GOODS_NAME VARCHAR2(50),

SALES_NUM INT);

COMMENT ON TABLE T_GOODS_SALES IS '商品销量';

COMMENT ON COLUMN T_GOODS_SALES.GOODS_ID IS '商品ID';

COMMENT ON COLUMN T_GOODS_SALES.GOODS_NAME IS '商品名称';

COMMENT ON COLUMN T_GOODS_SALES.SALES_NUM IS '销量';

INSERT INTO SYSDBA.T_GOODS_SALES (GOODS_ID, GOODS_NAME, SALES_NUM) VALUES('1', '短袖', 25);

INSERT INTO SYSDBA.T_GOODS_SALES (GOODS_ID, GOODS_NAME, SALES_NUM) VALUES('2', '牛仔裤', 28);

INSERT INTO SYSDBA.T_GOODS_SALES (GOODS_ID, GOODS_NAME, SALES_NUM) VALUES('3', '羽绒服', 28);

INSERT INTO SYSDBA.T_GOODS_SALES (GOODS_ID, GOODS_NAME, SALES_NUM) VALUES('4', '雕牌大衣', 23);

INSERT INTO SYSDBA.T_GOODS_SALES (GOODS_ID, GOODS_NAME, SALES_NUM) VALUES('5', '休闲裤', 31);

INSERT INTO SYSDBA.T_GOODS_SALES (GOODS_ID, GOODS_NAME, SALES_NUM) VALUES('6', '西装', 28);

INSERT INTO SYSDBA.T_GOODS_SALES (GOODS_ID, GOODS_NAME, SALES_NUM) VALUES('7', '中山装', 26);

--汽车销量

CREATE TABLE SYSDBA.T_CAR_SALES(

CAR_ID VARCHAR2(30),

CAR_NAME VARCHAR2(50),

SALES_NUM INT);

COMMENT ON TABLE T_GOODS_SALES IS '汽车销量';

COMMENT ON COLUMN T_GOODS_SALES.GOODS_ID IS '汽车ID';

COMMENT ON COLUMN T_GOODS_SALES.GOODS_NAME IS '汽车名称';

COMMENT ON COLUMN T_GOODS_SALES.SALES_NUM IS '销量';

INSERT INTO SYSDBA.T_CAR_SALES (CAR_ID, CAR_NAME, SALES_NUM) VALUES('1', '宝马X7', 79);

INSERT INTO SYSDBA.T_CAR_SALES (CAR_ID, CAR_NAME, SALES_NUM) VALUES('2', '奥迪Q7', 90);

INSERT INTO SYSDBA.T_CAR_SALES (CAR_ID, CAR_NAME, SALES_NUM) VALUES('3', '奔驰A8', 78);

INSERT INTO SYSDBA.T_CAR_SALES (CAR_ID, CAR_NAME, SALES_NUM) VALUES('4', '保时捷911', 39);

INSERT INTO SYSDBA.T_CAR_SALES (CAR_ID, CAR_NAME, SALES_NUM) VALUES('5', '宾利欧陆', 66);

INSERT INTO SYSDBA.T_CAR_SALES (CAR_ID, CAR_NAME, SALES_NUM) VALUES('6', '三菱EVO', 107);

INSERT INTO SYSDBA.T_CAR_SALES (CAR_ID, CAR_NAME, SALES_NUM) VALUES('7', '法拉利488', 51);

INSERT INTO SYSDBA.T_CAR_SALES (CAR_ID, CAR_NAME, SALES_NUM) VALUES('8', '布加迪威龙', 91);

INSERT INTO SYSDBA.T_CAR_SALES (CAR_ID, CAR_NAME, SALES_NUM) VALUES('9', '五菱宏光PLUS', 85);

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"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>echarts绘制图表</title>
    <!-- 1.引入 echarts.js -->
    <script type="text/javascript" src="static/echarts.min.js"></script>
    <!-- 引入jquery.js -->
    <script type="text/javascript" src="static/jquery.min.js"></script>
</head>
<body style="margin: 5% 26% 0% 29%;background: url(images/pic_1.jpg);background-size:100% 100% ; background-attachment: fixed;">
<div style="height: 150px;">
    <h2>JSP+Java+Servlet+DM8+Echarts动态网页</h2>
    <h3>作者：qinyg</h3>
    <h3>时间：<%Date date=new Date(); %><% SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); %> <%=sdf.format(date) %></h3>
</div>
<!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px; height: 400px;"></div>


<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    //3.初始化，默认显示标题，图例和xy空坐标轴
    myChart.setOption({

        title : {
            text : 'ajax动态获取数据'
        },
        tooltip : {},

        legend : {

            data : [ '销售量' ]
        },
        xAxis : {
            data : []
        },
        yAxis : {},
        series : [ {
            name : '销售量',
            type : 'bar',
            data : []
        } ]
    });

    //4.设置加载动画(非必须)
    myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

    //5.定义数据存放数组(动态变)
    var names = []; //建立一个类别数组（实际用来盛放X轴坐标值）
    var nums = []; //建立一个销量数组（实际用来盛放Y坐标值）

    //6.ajax发起数据请求
    $.ajax({
        type : "post",
        async : true, //异步请求（同步请求将会锁住浏览器，其他操作须等请求完成才可执行）
        url : "TestServlet", //请求发送到TestServlet
        data : {},
        dataType : "json", //返回数据形式为json

        //7.请求成功后接收数据name+num两组数据
        success : function(result) {
            //result为服务器返回的json对象
            if (result) {
                //8.取出数据存入数组
                for (var i = 0; i < result.length; i++) {
                    names.push(result[i].name); //迭代取出类别数据并填入类别数组
                }
                for (var i = 0; i < result.length; i++) {
                    nums.push(result[i].num); //迭代取出销量并填入销量数组
                }

                myChart.hideLoading(); //隐藏加载动画

                //9.覆盖操作-根据数据加载数据图表
                myChart.setOption({
                    xAxis : {
                        data : names
                    },
                    series : [ {
                        // 根据名字对应到相应的数据
                        name : '销量',
                        data : nums
                    } ]
                });

            }

        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    })
</script>
</body>
</html>

1.2 服务器端Servlet

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

<servlet>
    <servlet-name>TestServlet</servlet-name>
    <servlet-class>com.dm.servlet.TestServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>TestServlet</servlet-name>
    <url-pattern>/TestServlet</url-pattern>
</servlet-mapping>

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/828497
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号