从Echarts官网文档教程上可以找到一个最简单的Echarts图表：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="echarts/echarts.common.min.js"></script>
<title>Holle Echarts!</title>
</head>
<body>
<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: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
上述代码中的xAxis中的 data: [“衬衫”,“羊毛衫”,“雪纺衫”,“裤子”,“高跟鞋”,“袜子”]和series中的data: [5, 20, 36, 10, 10, 20]都是给定的，那么如何从读取数据库中的数据呢，下面我们将修改这俩个地方，并采用AJAX发送post请求。
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello ECharts</title>
<script src="echarts/echarts.common.min.js"></script>
<script src="echarts/jquery-3.2.1.js"></script>
</head>
<body>
<h2>Hello Echarts!</h2>
<div id="myDiv" style="height: 400px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('myDiv'));
var option = {
tooltip : {
show : true
},
legend : {
data : [ '销量' ]
},
xAxis : [ {
type : 'category'
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
name : '销量',
type : 'bar'
} ]
};
//加载数据到option
loadData(option);
//设置option
myChart.setOption(option);
function loadData(option) {
$.ajax({
type : 'post', //传输类型
async : false, //同步执行
url : 'bar.do', //web.xml中注册的Servlet的url-pattern
data : {},
dataType : 'json', //返回数据形式为json
success : function(result) {
if (result) {
//初始化xAxis[0]的data
option.xAxis[0].data = [];
for (var i=0; i<result.length; i++) {
option.xAxis[0].data.push(result[i].name);
}
//初始化series[0]的data
option.series[0].data = [];
for (var i=0; i<result.length; i++) {
option.series[0].data.push(result[i].num);
}
}
},
error : function(errorMsg) {
alert("加载数据失败");
}
});//AJAX
}//loadData()
</script>
</body>
</html>
下一步我们在web.xml中配置以下映射：
<servlet>
<servlet-name>barService</servlet-name>
<servlet-class>com.servlet.BarService</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>barService</servlet-name>
<url-pattern>/bar.do</url-pattern>
</servlet-mapping>
这样，通过bar.do就会找到com.servlet这个包下面的BarService.这个servlet的主要作用是向数据库读取数据并返回给前段页面，下面是这个里面的代码：
package com.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 com.bean.Bar;
import com.dao.BarDao;
import net.sf.json.JSONArray;
public class BarService extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//创建DAO
BarDao barDao = new BarDao();
//从数据库里取数据
ArrayList<Bar> barArr = barDao.query();
//设置服务器响应时向JSP表示层传输数据的编码格式
resp.setContentType("text/html; charset=utf-8");
//ArrayList对象转化为JSON对象
JSONArray json = JSONArray.fromObject(barArr);
//控制台显示JSON
System.out.println("------------------------");
System.out.println(json.toString());
//返回到JSP
PrintWriter writer = resp.getWriter();
writer.println(json);
writer.flush();
//关闭输出流
writer.close();
}
这里我用的是局部数据源去链接，当然也可以使用最基本的JDBC去连接。(提示一点，数据库要连你自己建的数据库，数据库账号，密码也要根据你的改，查询数据从你建的那个表名查。）
package com.dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import com.bean.Bar;
public class BarDao {
public ArrayList<Bar> query() {
ArrayList<Bar> barArr = new ArrayList<Bar>();
try {
//JDBC方式连接MySQL数据库
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/echarts?characterEncoding=utf8", "root", "123");
PreparedStatement stmt = conn.prepareStatement("SELECT * FROM bar");
ResultSet rs = stmt.executeQuery();
//将test表中的数据存储到线性表中
while(rs.next()) {
Bar bar = new Bar();
bar.setName(rs.getString("name"));
bar.setNum(rs.getInt("num"));
barArr.add(bar);
}
//关闭连接
conn.close();
} catch (SQLException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
return barArr;
}
}
com.bean的代码：
package com.bean;
public class Bar {
private String name; //名称
private int 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;
}
}
数据库的bar表格式如下图：
4.前段的页面在确认ajax请求success以后，读取返回后的数组的内容。就可以显示了。
特别强调一点：jar包问题！
一个是echarts.common.min.js包和jquery-3.2.1.js导入，还有就是使用JSON时必要的jar包：（若根据上述代码出现无法显示数据，则90%可能因为缺少以下jar）
ezmorph-1.0.6.jar
commons-lang 2.4.jar
commons-beanutils 1.7.0.jar
commons-collections 3.2.jar
commons-logging 1.1.1 .jar
如有需要，去另一个我的文章中免费下载：
https://blog.csdn.net/weixin_43687961/article/details/84760848
212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
