饼状图改变数据显示位置_大数据从入门到深入：JavaEE 之 项目实战 项目进阶编码阶段（4）...

3.4 学生图表3

3.2.1 产品经理阶段

项目需求 :

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

3.3.2 项目经理阶段

业务分析 :

计算出总人数和各分数线的录取人数

3.3.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 = null;
        // 编写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'));
                myChart.showLoading();
                // 指定图表的配置项和数据
                var option = {
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        //显示策略，可选为：true（显示） | false（隐藏），默认值为true
                        show: true,
                        //水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
                        x: 'center',
                        //垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
                        y: 'top',
                        // 图例数据
                        data: ['一本录取','二本录取','专科录取','未录取']
                    },
                    series : [
                        {
                            name: '录取情况',
                            type: 'pie',
                            // 饼状图的半径范围
                            radius : '65%',
                            center: ['50%', '60%'],
                            data:[
                                {value:data[0], name:'一本录取'},
                                {value:data[1], name:'二本录取'},
                                {value:data[2], name:'专科录取'},
                                {value:data[3], name:'未录取'}
                            ]
                        }
                    ]
                };
                myChart.hideLoading();
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            });
        </script>

根据页面需求整理后端控制器

    @RequestMapping("/studentTongJi4")
    public @ResponseBody List studentTongJi4()throws Exception{
        return studentService.tongji4();
    }

效果:

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