文章目录
- 第3章 项目进阶阶段
- 3.1 学生信息统计显示
- 3.1.1 产品经理阶段
- 3.1.2 项目经理阶段
- 3.1.3 程序员阶段
- 3.2 柱状图显示不同区的考生人数
- 3.2.1 产品经理阶段
- 3.2.2 项目经理阶段
- 3.2.3 程序员阶段
- 3.3 柱状图显示每个区的不同级别录取人数和比例
- 3.3.1 产品经理阶段
- 3.3.2 项目经理阶段
- 3.3.3 程序员阶段
- 3.4 饼图显示不同录取级别的人数和比例
- 3.4.1 产品经理阶段
- 3.4.2 项目经理阶段
- 3.4.3 程序员阶段
- 3.5 速率表显示录取率的评级
- 3.5.1 产品经理阶段
- 3.5.2 项目经理阶段
- 3.5.3 程序员阶段
第3章 项目进阶阶段
3.1 学生信息统计显示
3.1.1 产品经理阶段
业务需求 :
根据现有数据进行概况分析,统计图表分析,趋势总结分析;
3.1.2 项目经理阶段
业务分析 :
1) 文字展示今年的全市高考情况,一本多少人,二本多少人,专科多少人,有多少人落选;
3.1.3 程序员阶段
文字分析全市考试情况
SQL :
-- 封装高考成绩
create VIEW stu_v3 as
select s_id sid,SUM(r_score) totalScore from result GROUP BY s_id;
-- 统计各分数线成绩
create VIEW stu_v4 as
select
count(sid) t,
sum(CASE WHEN totalScore >= 550 then 1 else 0 end) f,
sum(CASE WHEN totalScore < 550 and totalScore >= 450 then 1 else 0 end) s,
sum(CASE WHEN totalScore < 450 and totalScore >= 250 then 1 else 0 end) o
from stu_v3;
select * from stu_v4;
根据查询结果封装数据
DAO层接口:
/**
* 文字统计各分数线
* @return
* @throws Exception
*/
public Map<String,Object> tongji1()throws Exception;
DAO层实现类
@Override
public Map<String, Object> tongji1() throws Exception {
// 创建方法的返回值
Map<String, Object> maps = null;
// 编写SQL语句
String sql = "select * from stu_v4";
// 执行
maps = qr.query(sql, new MapHandler());
// 返回
return maps;
}
Service层接口
/**
* 文字统计录取情况
* @return
* @throws Exception
*/
public Map<String, Object> tongji1() throws Exception;
Service层接口实现类
@Override
public Map<String, Object> tongji1() throws Exception {
return studentDAO.tongji1();
}
到此Model层整理完成
开始整理页面,index.jsp发起本次请求
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>学生信息管理与分析系统</title>
<!-- 引入CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 引入JS -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript">
// 分页查询
function stuManage(){
window.location.href = "${pageContext.request.contextPath}/findStudentsByPage?pi=1";
}
// 信息统计
function stuTongJi(){
window.location.href = "${pageContext.request.contextPath}/studentTongJiIndex";
}
</script>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>欢迎使用学生信息管理与分析系统</h1>
<p>请选择一个您要操作的功能吧!</p>
<p>
<button type="button" class="btn btn-primary btn-lg" onclick="stuManage();">
<span class="glyphicon glyphicon-user"></span> 学生信息管理
</button>
</p>
<p>
<button type="button" class="btn btn-success btn-lg" onclick="stuTongJi();">
<span class="glyphicon glyphicon-signal"></span> 学生信息统计
</button>
</p>
</div>
</div>
</body>
</html>
整理后端控制器
@RequestMapping("/studentTongJiIndex")
public ModelAndView studentTongJiIndex()throws Exception{
// 创建方法的返回值
ModelAndView mv = new ModelAndView();
// 获取数据
Map<String,Object> maps = studentService.tongji1();
// 保存数据
mv.addObject("map1", maps);
// 转发
mv.setViewName("forward:/student_tongji.jsp");
// 返回
return mv;
}
统计图表展示页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE HTML>
<html>
<head>
<title>高考数据分析</title>
<meta charset="UTF-8">
<!-- 引入CSS样式 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<style type="text/css">
strong{
font-size: 50px;
font-weight: bolder;
color: #FF6666;
}
</style>
<!-- 引入JS文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1><span class="glyphicon glyphicon-signal"></span> 学生数据统计<small>2018年高考数据概述</small></h1>
<h2><span class="glyphicon glyphicon-cloud"></span> 高考数据分析</h2>
<p class="lead" style="color: #999999;">
2018年北京各地共有
<strong>${map1['t']}</strong>名学生参加了本次高考;<br />
一本线(550分)<strong>${map1['f']}</strong>人,过二本线(450分)<strong>${map1['s']}</strong>人,
过专科线(250分)有<strong>${map1['o']}</strong>人;
</p>
<h2><span class="glyphicon glyphicon-cloud"></span> 详细内容请看统计图表</h2>
</div>
</div>
</body>
</html>
效果 :
到此,文字版统计数据结束
3.2 柱状图显示不同区的考生人数
3.2.1 产品经理阶段
项目需求 :
使用柱状图完成各区高考人数的统计
3.2.2 项目经理阶段
业务需求分析 :
使用统计图的话,那么就要使用百度出的echarts了
echarts知识点整理 :
概述:
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
详见 : http://echarts.baidu.com/feature.html
使用:
使用ECharts非常简单一共只需三步就能完成一个统计图表的编写
第一步 : 下载js文件
访问 http://echarts.baidu.com/download3.html 这个网址
选择echarts3下载完整版
后面是开发须知,不用管,直接点OK就行
将下载好的JS文件导入项目的JS文件夹里面
在统计页面引入这个文件
<script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
第二步 : 创建图表绘制区域
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
第三步 : 通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是JS完整代码。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>echarts入门demo</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="height: 600px;width: 600px;"></div>
<script type="text/javascript">
// 我要在这个div中加载一个统计图
// 1. 初始化一下这个div
var myChart = echarts.init(document.getElementById('main'));
// 2. 设置你需要的样式
// {}代表一个JSON对象
var option = {
title : {text : '入门案例1'}, // 统计图标题
tooltip : {}, // 统计图的工具栏
legend : { data:['销量'] }, // 图例
xAxis : {data : ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']}, // 设定x轴的数据名称
yAxis : {}, // y轴数据的名称
// 数据
series :[{
name : '销量', // 数据名称 对应图例
type : 'bar', // 数据类型 bar 条形图
data : [5,20,36,10,10,20] // 数据
}]
};
// 将选项与echarts的初始化对象绑定
myChart.setOption(option);
</script>
</body>
</html>
demo的效果如下
完整页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE HTML>
<html>
<head>
<title>高考数据分析</title>
<meta charset="UTF-8">
<!-- 引入CSS样式 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<style type="text/css">
strong{
font-size: 50px;
font-weight: bolder;
color: #FF6666;
}
</style>
<!-- 引入JS文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1><span class="glyphicon glyphicon-signal"></span> 学生数据统计<small>2018年高考数据概述</small></h1>
<h2><span class="glyphicon glyphicon-cloud"></span> 高考数据分析</h2>
<p class="lead" style="color: #999999;">
2018年北京各地共有
<strong>${map1['t']}</strong>名学生参加了本次高考;<br />
一本线(550分)<strong>${map1['f']}</strong>人,过二本线(450分)<strong>${map1['s']}</strong>人,
过专科线(250分)有<strong>${map1['o']}</strong>人;
</p>
<h2><span class="glyphicon glyphicon-cloud"></span> 详细内容请看统计图表</h2>
<h3><span class="glyphicon glyphicon-stats"></span> 图表1:各区高考人数统计</h3>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</div>
</div>
</body>
</html>
效果 :
3.2.3 程序员阶段
根据项目经理给的案例整理,我们需要获取所有区县信息作为横轴,然后对应人数作为纵轴的数据
老规矩,SQL整理,查询每个区域的考生人数
-- 获取参加考试人员的id
create view stu_v5 as
select DISTINCT s_id sid from result;
-- 创建各区参考人数视图
select aname,count(*) acount from stu_v1 s1 inner join stu_v5 s2 on s1.sid = s2.sid group by aname;
根据结果和页面视图封装需要的数据
DAO层接口
/**
* 统计各区参考人数
* @return
* @throws Exception
*/
public List<Object> tongji2()throws Exception;
DAO层实现类
@Override
public List<Object> tongji2() throws Exception {
// 创建方法的返回值
List<Object> list = new ArrayList<Object>();
// 编写SQL语句
String sql = "select aname,count(*) acount from stu_v1 s1 inner join stu_v5 s2 on s1.sid = s2.sid group by aname";
// 执行
List<String> list1 = qr.query(sql,new ColumnListHandler<String>(1));
List<Long> list2 = qr.query(sql, new ColumnListHandler<Long>(2));
// 保存数据
list.add(list1);
list.add(list2);
// 返回
return list;
}
Service层接口
/**
* 统计各区参考人数
* @return
* @throws Exception
*/
public List<Object> tongji2() throws Exception;
Service层实现类
@Override
public List<Object> tongji2() throws Exception {
return studentDAO.togji2();
}
页面JS整理
<div id="main1" style="width: 1200px;height:400px;"></div>
<script type="text/javascript">
// 指定图表的配置项和数据
$.post("${pageContext.request.contextPath}/studentTongJi2",function(data){
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main1'));
var option = {
//提示框,鼠标悬浮交互时的信息提示
tooltip: {
//触发类型,默认('item')数据触发,可选为:'item' | 'axis'
trigger: 'axis'
},
//图例,每个图表最多仅有一个图例
legend: {
//显示策略,可选为:true(显示) | false(隐藏),默认值为true
show: true,
//水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
x: 'center',
//垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
y: 'top',
//legend的data: 用于设置图例,data内的字符串数组需要与sereis数组内每一个series的name值对应
data: ['参考人数']
},
//工具箱,每个图表最多仅有一个工具箱
toolbox: {
//显示策略,可选为:true(显示) | false(隐藏),默认值为false
show: true,
//启用功能,目前支持feature,工具箱自定义功能回调处理
feature: {
//辅助线标志
mark: {show: true},
//dataZoom,框选区域缩放,自动与存在的dataZoom控件同步,分别是启用,缩放后退
dataZoom: {
show: true,
title: {
dataZoom: '区域缩放',
dataZoomReset: '区域缩放后退'
}
},
//数据视图,打开数据视图,可设置更多属性,readOnly 默认数据视图为只读(即值为true),可指定readOnly为false打开编辑功能
dataView: {show: true, readOnly: true},
//magicType,动态类型切换,支持直角系下的折线图、柱状图、堆积、平铺转换
magicType: {show: true, type: ['line', 'bar']},
//restore,还原,复位原始图表
restore: {show: true},
//saveAsImage,保存图片(IE8-不支持),图片类型默认为'png'
saveAsImage: {show: true}
}
},
//是否启用拖拽重计算特性,默认关闭(即值为false)
calculable: true,
//直角坐标系中横轴数组,数组中每一项代表一条横轴坐标轴,仅有一条时可省略数值
//横轴通常为类目型,但条形图时则横轴为数值型,散点图时则横纵均为数值型
xAxis: {
//显示策略,可选为:true(显示) | false(隐藏),默认值为true
show: true,
//坐标轴类型,横轴默认为类目型'category'
type: 'category',
//类目型坐标轴文本标签数组,指定label内容。 数组项通常为文本,'\n'指定换行
data: data[0]
},
//直角坐标系中纵轴数组,数组中每一项代表一条纵轴坐标轴,仅有一条时可省略数值
//纵轴通常为数值型,但条形图时则纵轴为类目型
yAxis: [
{
//显示策略,可选为:true(显示) | false(隐藏),默认值为true
show: true,
//坐标轴类型,纵轴默认为数值型'value'
type: 'value',
//分隔区域,默认不显示
splitArea: {show: true}
}
],
//sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构;对象内包含对象
series: [{
//系列名称,如果启用legend,该值将被legend.data索引相关
name : '参考人数',
//系列中的数据内容数组,折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度,并且他们间是一一对应的。数组项通常为数值
data: data[1],
//图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示。
type: 'bar',
//系列中的数据标注内容
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
//系列中的数据标线内容
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
});
</script>
分解页面需求整理后端控制器
@RequestMapping("/studentTongJi2")
public @ResponseBody List studentTongJi2()throws Exception{
return studentService.tongji2();
}
效果 :
到此 统计各区参考人数统计图表完成
3.3 柱状图显示每个区的不同级别录取人数和比例
3.3.1 产品经理阶段
项目需求 :
使用柱状图完成各区各录取分数线的统计
3.3.2 项目经理阶段
业务分析 :
分解每个区域统计每个区域的一本,二本,专科的录取情况;
3.3.3 程序员阶段
SQL
-- 创建视图封装每个学生的总分
create view stu_v6 as
select s_id sid,SUM(r_score) totalScore from result GROUP BY s_id;
-- 封装各区考试情况
create view stu_v7 as
select
a.a_name aname,
count(sid) t,
sum(CASE WHEN totalScore >= 550 then 1 else 0 end) f,
sum(CASE WHEN totalScore < 550 and totalScore >= 450 then 1 else 0 end) s,
sum(CASE WHEN totalScore < 450 and totalScore >= 250 then 1 else 0 end) o
from student s
inner join stu_v6 r on s.s_id = r.sid
inner join school sc on s.sc_id = sc.sc_id
inner join area a on a.a_id = sc.a_id
GROUP BY a.a_name;
-- 查询视图
select * from stu_v7;
根据SQL封装数据
DAO层接口
/**
* 统计各区参考人数
* @return
* @throws Exception
*/
public List<Object> tongji3()throws Exception;
DAO层实现类
@Override
public List<Object> tongji3() throws Exception {
// 创建方法的返回值
List<Object> list = new ArrayList<Object>();
// 编写SQL语句
String sql = "select * from stu_v7";
// 执行
// 获取地区
List<String> list1 = qr.query(sql, new ColumnListHandler<String>(1));
// 一共
List<Long> list2 = qr.query(sql, new ColumnListHandler<Long>(2));
// 一本录取
List<Long> list3 = qr.query(sql, new ColumnListHandler<Long>(3));
// 二本录取
List<Long> list4 = qr.query(sql, new ColumnListHandler<Long>(4));
// 专科录取
List<Long> list5 = qr.query(sql, new ColumnListHandler<Long>(5));
// 保存数据
list.add(list1);
list.add(list2);
list.add(list3);
list.add(list4);
list.add(list5);
// 返回
return list;
}
Service层接口
/**
* 统计各区录取情况
* @return
* @throws Exception
*/
public List<Object> tongji3() throws Exception;
Service层实现类
@Override
public List<Object> tongji3() throws Exception {
return studentDAO.tongji3();
}
整理页面需求
<h3><span class="glyphicon glyphicon-stats"></span> 图表2:各区各录取线人数统计</h3>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main2" style="width: 1200px;height:400px;"></div>
<script type="text/javascript">
$.post("${pageContext.request.contextPath}/studentTongJi3",function(data){
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main2'));
//定义图
var labelOption = {
normal: {
show: true,
position:'insideBottom',
distance: 15,
align: 'left',
verticalAlign:'middle',
rotate: 90,
formatter: '{c} {name|{a}}',
fontSize: 16,
rich: {
name: {
textBorderColor: '#fff'
}
}
}
};
// 指定图表的配置项和数据
var option = {
color: ['#003366', '#006699', '#4cabce', '#e5323e'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['总人数', '一本', '二本', '专科','未录取']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
axisTick: {show: false},
data: data[0]
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '总人数',
type: 'bar',
barGap: 0,
label: labelOption,
data: data[1]
},
{
name: '一本',
type: 'bar',
label: labelOption,
data: data[2]
},
{
name: '二本',
type: 'bar',
label: labelOption,
data: data[3]
},
{
name: '专科',
type: 'bar',
label: labelOption,
data: data[4]
},
{
name: '未录取',
type: 'bar',
label: labelOption,
data: data[5]
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
});
</script>
根据页面需求整理后端控制器
@RequestMapping("/studentTongJi3")
public @ResponseBody List studentTongJi3()throws Exception{
return studentService.tongji3();
}
效果 :
到此,各区的录取情况统计已完成
3.4 饼图显示不同录取级别的人数和比例
3.4.1 产品经理阶段
项目需求 :
使用饼状图统计各录取线占比情况
3.4.2 项目经理阶段
业务分析 :
计算出总人数和各分数线的录取人数
3.4.3 程序员阶段
SQL
-- 创建各录取分数情况视图
create VIEW stu_v8 as
select
sum(CASE WHEN totalScore >= 550 then 1 else 0 end) f,
sum(CASE WHEN totalScore < 550 and totalScore >= 450 then 1 else 0 end) s,
sum(CASE WHEN totalScore < 450 and totalScore >= 250 then 1 else 0 end) o,
sum(CASE WHEN totalScore < 250 then 1 else 0 end) x
from stu_v3;
-- 查询视图
select * from stu_v8;
根据SQL查询结果封装数据
DAO层接口
/**
* 统计各区参考人数
* @return
* @throws Exception
*/
public List<Object> tongji4()throws Exception;
DAO层实现类
@Override
public List<Object> tongji4() throws Exception {
// 创建方法的返回值
List<Object> list = new ArrayList();
// 编写SQL语句
String sql = "select * from stu_v8";
// 执行
Object[] result = qr.query(sql,new ArrayHandler());
// 保存数据
list.add(result[0]);
list.add(result[1]);
list.add(result[2]);
list.add(result[3]);
// 返回
return list;
}
Service层接口
/**
* 统计各区参考人数
* @return
* @throws Exception
*/
public List<Object> tongji4()throws Exception;
Service层实现类
@Override
public List<Object> tongji4() throws Exception {
return studentDAO.tongji4();
}
到此Model层封装完成整理页面需求
<h3><span class="glyphicon glyphicon-stats"></span> 图表3:各录取线占比情况</h3>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main3" style="width: 1200px;height:400px;"></div>
<script type="text/javascript">
$.post("${pageContext.request.contextPath}/studentTongJi4",function(data){
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main3'));
var uploadedDataURL = "/asset/get/s/data-1559121268278-ozjd-lXoz.png";
var uploadedDataURL = "/asset/get/s/data-1559121263841-UC5w7mTJ9.png";
var uploadedDataURL = "/asset/get/s/data-1559121259198-sxyPSimU9.png";
var uploadedDataURL = "/asset/get/s/data-1559121254241-xj5JAIBzC.png";
var uploadedDataURL = "/asset/get/s/data-1559121249274-QxHDAdQGy.png";
var colorList=['#afa3f5', '#00d488', '#3feed4', '#3bafff', '#f1bb4c', "rgba(250,250,250,0.5)"];
var sportsIcon = {
'a':'/asset/get/s/data-1559121268278-ozjd-lXoz.png',
'b':'/asset/get/s/data-1559121263841-UC5w7mTJ9.png',
'c':'/asset/get/s/data-1559121259198-sxyPSimU9.png',
'd':'/asset/get/s/data-1559121254241-xj5JAIBzC.png',
'e':'/asset/get/s/data-1559121249274-QxHDAdQGy.png',
};
option3 = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
data: ['一本','二本','专科','未录取']
},
title: {
text: '全市各分数线',
subtext: '录取情况',
x: 'center',
y: 'center',
textStyle: {
fontSize:30,
fontWeight:'normal',
color: ['#333']
},
subtextStyle: {
color: '#666',
fontSize: 16
},
},
grid: {
bottom: 150,
left: 0,
right: '10%'
},
series: [
// 主要展示层的
{
name: '录取情况',
radius: ['30%', '65%'],
center: ['50%', '50%'],
type: 'pie',
itemStyle: {
normal: {
color: function(params) {
return colorList[params.dataIndex]
}
}
},
labelLine: {
normal: {
show: true,
length: 15,
length2: 120,
lineStyle: {
color: '#d3d3d3'
},
align: 'right'
},
color: "#000",
emphasis: {
show: true
}
},
label:{
normal:{
formatter: function(params){
var str = '';
switch(params.name){
case '一本':str = '{a|}\n{nameStyle|一本 }'+'{rate|'+params.value+'}';break;
case '二本':str = '{b|}\n{nameStyle|二本 }'+'{rate|'+params.value+'}';break;
case '专科':str = '{c|}\n{nameStyle|专科 }'+'{rate|'+params.value+'}';break;
case '未录取':str = '{d|}\n{nameStyle|未录取 }'+'{rate|'+params.value+'}';break;
}
return str
},
padding: [0, -110],
height: 165,
rich: {
a: {
width:38,
height:38,
lineHeight: 50,
backgroundColor: {
image: sportsIcon.e
},
align: 'left'
},
b: {
width:29,
height:45,
lineHeight: 50,
backgroundColor: {
image: sportsIcon.d
},
align: 'left'
},
c: {
width:34,
height:33,
lineHeight: 50,
backgroundColor: {
image: sportsIcon.c
},
align: 'left'
},
d: {
width:34,
height:44,
lineHeight: 50,
backgroundColor: {
image: sportsIcon.b
},
align: 'left'
},
e: {
width:38,
height:30,
lineHeight: 50,
backgroundColor: {
image: sportsIcon.a
},
align: 'left'
},
nameStyle: {
fontSize: 16,
color: "#555",
align: 'left'
},
rate: {
fontSize: 20,
color: "#1ab4b8",
align: 'left'
}
}
}
},
data: [
{value:data.f,name:'未录取', },
{value:data.s, name:'一本'},
{value:data.t, name:'二本'},
{value:data.o, name:'专科'}],
},
// 边框的设置
{
radius: ['60%', '65%'],
center: ['50%', '50%'],
type: 'pie',
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
},
emphasis: {
show: false
}
},
animation: false,
tooltip: {
show: false
},
itemStyle: {
normal: {
color:'rgba(250,250,250,0.5)'
}
},
data: [{
value: 1,
}],
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
});
</script>
根据页面需求整理后端控制器
@RequestMapping("/studentTongJi4")
public @ResponseBody List studentTongJi4()throws Exception{
return studentService.tongji4();
}
效果:
到此,各录取分数线占比情况统计完毕
3.5 速率表显示录取率的评级
3.5.1 产品经理阶段
项目需求 :
根据统计结果综合评定2018年北京市高考情况
3.5.2 项目经理阶段
业务分析 :
通过计算本科的占比情况推算出今年的高考情况
3.5.3 程序员阶段
在第一个文字版需求中我们曾经计算过各学科人数,所以可以利用这个计算本科的占比情况
所以我们直接编写页面即可
<h3>
<c:set var="bzb" value="${(map1['f']+map1['s'])*100/map1['t']}" />
<span class="glyphicon glyphicon-stats"></span> 图表4:综合评定2018年北京市高考情况(本科录取率${bzb}%)判定为:
<c:if test="${bzb >=0 && bzb <= 33}">
<strong style="color: red;">C级(较差)</strong>
</c:if>
<c:if test="${bzb >=34 && bzb <= 67}">
<strong style="color: blue;">B级(中等)</strong>
</c:if>
<c:if test="${bzb >=68 && bzb <= 100}">
<strong style="color: green;">A级(良好)</strong>
</c:if>
</h3>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main4" style="width: 1200px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main4'));
myChart.showLoading();
// 指定图表的配置项和数据
var option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
series: [
{
name: '本科占比',
type: 'gauge',
detail: {formatter:'{value}%'},
data: [{value: ${bzb}, name: '本科占比'}]
}
]
};
myChart.hideLoading();
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
效果:
到此,统计工作全部完成
发布项目到服务器 Linux
JDK
mysql
tomcat
nginx 反向代理