注意:
(1)由于使用到josn数据的格式,所以需要用到josn的依赖jar包。我使用的是tomcat8,所以我分享也是在tomcat下使用的jar,下面是我分享的链接:
链接:https://pan.baidu.com/s/1aP_PYilLajBiyGWQzHy3yg
提取码:cux6
(2)对于echarts和jquery我就不分享了,那个官网很好下载。
了解echarts
之前就想做数据展示,自己准备学习python数据可视化操作。准备研究数据展示了,从图书馆将python数据可视化都借回来了。但突然有人找我用javaweb做数据可视化,但是说实话自己当时真的不会。但是听说有人指导,重要是我的javaweb老师也参与。我就在不会的状态下,接活了。就这样自己上网查资料,看到好多人都说echarts,自己就到官网学习去了。
了解js
了解了echarts之后,发现前段的js用到的太多。如果自己不会的话,好像echarts就很难做下去。所以就找资料学习js,过程中我找老师请教有没有好的js的资源。咨询后我就开始学习js,老师推介的资源就是廖雪峰的官网,上去一看,不错,我就跟上廖雪峰学习js。
说实话我没有按部就班的一步一步的学,也就是说没有把基础学好我就开始做echats。但是你会发现好多都看不懂,我就一步一步看,看一次再看一次。但是效果不是很好。我学习javaweb了解到ajax,也学习了一部分ajax。就在这时我的老师给我说了我要学习的地方。ajax、josn和jquery,说实话我听到这些还是有点懵的,除了ajax了解,其余的都不了解。就这样我找javaweb的书学习,学习josn等。学习之后发现,josn很重要,在处理数据交换的时候。上面就是我总体学习加载数据的过程,因为自己是小白,所以学习的路程比较漫长。
总体介绍echarts异步加载数据的思路
重点来了。
(1)连接数据库
(2)从数据库获取自己的数据
(3)将数据转化成josn
(4)建立servert,将josn数据发送到前段
(5)建立echarts图表,利用ajax触发servert获取josn数据,同时前段解析josn数据,最后实现数据的异步加载。
下面附我的代码
(1)数据库连接
package com.hotel.util;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class DBUtil {
/**
* 连接数据库的操作,用户名,密码,使用jdbc连接
*/
public static String username = "root";
public static String password = "root";
public static String url = "jdbc:mysql://localhost:3306/hotel";
static{
try {
Class.forName("com.mysql.jdbc.Driver");
} catch(ClassNotFoundException e){
e.printStackTrace();
}
}
public static Connection getConnectDb(){
Connection conn = null;
try{
conn = DriverManager.getConnection(url,username,password);
} catch (SQLException e){
e.printStackTrace();
}
return conn;
}
public static void CloseDB(ResultSet rs, PreparedStatement stm, Connection conn){
if(rs!=null)
{
try {
rs.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
if(stm!=null)
{
try {
stm.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
if(conn!=null)
{
try {
conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}
(2)获取数据dao
public JSONObject getjosn() {
JSONObject jsonData = new JSONObject();
Connection conn=null;
PreparedStatement ps =null;
ResultSet res=null;
try {
JSONObject array = new JSONObject();
conn=dbutil.getConnectDb();
String sql="select * from average";
ps=conn.prepareStatement(sql);
res=ps.executeQuery();
int i=0;
List listscore=new ArrayList();
List listcname=new ArrayList();
int score[]=new int[255];
String cname[]=new String[255];
while(res.next()){
score[i]=res.getInt("score");
System.out.println(score[i]);
cname[i]=res.getString("cname");
System.out.println(cname[i]);
listcname.add(cname[i]);
listscore.add(score[i]);
i++;
}
jsonData.put("cname", listcname);
jsonData.put("score", listscore);
}
catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return jsonData;
}
}
(3)servert
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
JSONObject array = new JSONObject();
ways way =new ways();
array=way.getjosn();
System.out.println(array.toString());
PrintWriter out=response.getWriter();
out.println(array);
}
(4)前段代码
<%@ page language="java" 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>Insert title here</title>
<script type="text/javascript" src="static/echarts.min.js"></script>
<script type="text/javascript" src="static/jquery.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: '各科平均成绩'
},
tooltip: {},
legend: {
data:['数据']
},
xAxis: {
data: []
},
yAxis: {
//type:"value"
},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
// 使用刚指定的配置项和数据显示图表。
myChart.showLoading();
$.get('/echarts/dataServert').done(function(data) {//jQuery触发ajax 从后台异步获取数据
var str = eval('(' + data + ')'); //解析json
alert("test");
// System.out.print("str.cname");
myChart.hideLoading();
// 填入数据
myChart.setOption({
xAxis : {
data : str.cname,
"axisLabel":
{interval: 0}
},
series : [ {
// 根据名字对应到相应的系列
name : '人物信息',
type : 'bar',
data : str.score
} ]
});
});
</script>
</body>
</html>
更详细的echarts写作思路看下面的博文:
echarts详细实现步骤