JavaScript+Echarts:图表库直观展示报表数据
程序员文章站
2022-06-07 20:08:32
...
Echarts,是一个纯 Javascript 的图表库,可以流畅的运行在 PC端。兼容当前绝大部分浏览器(IE8/9/10/11,Microsoft,Google,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 、类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
导入依赖文件:
echarts.common.min.js
jquery.min.js
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="echarts.common.min.js"></script>
</head>
<body>
<div align="center">
<div id="main" style="width: 600px; height: 400px;"></div>
</div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
myChart.setOption({
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
title : {
text : '神君九月销量报表'
},
tooltip : {},
legend : {
data : ['销量']
},
xAxis : {
data : []
},
yAxis : {
},
series : [ {
name : '销量',
type : 'bar',
data : []
} ]
});
</script>
<script type="text/javascript">
$(function() {
$.post(
'bar.do',
function(result){
myChart.setOption( {
xAxis : {
data :result.name
},
series : {
data :result.value
}
});
},'json'
)
})
</script>
</body>
</html>
以上是HTML页面的显示代码,数据通过后端传递。
$.post:Ajax,异步拿取数据。
$(function() ):jQuery框架,封装了JavaScript。
package com.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSONObject;//导入阿里巴巴的json包
import com.alibaba.fastjson.JSONArray;
import com.dao.DataDao;
import com.dao.User;
public class bar extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
JSONObject obj=new JSONObject();
JSONArray values=new JSONArray();
JSONArray names=new JSONArray();
List<User> list=DataDao.queryAllUser();
for (int i = 0; i <8; i++) {
values.add(list.get(i).getUmoney());
names.add(list.get(i).getUname());
}
// for (User user : list) {
// values.add(user.getUmoney());
// names.add(user.getUname());
// }
// int[] in={11, -2, 93, 13, 35, 26,47};
// String[] str={"³ÄÉÀ", "ÑòëÉÀ", "Ñ©·ÄÉÀ", "¿ã×Ó", "¸ß¸úЬ", "Íà×Ó", "´óÒÂ"};
// for(int i=0;i<in.length;i++){
// values.add(in[i]);
// names.add(str[i]);
// }
obj.put("value",values);
obj.put("name",names);
resp.setContentType("text/plain;charset=utf-8");
PrintWriter out=resp.getWriter();
out.print(obj);
}
}
//将数据转为一定格式,符合echarts的数据格式要求。
将从数据库查出来的数据通过json封装,由Ajax转发到页面。
package com.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
public class DataDao {
public static List<User> queryAllUser() {
List<User> list = new ArrayList<User>();
Connection con = BaseDao.getCon();
PreparedStatement pre = null;
ResultSet res = null;
try {
pre = con.prepareStatement("select sal,ename from emp");
res = pre.executeQuery();
while (res.next()) {
User h = new User();
h.setUmoney(res.getInt(1));
h.setUname(res.getString(2));
list.add(h);
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally {
BaseDao.closeAll(res, pre, con);
}
return list;
}
}
从数据库把数据查出来,以后,可能会进行数据方面的统计。
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<welcome-file-list>
<welcome-file>bar.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>bar</servlet-name>
<servlet-class>com.servlet.bar</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>bar</servlet-name>
<url-pattern>/bar.do</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>pie</servlet-name>
<servlet-class>com.servlet.PieDo</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>pie</servlet-name>
<url-pattern>/pie.do</url-pattern>
</servlet-mapping>
</web-app>
以上是web.xml的配置,也就是
servlet路径的相关配置。
这样就实现了echarts的bar报表动态加载数据!
对于某些财务方面的业务具有重要价值!