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<Bar> barArr = new ArrayList<Bar>();
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
<servlet>
<servlet-name>barService</servlet-name>
<servlet-class>com.lgw.servlet.BarService</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>barService</servlet-name>
<url-pattern>/bar.do</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>jsoService</servlet-name>
<servlet-class>com.lgw.servlet.JsoService</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>jsoService</servlet-name>
<url-pattern>/jso.do</url-pattern>
</servlet-mapping>
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 + "/";
%>
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello ECharts</title>
<!-- 使用单文件引入的方式使用ECharts.JS -->
<script src="echarts-all.js"></script>
<script src="jquery.js"></script>
</head>
<body "loadData()">
<div id="content" style="margin:40px auto;width:1300px;height:400px">
<div id="myBarDiv" style="height: 300px; width: 430px;display:inline-block" ></div>
<div id="myLineDiv" style="height: 300px; width: 430px;display:inline-block" ></div>
<div id="myPieDiv" style="height: 300px; width: 430px;display:inline-block" ></div>
<div id="myTest" style="width: 600px; height: 60px;margin:20px auto">
<label for="name">商品名称:</label> <input type="text" id="myName">
<label for="num">销量:</label> <input type="num" id="myNum">
<button id="myButton" type="submit" onClick="sub()">数据更新</button>
</div>
</div>
<script type="text/javascript">
function sub(){
var j = {"name":$("#myName").val(),"num":$("#myNum").val()};
$.ajax({
type: 'post',
url: 'jso.do',
dataType: 'json',
data: {"name":$("#myName").val(),"num":$("#myNum").val()},
contentType: "application/x-www-form-urlencoded" ,
success: function (message) {
alert("success");
}
});
window.location.reload();
}
</script>
<script type="text/javascript">
<!--这个是柱状图-->
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()
var myChart = echarts.init(document.getElementById('myBarDiv'));
var option = {
title: {
text: 'ECharts技术(柱状图)'
},
tooltip : {
show : true
},
legend : {
data : [ '销量' ]
},
xAxis : [ {
type : 'category'
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
name : '销量',
type : 'bar'
} ]
};
//加载数据到option
loadData(option);
//设置option
myChart.setOption(option);
</script>
<script type="text/javascript">
<!--这个是折现图-->
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()
var myChart = echarts.init(document.getElementById('myLineDiv'));
var option = {
title: {
text: 'ECharts技术(折线图)'
},
tooltip : {
show : true
},
legend : {
data : [ '销量' ]
},
xAxis : [ {
type : 'category'
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
name : '销量',
type : 'line'
} ]
};
//加载数据到option
loadData(option);
//设置option
myChart.setOption(option);
</script>
<!--这个是饼图-->
<script type="text/javascript">
function loadData() {
$.ajax({
type : 'post', //传输类型
async : false, //同步执行
url : 'bar.do', //web.xml中注册的Servlet的url-pattern
data : {},
dataType : 'json', //返回数据形式为json
success : function(result) {
if (result) {
var myChart = echarts.init(document
.getElementById('myPieDiv'));
var option = {
title: {
text: 'ECharts技术(饼图)'
},
series : [ {
name : '商品名称',
type : 'pie',
radius : '65%',
data : [ {
value : result[0].num,
name : 'pants'
}, {
value : result[1].num,
name : 'skirt'
}, {
value : result[2].num,
name : 'coat'
}, {
value : result[3].num,
name : 'shoes'
} ]
} ]
};
myChart.setOption(option);
}
},
error : function(errorMsg) {
alert("加载数据失败");
}
});//AJAX
}//loadData()
</script>
</script>
</body>
</html>
8.资源下载
####上传了CSDN，去吧，皮卡丘。
####http://download.csdn.net/download/wszll_alex/9897840
9.冷笑话
####皮卡丘站起来是什么？
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
