若依框架显示柱状图，饼图

Controller页面
这里只写一个controller层的，其他的就不写了，就是查询全服的，自己写

后端使用ModelMap传值到前端，和下拉框的默认选中一样

@RequiresPermissions("system:score:view")
    @GetMapping()
    public String score(HttpServletRequest request,ModelMap mmap)
    {
//        System.out.println("111111111111");
//        System.out.println(request.getParameter("a"));
//        System.out.println(request.getParameter("b"));
//        mmap.put("a",request.getParameter("a"));
//        mmap.put("b",request.getParameter("b"));
        
        //通过这里传值到前端
        mmap.put("list",sysScoreService.selectSysScoreList(new SysScore()));
        //跳转HTML页面，附带传值
        return prefix + "/score";
    }

HTML页面

首先需要引入js模板—head里面

<!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

定义div进行存储–body里面

<div class="col-sm-12 search-collapse" id="main" style="width: 1000px;height:400px;"></div><!--柱状图-->
     <div class="col-sm-12 search-collapse" id="main1" style="width: 1000px;height:400px;"></div><!--饼状图-->

然后再用js进行定义属性

//默认选中div，进行设置属性的
var myChart = echarts.init(document.getElementById('main'));
            var myChart1 = echarts.init(document.getElementById('main1'));
 var option = {//柱状图
                title: {
                    text: '成绩柱状图',
                },
                tooltip: {},
                legend: {
                    data:['成绩']
                },
                xAxis: {
                    data: []
                },
                yAxis: {},
                series: [{
                    name: '成绩',
                    type: 'bar',
                    data: []
                }]
            };
            //清空原本的数据,不清空怎么往里面赋值，不清空就是替换覆盖了，会有buf
            option.xAxis.data=[];
            option.series[0].data=[];
            //后端取值进行循环===》》》[[${list}]]

            for (var i = 0;i<[[${list}]].length;i++){
                option.xAxis.data[i]=[[${list}]][i].sysStudent.studentName+[[${list}]][i].sysSub.subName;
                option.series[0].data[i]=[[${list}]][i].scoreName;
            }
            //打印图形
            myChart.setOption(option);
            var option1 ={//饼图
                series : [
                    {
                        name: '分数',
                        type: 'pie',    // 设置图表类型为饼图
                        radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                        data:[          // 数据数组，name 为数据项名称，value 为数据项值
                            {value:235, name:'视频广告'},
                            {value:274, name:'联盟广告'},
                            {value:310, name:'邮件营销'},
                            {value:335, name:'直接访问'},
                            {value:400, name:'搜索引擎'}
                        ]
                    }
                ]
            };
            //清空原本的数据
            option1.series[0].data=[];
            //后端取值进行循环===》》》[[${list}]]
            for (var i = 0;i<[[${list}]].length;i++){
                //定义集合进行存储数据，循环一次，赋值一次，清空一次
                var info={};
                info.value=[[${list}]][i].scoreName;
                info.name=[[${list}]][i].sysStudent.studentName+[[${list}]][i].sysSub.subName;
                //这里才是真正的赋值
                option1.series[0].data[i]=info;
            }
            myChart1.setOption(option1);