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

简介: 若依框架------柱状图,饼图

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);
目录
相关文章
|
前端开发 JavaScript 数据可视化
Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程
Echarts 折线图是图表中最常用的显示形式之一。使用 Echarts 做出基本的折线图很简单,但要是想把多组数据放在一张图表中,展示的漂亮又直观就不容易了。本文将带领大家从最基本的折线图,一步步完善,最终做出可读性很高的可视化图表。 根据本教程在卡拉云中搭建的折线图 Demo,你可以立即注册卡拉云,跟随本教程学习 跟随本教程你将学到 1.折线外观属性 折线增加弧线平滑过渡 折线图变为散状圆点 实线改为虚线 折线指定颜色 增加数据显示 表格外观属...
2041 0
|
程序员
若依框架-------单体导入功能详解
若依框架-------单体导入功能详解
1128 0
|
JavaScript
Vue+Echarts: 实现饼状图的详细教程
Vue+Echarts: 实现饼状图的详细教程
1735 0
若依框架 --- 修改默认跳转页面
若依框架 --- 修改默认跳转页面
1635 0
|
SQL JavaScript 前端开发
若依框架代码自动生成器研究----表查询篇
若依框架代码自动生成器研究----表查询篇
1729 0
若依框架 --- echarts 封装
若依框架 --- echarts 封装
849 0
|
JavaScript 前端开发
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
这篇文章介绍了在Vue框架中使用Element UI组件库时,如何通过v-if指令和v-model绑定来控制`el-form-item`的显示与隐藏,以及如何通过设置`readonly`属性让输入框变为只读状态。
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
|
移动开发 前端开发 JavaScript
一些框架获取当前登录用户以及用户信息整理
无论是哪一个框架,获取当前登录用户信息是必不可少的,做一些功能的时候我们肯定得用到当前登陆者信息,所以我就查找了一下几个框架是如何获取当前用户信息,例如在若依框架中,用 this.$store.state.user就可以获取到。当获得的信息是极少时,不足够我们做其他功能时,当然你也可以自己在这个获取的基础上面增加所需信息即可。
一些框架获取当前登录用户以及用户信息整理
|
监控 数据安全/隐私保护
若依修改---功能详解--权限控制,demo超级管理员,可以查看所有功能菜单,zhangsan,登录之后,仅可以查看线索的菜单,不同角色岗位,登录查看的内容不同,若依通过用户管理,角色管理,菜单管理控
若依修改---功能详解--权限控制,demo超级管理员,可以查看所有功能菜单,zhangsan,登录之后,仅可以查看线索的菜单,不同角色岗位,登录查看的内容不同,若依通过用户管理,角色管理,菜单管理控
|
JavaScript 关系型数据库 MySQL
若依框架数据源切换为pg库
若依管理系统切换数据源为pg数据库
3220 1
若依框架数据源切换为pg库

热门文章

最新文章