注意：
（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详细实现步骤
