一、先在mysql建一张表(goods)如下:
二、工程的目录结构为:
三、具体的代码:
配置文件:别忘记改成自己相应的配置
<?xml version="1.0" encoding="UTF-8"?>
<c3p0-config>
<default-config>
<property name="driverClass">com.mysql.jdbc.Driver</property>
<property name="jdbcUrl">jdbc:mysql://localhost:3306/数据库名</property>
<property name="user">用户名</property>
<property name="password">密码</property>
<property name="acquireIncrement">5</property>
<property name="initialPoolSize">10</property>
<property name="minPoolSize">5</property>
<property name="maxPoolSize">30</property>
</default-config>
</c3p0-config>
bean类:
public class Goods {
private int id;
private String name;
private double price;
private int sales;
private int stock;
private String detail;
public Goods() {
}
public Goods(String name, double price, int sales, int stock, String detail) {
this.name = name;
this.price = price;
this.sales = sales;
this.stock = stock;
this.detail = detail;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
public int getSales() {
return sales;
}
public void setSales(int sales) {
this.sales = sales;
}
public int getStock() {
return stock;
}
public void setStock(int stock) {
this.stock = stock;
}
public String getDetail() {
return detail;
}
public void setDetail(String detail) {
this.detail = detail;
}
@Override
public String toString() {
return "Goods{" +
"id=" + id +
", name='" + name + '\'' +
", price=" + price +
", sales=" + sales +
", stock=" + stock +
", detail='" + detail + '\'' +
'}';
}
}
dao层:
public interface GoodsDao {
List<Goods> queryAllGoods() throws SQLException;
}
daoimp:
public class GoodsDaoimp implements GoodsDao{
DataSource dataSource = ReadDataSource.getDataSource();
@Override
public List<Goods> queryAllGoods() throws SQLException {
QueryRunner queryRunner = new QueryRunner(dataSource);
String sql = "select * from goods";
return queryRunner.query(sql, new BeanListHandler<>(Goods.class));
}
}
测试类:
public class Test {
public static void main(String[] args) throws SQLException {
GoodsDao goodsDao = new GoodsDaoimp();
List<Goods> goods = goodsDao.queryAllGoods();
for (Goods good : goods) {
System.out.println(good);
}
}
}
测试结果:
到echarts官网下载echarts.js导入到webapp下的a目录下
servlet:别忘记改成对应的jsp
@WebServlet(name = "ServletQueryAllGoods", value = "/ServletQueryAllGoods")
public class ServletQueryAllGoods extends javax.servlet.http.HttpServlet {
protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
doGet(request,response);
}
protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
GoodsDao goodsDao = new GoodsDaoimp();
List<Goods> goodsList;
try {
goodsList = goodsDao.queryAllGoods();
request.setAttribute("goodsList", goodsList);
request.getRequestDispatcher("/zhe.jsp").forward(request, response);
} catch (SQLException e) {
e.printStackTrace();
}
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
</web-app>
index.jsp
<html>
<body>
<a href="ServletQueryAllGoods">Go</a>
</body>
</html>
zhe.jsp
<%--
Created by IntelliJ IDEA.
User: hzx
Date: 2018/9/13
Time: 18:00
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>ECharts</title>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="${pageContext.request.contextPath}/a/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 sale = new Array;
var index = 0;
<c:forEach items="${goodsList}" var="goods">
sale[index++] = ${goods.sales};
</c:forEach>
option = {
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
}
},
title: {
left: 'center',
text: '超市商品销量图',
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [
<c:forEach items="${goodsList}" var="g">
["${g.name}"],
</c:forEach>
]
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
dataZoom: [{
type: 'inside',
start: 0,
end: 10
}, {
start: 0,
end: 10,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
series: [
{
name:'商品销量',
type:'line',
smooth:true,
symbol: 'none',
sampling: 'average',
itemStyle: {
normal: {
color: 'rgb(255, 70, 131)'
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 158, 68)'
}, {
offset: 1,
color: 'rgb(255, 70, 131)'
}])
}
},
data: sale
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
柱状图:zhu.jsp
<%--
Created by IntelliJ IDEA.
User: hzx
Date: 2018/9/13
Time: 17:16
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>ECharts</title>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="${pageContext.request.contextPath}/a/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 arr = new Array();
var index = 0;
<c:forEach items="${goodsList}" var="goods">
arr[index++] = ${goods.sales};
</c:forEach>
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : [
<c:forEach items="${goodsList}" var="g">
["${g.name}"],
</c:forEach>
]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'销量',
type:'bar',
data: arr
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
饼状图:bing.jsp
<%--
Created by IntelliJ IDEA.
User: hzx
Date: 2018/9/13
Time: 18:02
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>ECharts</title>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="${pageContext.request.contextPath}/a/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'));
// 指定图表的配置项和数据
option = {
title : {
text: '超市商品销售统计',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: [
<c:forEach items="${goodsList}" var="g">
["${g.name}"],
</c:forEach>
]
},
series : [
{
name: '销售数量',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
<c:forEach items="${goodsList}" var="goods">
{value:"${goods.sales}", name:"${goods.name}"},
</c:forEach>
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
最终效果图: