网页和数据库连接可以实现实时出图,出图的方式有两种,第一种,数据单独写在网页里面,不用,不用连接数据库,这个方法比较简单,首先引入echarts.js,后面引入到到网页上,下面是实际代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="js/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
生成的折线图如下所示:
这是第一种方法,数据不用从数据库读取。
下面是第二种方法:从数据库读取数据,实时出图。
首先,在数据库中建立一张数据表,如下所示:
这是我的数据表。
第二步,开始连接数据库。
写一个连接数据库的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<barBean> 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+"/";
%> --%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%-- <base href="<%=basePath%>"> --%>
<title>ECharts</title>
<script src="js/esl.js"></script>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div id="main" style="height:400px"></div>
<script type="text/javascript">
// 路径配置
require.config({
paths:{
'echarts' : 'js/echarts',
'echarts/chart/bar' : 'js/echarts'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/line' // 使用柱状图就加载bar模块,按需加载
],
drewEcharts
);
function drewEcharts(ec) {
// 基于准备好的dom,初始化echarts图表
myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"line",
}
]
};
//加载数据
loadDATA(option);
// 为echarts对象加载数据
myChart.setOption(option);
}
function loadDATA(option){
$.ajax({
type : "post",
async : false, //同步执行
url : "bar.do",
data : {},
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
//初始化option.xAxis[0]中的data
option.xAxis[0].data=[];
for(var i=0;i<result.length;i++){
option.xAxis[0].data.push(result[i].name);
}
//初始化option.series[0]中的data
option.series[0].data=[];
for(var i=0;i<result.length;i++){
option.series[0].data.push(result[i].num);
}
}
}
});
}
</script>
</body>
</html>
最后看一下,实际效果;
从图中我们可以看到,数据库中的数据已经全部,显示在折线图中,而且是实时显示的,当数据库中的数值发生变化时,图片也跟着一起变化。
这是效果图。