对于SpringMvc如何生成json数据,需要根据所使用的spring版本来确定所用的jar包.
我这里使用的是Spring3
所以所导入的jar包为
jackson-mapper-asl-*.jar
jackson-core-asl-*.jar
如果是之前的版本spring,包应该是这三个
下面直接上代码:
Web.xml
控制层
@RequestMapping(value = "/selectElevatorByBrand", produces = "application/json;charset=UTF-8")
@ResponseBody
public List<Brand> selectElevatorByBrand( HttpServletRequest request,
HttpSession session) {
elevatorList = elevatorService.selectAllElevatorByAll();
Map<String, Integer> map2 = new HashMap<>();
Map<String, List<Elevator>> map = new HashMap<>();
for(Elevator elevator : elevatorList) {
String key = elevator.getBrandName();
if(map.containsKey(key)) {
//map中存在以此id作为的key,将数据存放当前key的map中
map.get(key).add(elevator);
} else {
//map中不存在以此id作为的key,新建key用来存放数据
List<Elevator> elevatorList2 = new ArrayList<>();
elevatorList2.add(elevator);
map.put(key, elevatorList2);
}
}
List<Brand> brandList = new ArrayList();
Iterator<Entry<String, List<Elevator>>> iter = map.entrySet().iterator();
while (iter.hasNext()) {
Map.Entry entry = (Map.Entry) iter.next();
System.out.println("[Key] : " + entry.getKey() + " [Value] : " +
entry.getValue()
);
List<Elevator> elevatorList2 = (List<com.em.po.Elevator>) entry.getValue();
System.out.println(elevatorList2.size());
Brand b = new Brand();
b.setName(""+entry.getKey());
b.setSumNum(elevatorList2.size());
brandList.add(b);
}
return brandList;
}
网页页面中
<div class="admin"
style="text-align: center;line-height: 800px;font-size: 36px;font-family: '楷体'">
<div id="main"
style="width: 600px;height:400px; border:2px solid red;"></div>
</div>
<script>
$(document)
.ready(
function() {
$
.ajax({
dataType : "json",
type : "post",
url : "/elevatorMaintenanceSystem/selectElevatorByBrand",
success : function(data) {
console.log(data);
var myChart = echarts.init(document
.getElementById('main'));
var butt = eval(data);//这个可以将字符串转化为变量对象
var brandName=[];
var brandNum=[];
for ( var i = 0; i < butt.length; i++) {
console.log(butt[i]);
brandName[i]=butt[i].name;
brandNum[i]=butt[i].sumNum;
}
// 指定图表的配置项和数据
var option = {
title : {
text : '各电梯品牌使用数量可视化',
},
tooltip : {
show : true,
trigger : 'item' //axis-坐标轴触发 item--数据条目触发
},
legend : {
data : [ '销量' ],
show : true
},
xAxis : {
position : 'bottom', //top
data : brandName
},
yAxis : {
show : true,
position : 'left' //left
},
series : [ {
name : '销量', //要和legend中的data对应起来
type : 'bar',
data : brandNum
} ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
});
});
// 基于准备好的dom,初始化echarts实例
</script>