若依框架------柱状图，饼图

雨点打透心脏的1/2处 2023-09-23 23:59 60阅读 0赞

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里面

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

定义div进行存储–body里面

然后再用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);