上次我们的爬虫已经完成了 接下来呢 就是我们的报表。
我们用的是网页形式来展示，所以呢我们需要搭建一个本地的服务器。我们使用的是tomcat
1，下载与安装tomacat
下载下来解压即可
接下来呢就是配置环境变量
1，新建环境变量 CATALINA_HOME 变量值为解压目录的路径..
2，将解压目录的bin 添加到path
测试启动打开 bin目录有个 将此文件 拖到cmd命令行中 若出现以下
然后打开浏览器输入以下地址localhost：8080 出现以下界面 则代表成功了
2，接下来我们就要把服务器和eclipse 集成
菜单栏的 windows 然后preferences 然后搜索server右边 add 找到解压目录
这样呢我们就把 tomcat 集成到我们的eclipse 中了
3，servlet +jsp
接下来创建我们的web项目
创建一个动态的web项目
输入项目名即可，然后点击完成
接下来呢我们在webcontent下创建一个新的文件夹 叫assert 来放我们的js文件
然后在https://jquery.com/download/ 去下载 我们这里下载的是3.2.1版本
WEB-INF 目录下 创建一个xml文件
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>zhenai</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
</web-app>
设置默认的主页
然后在这个文件夹下 创建我们的主页 ，新建一个jsp文件 我叫index
然后我们在如下的lib导入相应的jar包，这些jar包可以找到 为了方便大家，我就放在百度网盘上 大家下载下来，copy一下即可
https://pan.baidu.com/s/1fWCVt2RajvgqrSYtrIxDsg
index.jsp 如下
然后我们去下载echarts的js文件
这个是 百度公司的 下载即可
然后将js文件放到assert文件夹下
上面有实例 各种图表的使用示例 源码
类似于这样 点开任意一个图表都有示例 及源码
我们在webcontent 下 新建一个 jsp文件夹 来存放我们的 jsp文件
然后我们在jsp文件夹下 新创建一个sex.jsp文件 来制作性别分析
我们导入我们的js文件 然后插入超链接 来返回我们的主页
然后我们来hu我们获取据库数据 来为图标提供数据
首先开发一个servlet查询数据库，获取男女人数：
刚开始，可以先不操作数据库。
先模拟数据：
package cn.hyxy.zhenai;
import java.io.IOException;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/sex") // http://localhos/zhenaiweb/sex
public class SexServlet extends HttpServlet {
@Override
public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Random r = new Random();
int male = r.nextInt(1000);
int female = r.nextInt(1000);
resp.getWriter().print("male:"+male+",female:"+female);
}
}
测试访问：
2:使用ajax发送请求，获取数据
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../resources/jquery-3.2.1.min.js"></script>
</head>
<body>
<p>性别比例</p>
<h4>来自珍爱网的数据</h4>
<button id="btnLoad">加载</button>
<div id="data"></div>
</body>
<script type="text/javascript">
//脚本会自动的执行获取数据
$("#btnLoad").click(function() {
$.get("../sex").done(function(ttt) {
$("#data").text(ttt);
});
});
</script>
</html>
%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<c:url value='/assert/jquery-3.2.1.min.js'/>"></script>
</head>
<body>
<p>性别比例</p>
<h4>来自珍爱网的数据</h4>
<button id="btnLoad">加载</button>
<div id="data"></div>
</body>
<script type="text/javascript">
//脚本会自动的执行获取数据
$("#btnLoad").click(function() {
//参数的名称是配置的@WebServlet("/sex")里面的/sex
$.get("<c:url value='/sex'/>").done(function(ttt) {
$("#data").text(ttt);
});
});
</script>
</html>
配置数据链接
开发后台
package cn.lyh.zhenai.dao;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Properties;
import javax.sql.DataSource;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.ColumnListHandler;
import org.apache.commons.dbutils.handlers.MapHandler;
import org.apache.commons.dbutils.handlers.MapListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;
import cn.lyh.zhenai.utils.DSUtils;
public class ZhenaiDao {
private DataSource ds;
private ZhenaiDao() {
ds = DSUtils.getDataSource();
}
public static final ZhenaiDao DAO;
static {
DAO = new ZhenaiDao();
}
public static ZhenaiDao getDao() {
return DAO;
}
// 查询
public List<Map<String, Object>> querySex() {
QueryRunner run = new QueryRunner(ds);
String sql = "select sex as name,count(sex) as value from dogs group by sex";
List<Map<String, Object>> list = new ArrayList<>();
try {
list = run.query(sql, new MapListHandler());
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
}
package cn.hyxy.zhenai.service;
import java.util.List;
import java.util.Map;
import cn.hyxy.zhenai.dao.ZhenaiDao;
public class ZhenaiService {
private ZhenaiDao dao;
private ZhenaiService() {
dao = ZhenaiDao.getDao();
}
private static ZhenaiService SERVICE;
static {
SERVICE=new ZhenaiService();
}
public static ZhenaiService getService() {
return SERVICE;
}
//
public List<Map<String, Object>> querySex(){
return dao.querySex();
}
}
package cn.hyxy.zhenai;
import java.io.IOException;
import java.util.List;
import java.util.Map;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSONArray;
import cn.hyxy.zhenai.service.ZhenaiService;
@WebServlet("/sex") // http://localhos/zhenaiweb/sex
public class SexServlet extends HttpServlet {
@Override
public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Random r = new Random();
int male = r.nextInt(1000);
int female = r.nextInt(1000);
resp.setContentType("text/plain;charset=UTF-8");
//获取数据
ZhenaiService ss = ZhenaiService.getService();
List<Map<String, Object>> list = ss.querySex();
//
String json = JSONArray.toJSONString(list);
resp.getWriter().print(json);
}
}
这样呢我们的 男女性别 分析 就做完了
效果如图所示
接下来呢我们以同样的方法来分析 学历 不过这次我们用的是柱状图、
先看百度示例
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
模拟上面的数据
//1:获取元素
var myChart2 = echarts.init(document.getElementById('data2'));
//2：声明数据
var option2 = {
xAxis : {
type : 'category',
data : [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
},
yAxis : {
type : 'value'
},
series : [ {
data : [ 120, 200, 150, 80, 70, 110, 130 ],
type : 'bar'
} ]
};
//设置值
myChart2.setOption(option2);
出现以下的数据：
--添加更多的的数据：
//1:获取元素
var myChart2 = echarts.init(document.getElementById('data2'));
//2：声明数据
var option2 = {
legend : {
data : [ '男', '女' ]
},
xAxis : {
type : 'category',
data : [ '高中', '专科', '本科' ]
},
yAxis : {
type : 'value'
},
series : [ {
name : '男',
data : [ 120, 200, 150 ],
label : {
show : true,
position:'inside',
formatter:function(param){
return param.value+"人";
}
},
type : 'bar'
}, {
name : '女',
data : [ 70, 110, 130 ],
label : {
show : true
},
type : 'bar'
} ]
};
//设置值
myChart2.setOption(option2);
从数据库中获取数据
1：确定有多少学历
查询每一种学历，男的，女的各多少人
然后根据要求组织数据
[ {
name : '男',
data : [ 120, 200, 150 ],
}, {
name : '女',
data : [ 70, 110, 130 ],
} ]
提供模拟数据
package cn.lyh.zhenai;
import java.io.IOException;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/sexgrade")
public class SexGradeServlet extends HttpServlet {
@Override
public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
int a = new Random().nextInt(100);
String json = "[{'name':'男','data':["+a+",210,150]},{'name':'女','data':[ 80, 110, 130 ]}]";
//输出这个数据
resp.setContentType("text/plain;charset=UTF-8");
resp.getWriter().print(json);
}
}
delete frome doges where grade !='中专' and grade !='大专' and grade !='大学本科' and grade !='高中及以下' and grade !='硕士' and grade !='博士'
获取真实的数据
public Map<String, Object> querySexGrade() {
// 声明返回的数据 -DAO - > DataAccess Object
Map<String, Object> map = new HashMap<>();
try {
List<String> list = new ArrayList<>();
// 声明SQL语句
String sql = "SELECT DISTINCT grade FROM dogs WHERE grade !='--'";
QueryRunner run = new QueryRunner(ds);
list = run.query(sql, new ColumnListHandler<String>());
map.put("legend", list);
// 声明数据
List<Map<String, Object>> datas = new ArrayList<>();
// 声明男
// 声明男生的数量，和女生的数量的集合
List<Integer> maleDatas = new ArrayList<>();
List<Integer> femaleDatas = new ArrayList<>();
// 查询男，各种学历
for (String grade : list) {
String sqlA = "SELECT COUNT(1) FROM dogs WHERE grade=? AND sex='女'";
String sqlB = "SELECT COUNT(1) FROM dogs WHERE grade=? AND sex='男'";
int cnt = run.query(sqlA, new ScalarHandler<Long>(), grade).intValue();
femaleDatas.add(cnt);
cnt = run.query(sqlB, new ScalarHandler<Long>(), grade).intValue();
maleDatas.add(cnt);
}
Map<String, Object> male = new HashMap<>();
male.put("name", "男");
male.put("data", maleDatas);
datas.add(male);
Map<String, Object> female = new HashMap<>();
female.put("name", "女");
female.put("data", femaleDatas);
datas.add(female);
//
map.put("datas", datas);
} catch (Exception e) {
throw new RuntimeException(e);
}
return map;
}
然后我们就做出了如图所示的报表
大家可以照猫画虎，分析住房，年龄，等等，若遇到什么问题 欢迎在评论区评论，我会在第一时间帮助你哦，明天我将会为大家分享地图报表的制作哦！