Echarts3.0+JavaWeb+Mysql实现饼图，折线图，柱状图
Echarts3.0+Java+Mysql实现饼图，折线图，柱状图
###写在前面：
####入职第二周，老大布置的新技术探究——Echarts。主要对Echarts3.0的基本图表进行实现，即饼图，折线图，柱状图。 需求是：从数据库读取数据显示在前台，图表可根据数据库数据实时更新。 接到任务后一脸懵逼，立下军令状三天搞定。 本文实现是在参考http://blog.csdn.net/tgcxmxyz1011/article/details/53352956和Echarts官网http://echarts.baidu.com/的基础上，对折线图，饼图进行实现。 本文主要使用Ajax来异步加载数据，数据以Json格式进行传输。以下为实现页面。
###目录：
####- 1.创建数据表
####- 2.建立Java Web Project
####- 3.创建Bean对象
####- 4.创建DAO
####- 5.创建Servlet对象
####- 6.配置web.xml
####- 7.编写JSP前台并简单配置ECharts
####- 8.项目代码下载
1.创建数据表
####首先创建表bar,插入数据。代码如下：
use test;
create table bar(name varchar(50),num int);
insert into bar values("pants",50);
insert into bar values("skirt",65);
insert into bar values("coat",50);
insert into bar values("shoes",99);
2.建立Java Web Project
####新建项目Dynamic Web Project，命名为echarts_demo，其他的默认即可。
3.创建Bean对象
####在src目录下新建包com.lgw.bean，并创建对象Bar，代码如下：
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;
}
}
4.创建DAO
####本例使用的是最原始也是最简单的JDBC的方式连接MySQL数据库，也是为了更专注于交互实现。在src目录下新建包，并创建对象BarDao，代码如下：
public class BarDao {
public String query() {
ArrayList barArr = new ArrayList();
try {
//JDBC方式连接MySQL数据库
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/test?characterEncoding=utf8", "root", "123456");
PreparedStatement stmt = conn.prepareStatement("SELECT * FROM bar");
ResultSet rs = stmt.executeQuery();
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();
}
Gson gson =new Gson();
String str=gson.toJson(barArr);
return str;
}
public void update(String name,Integer num) {
try {
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/test?characterEncoding=utf8", "root", "123456");
PreparedStatement stmt = conn.prepareStatement("update bar set num='"+num+"' where name='"+name+"'");
stmt.executeUpdate();
conn.close();
} catch (SQLException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
}
5.创建Servlet对象，实现服务器后台向前台JSP响应数据
####在src目录下新建包，并创建对象BarService,JsoService，代码如下：
public class BarService extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
//创建DAO
BarDao barDao = new BarDao();
//从数据库里取数据
String barArr = barDao.query();
//设置服务器响应时向JSP表示层传输数据的编码格式
resp.setContentType("text/html; charset=utf-8");
//ArrayList对象转化为JSON对象
JSONArray json = JSONArray.fromObject(barArr);
//控制台显示JSON
System.out.println(json.toString());
//返回到JSP
PrintWriter writer = resp.getWriter();
writer.println(json);
writer.flush();
//关闭输出流
writer.close();
}
}
public class JsoService extends HttpServlet{
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String name=req.getParameter("name");
String num=req.getParameter("num");
BarDao bDao=new BarDao();
bDao.update(name, Integer.parseInt(num));
}
###6.配置web.xml
barService
com.lgw.servlet.BarService
barService
/bar.do
jsoService
com.lgw.servlet.JsoService
jsoService
/jso.do
7.编写JSP前台并简单配置ECharts
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
Hello ECharts