文章目录

  • 第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 产品经理阶段

java如何往word文档插入柱状图_Java


业务需求 :

根据现有数据进行概况分析,统计图表分析,趋势总结分析;

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>

效果 :

java如何往word文档插入柱状图_Spring_02


到此,文字版统计数据结束

3.2 柱状图显示不同区的考生人数

3.2.1 产品经理阶段

java如何往word文档插入柱状图_java如何往word文档插入柱状图_03


项目需求 :

使用柱状图完成各区高考人数的统计

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下载完整版

java如何往word文档插入柱状图_Java_04


后面是开发须知,不用管,直接点OK就行

将下载好的JS文件导入项目的JS文件夹里面

java如何往word文档插入柱状图_java如何往word文档插入柱状图_05


在统计页面引入这个文件

<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的效果如下

java如何往word文档插入柱状图_Spring_06


完整页面

<%@ 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>

效果 :

java如何往word文档插入柱状图_java如何往word文档插入柱状图_07

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;

java如何往word文档插入柱状图_Spring_08


根据结果和页面视图封装需要的数据

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();
    }

效果 :

java如何往word文档插入柱状图_java如何往word文档插入柱状图_09


到此 统计各区参考人数统计图表完成

3.3 柱状图显示每个区的不同级别录取人数和比例

3.3.1 产品经理阶段

java如何往word文档插入柱状图_Java_10


项目需求 :

使用柱状图完成各区各录取分数线的统计

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();
    }

效果 :

java如何往word文档插入柱状图_项目流程_11


到此,各区的录取情况统计已完成

3.4 饼图显示不同录取级别的人数和比例

3.4.1 产品经理阶段

java如何往word文档插入柱状图_Java_12


项目需求 :

使用饼状图统计各录取线占比情况

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;

java如何往word文档插入柱状图_ico_13


根据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();
    }

效果:

java如何往word文档插入柱状图_Spring_14


到此,各录取分数线占比情况统计完毕

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>

效果:


java如何往word文档插入柱状图_Java_15


到此,统计工作全部完成

发布项目到服务器 Linux

JDK
mysql
tomcat
nginx 反向代理