echarts+pagehelper+bootstrap+table

echarts

<div id="place" style="width: 500px;height: 400px;"></div>

function drawAbilityChart(id, list) {
    var newList=[];
    for(var i = 0; i < list.length; i++){
        var jobImg = new Object();
        jobImg.name = list[i].label;
        jobImg.value = i+201 + 1000;
        console.log(jobImg);
        newList.push(jobImg);
    }
    var myChart = echarts.init(document.getElementById(id));
    myChart.setOption(
        {
            title: {
                text: "岗位能力需求",
                link: '#',
                subtext: '牛逼不',
                sublink: 'http://hqweay.cn',
            },
            tooltip: {},
            series: [{
                type: 'wordCloud',
                gridSize: 20,
                sizeRange: [12, 50],
                rotationRange: [0, 0],
                shape: 'circle',
                textStyle: {
                    normal: {
                        color: function () {
                            return 'rgb(' + [
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160)
                            ].join(',') + ')';
                        }
                    },
                    emphasis: {
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                data: newList   //展示数据
            }]
        }
    );

    return true;
}

使用方法很简单，只需要在网页上放一个绘制图表的 div（得定好大小），然后调用 echarts 的函数即可。

引入之类的不提。

官网上的示例只给了 Option，复制过来放到 setOption() 即可。

上面是我封装的一个函数，真正需要自己做的其实只有 data（需要为 json 格式，我在上面注释了那一行。）。

pagehelper

一款 Mybatis 分页插件。

Spring Boot 使用。

• 引入pagehelper-spring-boot-starter

• yml配置

  pagehelper:
  helperDialect: mysql
  reasonable: true
  supportMethodsArguments: true
  params: count=countSql

使用方式是在需要分页查询操作之前执行 PageHelper的方法。

例如。

PageHelper.startPage(pageNumber,pageSize);
List<JobInfo> pageInfo = jobInfoMapper.selectJobInfo();

PageHelper 设置了查询的页数，该页的数据量。

（PageHelper 还有许多其他的方法来设置查询的方式，上面这个只是一种）

当执行下面的查询操作时，PageHelper 会在查询的 SQL 代码后面添加相应的分页数据。

selectJobInfo() 里的 SQL 语句一般是 select * from 表，PageHelper 就会在该语句后面添加 limit * 什么什么的…

真正执行的 sql 语句就会是类似于 select * from 表 limit 10…. 之类的。

所以这里出现了一个问题！

在 mybatis 里设置 sql 语句的时候，sql 后面加不加分号都是可以的。

要使用分页插件的话，就必须不能加分号。

毕竟 pagehelper 的工作方式就是在原 sql 后面添加一些值嘛…

如果有分号，实际执行的 sql 就变成了

select * from 表;limit 10….

这样会出错哦。

bootstrap table

前面的分页插件就是为了用来和该插件配合的。

SpringBoot+BootStrapTable+PageHelper用户新增,删除,修改

这个帖子写的好。

核心代码。

      $("#dataGrid").bootstrapTable({  
            method:"POST",  
            //极为重要，缺失无法执行queryParams，传递page参数  
            contentType : "application/x-www-form-urlencoded",  
            dataType:"json",  
            url:'/user/pageInfo',   
            queryParams:queryParam, //规定取数据的方式 
            pagination:true,//显示分页条：页码，条数等  
            striped:true,//隔行变色  
            pageNumber:1,//首页页码  
            pageSize:10,//分页，页面数据条数  
            sidePagination:"server",//在服务器分页  
            height:tableModel.getHeight(),  
            toolbar:"#toolbar",//工具栏  
            columns : [{  
                checkbox:"true",  
                field : "box"  
            },  {  
                title : "ID",  
                field : "id",  
                visible: false  
            }, {  
                title : "账户",  
                field : "account"  
            }],  
            search : true,//搜索  
            searchOnEnterKey : true,  
            showRefresh : true,//刷新  
            showToggle : true//  

        });  
    function queryParam(params){  
        var param = {  
                limit : this.limit, // 页面大小  
                offset : this.offset, // 页码  
                pageNumber : this.pageNumber,  
                pageSize : this.pageSize  
        };  
        return param;  
    }  

queryParam() 这个函数比较重要。

这里与 Pagehelper 配合，只向后端传送了 两个数据，pageNumber，pageSize。还可以设置排序方式什么的…

sortOrder: 'desc',//排序方式

这些得在 bootstrapTable() 里设置。

发现如果不开启后端分页，下面这种格式的数据就可以解析。

[
    {
        "id": 1,
        "username": "shuzheng",
        "password": "123456",
        "name": "张三",
        "sex": 1,
        "age": 28,
        "phone": 13987654321,
        "email": "469741414@qq.com",
        "address": "中国 北京",
        "remark": "官网：http://www.shuzheng.cn"
    },
    {
        "id": 2,
        "username": "shuzheng",
        "password": "123456",
        "name": "张三",
        "sex": 1,
        "age": 28,
        "phone": 13987654321,
        "email": "469741414@qq.com",
        "address": "中国 北京",
        "remark": "官网：http://www.shuzheng.cn"
    }
]

如果开启服务器分页，后端返回数据必须是这种格式。

result.put("rows",pageInfo);
result.put("total",total);//总的数据量

我在上面贴的那张帖子，获取总数据量（也就是数据库中表的行数）的方式是这样：

List<User> users =userService.getUserList();  
int total = users.size();

博主的数据量比较小，可以这样，我的数据量太大了，执行这行的时候就一直在运行中…

所以我在 Mapper 里又写了一条获取数据总量的 sql。

@Select("select count(id) from job_info")
int getCount();

这样要好得多。