javascript

    //初始化echarts
    var pieCharts = echarts.init(document.getElementById("pie"));
    //設定屬性
    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: []
            }
        ]
    });
    //顯示一段動畫
    pieCharts.showLoading();
    //非同步請求資料
    $.ajax({
        type: "post",
        async: true,
        url: '${pageContext.request.contextPath}/teacher/getData',
        data: [],
        dataType: "json",
        success: function (results) {
            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: results
                    }
                ]
            });
        }
    })
 

需要在頁面新增一個盒子 

        <!-- 為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);
        }

        System.out.println("json資料:"+results);
        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;

效果