最近无聊研究了很久之前没有搞明白的可视化插件Echarts，从网上搜了一下官网包括大部分博客说的都是写死的数据，很少有能连接数据库的。因此，想把自己的学习经验分享出来。把完整代码发到CSDN下载里面去了，吐槽一下，CSDN自己设定了积分，为了没有积分的小伙伴们，我把代码详细在这里分解一下。
首先下载好相关插件和jar包，需要注意的一点儿是jar包不能少，刚开始时候只导入了js文件一直显示不出来图表，后来查了才知道是jar包少了。
项目采用java+servlet+mysql的路线，开发环境是myeclipse，项目文档结构和数据表bar如下：
（1）连接数据库
import java.sql.Connection;
import java.sql.DriverManager;
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/echarts";
try {
conn = DriverManager.getConnection(url, "root", "root");
}catch (Exception e) {
throw new RuntimeException(e);
}
return conn;
}
}（2）实体类
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;
}（3）方法类
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
public class barDAO {
public ArrayList<barBean> select_all()
{
Connection conn = null;
Statement stmt=null;
ResultSet rst = null;
try{
conn = DBUtil.getConnection();
stmt = conn.createStatement();
String sql = "select * from bar";
rst = stmt.executeQuery(sql);
ArrayList<barBean> array = new ArrayList<barBean>();
while(rst.next())
{
barBean bar = new barBean();
bar.setName(rst.getString("name"));
bar.setNum(rst.getInt("num"));
array.add(bar);
}
stmt.close();
rst.close();
return array;
}catch(SQLException e){
System.out.println("Error");
return new ArrayList<barBean>();
}
}
}（4）Servlet
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 barServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
barDAO bardao=new barDAO();
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();
}
}（5）html页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<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/bar'
],
drewEcharts
);
function drewEcharts(ec) {
myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
}
]
};
loadDATA(option);
myChart.setOption(option);
}
function loadDATA(option){
$.ajax({
type : "post",
async : false,
url : "bar.do",
data : {},
dataType : "json",
success : function(result) {
if (result) {
option.xAxis[0].data=[];
for(var i=0;i<result.length;i++){
option.xAxis[0].data.push(result[i].name);
}
option.series[0].data=[];
for(var i=0;i<result.length;i++){
option.series[0].data.push(result[i].num);
}
}
}
});
}
</script>
</body>
</html>
（6）配置web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name></display-name>
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>barServlet</servlet-name>
<servlet-class>barServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>barServlet</servlet-name>
<url-pattern>/bar.do</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>至此所有代码结束，运行结果如下图
如果看到这里还是不能实现的话，那就去下载我上传的完整代码吧，下载链接：https://download.csdn.net/download/dengtodeng/10942945
3万+
