ECharts —— 简单实现饼图和柱状图

饼图

javascript

    //初始化echarts
    var pieCharts = echarts.init(document.getElementById("pie"));
    //显示一段动画
    pieCharts.showLoading();

    //异步请求数据
    $.ajax({
        type: "post",
        async: true,
        url: '${pageContext.request.contextPath}/teacher/getData',
        data: [],
        dataType: "json",
        success: function (data) {
            console.log(data)
            pieCharts.hideLoading();//隐藏加载动画
            pieCharts.setOption({
                title: {
                    text: '学生及格率',
                    subtext: '及格率',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: []
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                series: [
                    {
                        name: '成绩',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: data
                    }
                ]
            });
        }
    })

需要在页面添加一个盒子 

        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="pie" style="width: 500px;height: 300px;"></div>

controller

    @RequestMapping("/getData")
    @ResponseBody
    public List<scoreResult> getData() {
        int pass = service.getStudentPass().size();
        int nopass = service.getStudentNoPass().size();
        List<scoreResult> results = new ArrayList<>();
        scoreResult resultpass = new scoreResult(pass,"及格");
        scoreResult resultnopass = new scoreResult(nopass,"不及格");
        results.add(resultpass);
        results.add(resultnopass);
        System.out.println("json数据:"+results);
        return results;
    }

    @RequestMapping("/getData")
    @ResponseBody
    public List<scoreResult> getData() {
        List<Grade> grades = service.getAllStudentScore();
        List<scoreResult> results = new ArrayList<>();
        for (Grade grade : grades) {
            // 把学生的成绩和姓名封装到一个result
            scoreResult result = new scoreResult(grade.getScore().intValue(), grade.getSubject());
            results.add(result);
            System.out.println(result);
        }
        return results;
    }

service

    /**
     * 查询所有学生的成绩信息列表
     * @return
     */
    public List<Grade> getAllStudentScore(){
        List<Grade> gradeList = gradeMapper.selectByExample(null);
        return gradeList;
    }

    public List<Grade> getStudentPass(){
        GradeExample example = new GradeExample();
        example.createCriteria().andPassEqualTo("及格");
        List<Grade> gradePasslist = gradeMapper.selectByExample(example);
        return gradePasslist;
    }
    public List<Grade> getStudentNoPass(){
        GradeExample example = new GradeExample();
        example.createCriteria().andPassEqualTo("不及格");
        List<Grade> gradeNoPasslist = gradeMapper.selectByExample(example);
        return gradeNoPasslist;
    }

实体类省略get和set

    public Integer value;
    public String name;

效果

柱状图

javascript

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var subject = [];//科目数组（实际用来盛放X轴坐标值）
    var score = [];//成绩数组（实际用来盛放Y坐标值）
    $.get('${pageContext.request.contextPath}/parent/queryGrade').done(function (data) {
            for (var i = 0; i < data.length; i++) {
                subject.push(data[i].name);
                score.push(data[i].value);
            }
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '成绩统计图'
            },
            tooltip: {},
            legend: {
                data: ['成绩']
            },
            xAxis: {
                data: subject
            },
            yAxis: {},
            series: [{
                name: '成绩',
                type: 'bar',
                data: score
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    });

用来显示的盒子

<div class="am-center" id="main" style="width: 600px;height:400px;"></div>

Controller

    @RequestMapping("/queryGrade")
    @ResponseBody
    public List<scoreResult> queryGrade(){
        /*String studentname = service.queryStudentByParentName(parentename).get(0).getStudentname();*/
        String studentname = "李尔";
        List<Grade> gradeList = service.queryGrade(studentname);
        List<scoreResult> scoreResults = new ArrayList<>();
        for (Grade grade: gradeList){
                scoreResult result = new scoreResult(Integer.parseInt(String.valueOf(grade.getScore())),
                        grade.getSubject());
                scoreResults.add(result);
        }
        System.out.println("json:"+scoreResults);
        return scoreResults;
    }

 service

    /**
     * 根据学生姓名查询学生成绩
     * @param studentname
     * @return  返回查询结果集
     */
    public List<Grade> queryGrade(String studentname){
        GradeExample example = new GradeExample();
        example.createCriteria().andStudentnameEqualTo(studentname);
        List<Grade> gradeList = gradeMapper.selectByExample(example);
        return gradeList;
    }

实现效果