简介
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;
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
