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

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

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);
目录
相关文章
|
12月前
|
JSON 前端开发 数据格式
【前端统计图】echarts实现简单柱状图
【前端统计图】echarts实现简单柱状图
84 0
|
数据可视化 Python
【100天精通Python】Day62:Python可视化_Matplotlib绘图基础,绘制折线图、散点图、柱状图、直方图和饼图,以及自定义图标外观和功能,示例+代码
【100天精通Python】Day62:Python可视化_Matplotlib绘图基础,绘制折线图、散点图、柱状图、直方图和饼图,以及自定义图标外观和功能,示例+代码
196 0
|
定位技术
Echarts实战案例代码(16):geomap地图散点图和label轮播的解决方案
Echarts实战案例代码(16):geomap地图散点图和label轮播的解决方案
246 0
|
数据库 Python
matplotlib绘制饼图之基本配置——万能模板案例
matplotlib绘制饼图之基本配置——万能模板案例
444 0
matplotlib绘制饼图之基本配置——万能模板案例
|
4月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
325 0
|
5月前
|
JavaScript Apache 容器
如何使用ECharts制作一个简单的柱状图
如何使用ECharts制作一个简单的柱状图
66 0
|
6月前
|
数据可视化 数据处理
灯芯柱状图代码解读
灯芯柱状图代码解读
62 0
|
12月前
|
前端开发
【前端统计图】echarts多条折线图和横柱状图实现
【前端统计图】echarts多条折线图和横柱状图实现
105 0
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏Echarts高级开发散点图实战案例分析(地图扩展插件bmap.min.js、散点图、百度地图控件、柱图、涟漪动图、条件判断颜色)
数据可视化大屏Echarts高级开发散点图实战案例分析(地图扩展插件bmap.min.js、散点图、百度地图控件、柱图、涟漪动图、条件判断颜色)
587 0