1 数据以折线图的形式展示在页面上,需要将每个省份的人数通过ajax传递到页面
2 如何将数据响应回页面呢? 通过SQL语句查询 以省份分组获取数据
3 那查询之后的数据该用什么存储呢? 首先想到的是另外定义一个DTO包含 省份,数量两个属性刚好对应查询结果,这样写似乎也挺好的
然而吾有一问:如果有很多个类似的查询需求呢?难道要每一个查询都创建一个DTO吗? 创建出来的DTO只有收参的时候使用一次,这样是不是在浪费各种资源!!!!
emmm 说得有道理 ,
今天就来用Map直接取代对象形式的收参
注意事项:
查询的时候给数据书写的别名为value 在此处通过map.get()方法获取value的值 存储到List集合中
打印一下获取到的map是不是我想要的 看到了才放心 (截取一部分数据)
4. 通过controller层调用业务层方法将数据响应回页面`
5. 书写折线图相关页面代码
先书写一个div块
<div id="proCount" style="width:900px;height:300px;"></div>
借助ajax发送请求获取数据
var ProChart = echarts.init(document.getElementById("proCount"));
$.ajax({
url:"${pageContext.request.contextPath}/user/getProCount",
type:"post",
dataType:"json",
success:function(result) {
//指定图标的配置项和数据
console.log(result)
var option = {
//图标标题
title: {
text: "持明法洲各省份人数"
},
//工具栏 暂时没有用到
tooltip: {
},
//数据所代表的含义
legend: {
data: ['数量']
},
//X轴 坐标的名称
xAxis: {
data: ['云南', '内蒙古', '北京', '台湾', '吉林', '四川', '天津', '宁夏', '安徽', '山东',
'山西', '广东', '广西', '新疆'
, '江苏', '江西', '河北', '河南', '浙江', '海南', '湖北', '湖南', '澳门', '甘肃', '福建'
, '西藏', '贵州', '辽宁', '重庆', '陕西', '青海', '香港', '黑龙江']
},
//y轴单位程度根据代码自动生成
yAxis: {
},
//给X轴赋值
series: [{
name: '数量',
//line 为折线图 bar为柱状图 pie为饼状图
type: 'line',
data: result
}]
};
ProChart.setOption(option);
}
});
这次是用map收参主要是替换DTO方式接收查询结果。