JavaWeb ECharts数据分析图

1.创建对象
package com.rui.bean;
public class Bar {
private Stringname; //服装名称
private int num;//对应件数
public StringgetName() {
return name;
}
public voidsetName(String name) {
this.name = name;
}
public intgetNum() {
return num;
}
public voidsetNum(int num) {
this.num = num;
}
}
2.创建DAO
public classBarDao {
publicArrayList<Bar> query() {
ArrayList<Bar> barArr = newArrayList<Bar>();
try {
//JDBC方式连接MySQL数据库
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection( "jdbc:mysql://localhost:3306/test?characterEncoding);
PreparedStatement stmt= conn.prepareStatement("SELECT * FROM bar");
ResultSet rs =stmt.executeQuery();
//将test表中的数据存储到线性表中
while(rs.next()) {
Bar bar = newBar();
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;
}
}
3.创建Servlet对象，实现服务器后台向前台JSP响应数据
public class BarService extends HttpServlet{
@Override
protected void doPost(HttpServletRequestreq, HttpServletResponse resp)throws ServletException, IOException {
//创建DAO
BarDaobarDao = new BarDao();
//从数据库里取数据
ArrayList<Bar>barArr = barDao.query();
//设置服务器响应时向JSP表示层传输数据的编码格式
resp.setContentType("text/html;charset=utf-8");
//ArrayList对象转化为JSON对象
JSONArrayjson = JSONArray.fromObject(barArr);
//控制台显示JSON
System.out.println(json.toString());
//返回到JSP
PrintWriterwriter = resp.getWriter();
writer.println(json);
writer.flush();
//关闭输出流
writer.close();
}
}
4.配置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>
5.编写JSP前台并配置ECharts
Js插件
<scriptsrc="echarts-all.js"></script>
<scriptsrc="jquery.js"></script>
<!-- DOM用来设置展示ECharts图表的区域 -->
<divid="myDiv" style="height: 400px"></div>
<scripttype="text/javascript">
functionloadData(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("加载数据失败");
}
});
}
//loadData()
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);
</script>
效果图