Echarts与SSM框架交互
1、实现效果：
数据库表结构
名 | 类型 | 注释 |
|---|---|---|
id | varchar | 宿舍分配编号 |
alreadyNumber | int | 已住人数 |
allNumber | int | 可住人数 |
status | varchar | 是否住满 |
sex | varchar | 男生/女生宿舍 |
2、前端代码:
代码语言：javascript复制 <!--宿舍分配情况可视化-->
<div class="col-sm-12">
<div class="ibox-content">
<div class="echarts" id="echarts_dorm"></div>
</div>
</div>3、js代码:
代码语言：javascript复制$(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层：
代码语言：javascript复制 @RequestMapping(value = "/dormDistribution",method = {RequestMethod.GET,RequestMethod.POST})
@ResponseBody
public List<DormInfo> dormDistribution() throws Exception{
//查询所有宿舍的分配情况
List<DormInfo> dormInfos=dormInfoService.getDormNumber();
return dormInfos;
}5、service:
//查询每个宿舍已住人数
代码语言：javascript复制 List<DormInfo> getDormNumber();6、 service实现类
代码语言：javascript复制 public List<DormInfo> getDormNumber() {
return dormInfoDao.getAll();
}7、Dao层
代码语言：javascript复制 //获取所有宿舍分配编号
@Select("select * from dorm")
List<DormInfo> getAll();
