echarts+pagehelper+bootstrap+table
echarts
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 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": "[email protected]",
"address": "中国 北京",
"remark": "官网：http://www.shuzheng.cn"
},
{
"id": 2,
"username": "shuzheng",
"password": "123456",
"name": "张三",
"sex": 1,
"age": 28,
"phone": 13987654321,
"email": "[email protected]",
"address": "中国 北京",
"remark": "官网：http://www.shuzheng.cn"
}
]
如果开启服务器分页，后端返回数据必须是这种格式。
result.put("rows",pageInfo);
result.put("total",total);//总的数据量
我在上面贴的那张帖子，获取总数据量（也就是数据库中表的行数）的方式是这样：
List users =userService.getUserList();
int total = users.size();
博主的数据量比较小，可以这样，我的数据量太大了，执行这行的时候就一直在运行中…
所以我在 Mapper 里又写了一条获取数据总量的 sql。
@Select("select count(id) from job_info")
int getCount();
这样要好得多。