Echarts与SSM框架交互

Echarts与SSM框架交互

1、实现效果：

数据库表结构

2、前端代码:

 <!--宿舍分配情况可视化-->
        <div class="col-sm-12">
            <div class="ibox-content">
                <div class="echarts" id="echarts_dorm"></div>
            </div>
        </div>

3、js代码:

$(function () {
        //宿舍分配情况
        var myChart=echarts.init(document.getElementById('echarts_dorm'));
       myChart.showLoading();//显示loading动画
        var names=[];   //(存放x轴坐标值)
        var nums=[];    //(存放Y坐标值)
        $.ajax({
           url:'/ysms/dorm/dormDistribution',
            type:'post',
            data:{},
            cache:false,
            async:false,
            dataType:'json',
            success:function (result) {
               for (var i in result){
                   names.push(result[i].id);
                   nums.push(result[i].alreadyNumber);
               }
               myChart.hideLoading();   //隐藏加载动画
                myChart.setOption({ //加载数据图表
                    title:{
                        text:'宿舍分配情况'
                    },
                    tooltip:{
                        show:true
                    },
                    legend:{
                        data:['已住人数']
                    },
                    toolbox: {                  //工具栏
                        show: true,               //显示工具栏组件
                        feature: {                //各工具配置项
                            mark: {
                                show: true
                            },
                            dataView: {
                                show: true,           //显示该工具
                                readOnly: false       //是否显示不可编辑(只读)
                            },
                            magicType: {            //动态类型切换
                                show: true,           //是否显示该工具
                                type: ['line', 'bar'] //启用的动态类型
                            },
                            restore: {              //配置项还原
                                show: true            //是否显示该工具
                            },
                            saveAsImage: {          //保存为图片
                                show: true            //是否显示该工具
                            }
                        }
                    },
                    xAxis:{
                        type:'category',
                        data:names
                    },
                    yAxis:{
                        type:'value',
                        axisLabel : {
                            formatter: '{value}人'
                        }
                    },
                    dataZoom : {
                            type:'slider',
                            show : true,
                            realtime: true,
                            start : 10,
                            end : 20
                        },
                    series:[{
                        name:'已住人数',
                        type:'line',
                        data:nums,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,  //开启显示
                                    position: 'top',  //在上方显示
                                    textStyle: {  //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    }]
                });
                $(window).resize(myChart.resize);
            }
        });
   });     

4、controller层：

 @RequestMapping(value = "/dormDistribution",method = {RequestMethod.GET,RequestMethod.POST})
    @ResponseBody
    public List<DormInfo> dormDistribution() throws Exception{

        //查询所有宿舍的分配情况
        List<DormInfo> dormInfos=dormInfoService.getDormNumber();
        return dormInfos;
    }

5、service:

//查询每个宿舍已住人数

   List<DormInfo> getDormNumber();

6、 service实现类

 public List<DormInfo> getDormNumber() {
        return dormInfoDao.getAll();
    }

7、Dao层

  //获取所有宿舍分配编号
    @Select("select * from dorm")
    List<DormInfo> getAll();