目标: X轴是巡检记录人员名单,Y轴是巡检次数
Sql语句:select name as "巡检员姓名", count(station) as "巡检次数" from test1 group by name;
查询表数据:
+----+--------+----------+
| id | name | station |
+----+--------+----------+
| 1 | 张三丰 | 兰考站点 |
| 2 | 张三丰 | 兰考站点 |
| 3 | 张三丰 | 兰考站点 |
| 4 | 张三丰 | 焦作站点 |
| 5 | 张三丰 | 洛阳站点 |
| 6 | 李思水 | 洛阳站点 |
| 7 | 李思水 | 兰考站点 |
| 8 | 李思水 | 焦作站点 |
| 9 | 王重庆 | 洛阳站点 |
| 11 | 王重启 | 焦作站点 |
| 12 | 齐继辉 | 洛阳站点 |
+----+--------+----------+
查询结果:
+------------+----------+
| 巡检员姓名 | 巡检次数 |
+------------+----------+
| 张三丰 | 5 |
| 李思水 | 3 |
| 王重启 | 1 |
| 王重庆 | 1 |
| 齐继辉 | 1 |
+------------+----------+
Echart 前台准备
option = {
title : {
text: '出勤人员/出勤次数',
subtext: '由高至低'
},
tooltip : {
trigger: 'axis'
},
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}
}
},
calculable : true,
xAxis : [
{
type : 'value',
boundaryGap : [0, 0.01]
}
],
yAxis : [
{
type : 'category',
data : ['巴西','印尼','美国','印度','中国']
}
],
series : [
{
name:'2011年',
type:'bar',
data:[1, 2, 3, 4, 5]
}
]
};
效果图:
实现思路:
思路清晰,理论可行,开始实践
先写后台代码:
-
先写架构
-
在action层建立getdataAction,用于以后Aajax等请求数据
-
在servlet层建立userservlet,用于处理业务
-
在dao层 建立getdataDao,用于特定的向数据库查询数据
-
建立DTO ( Data Transfer Object )层 , 里面是实体类,主要是 数据传输对象,实现Comparable接口,为了特定TreeSet容器
-
-
DTO层 自底向上
-
建立一个NameAndStationcount类,封装需要属性
-
-
Dao层
-
建立getdataDao类,继承baseDao,
-
写方法
-
public TreeSet<NameAndStationcount> getNameAndStationcountList(){}
-
Getdataservlet层添加getdataservlet类
-
主要用于实现Tree到json字符串转化
-
-
Action层 添加getdataAction类添加一个方法
-
public void getDataForNameAndStationcount()
-
主要调用servlet取得json字符串然后,通过PrintWriter返回给前台
-
经测试 无误
写前台代码
-
配置action
-
Xml中配置action
-
测试没问题http://localhost:8080/pasirb/data/getData1.action
-
-
-
写前台ajax请求
-
Ajax 写完,检测没问题,前台能收到json数据,并将name和stationCount对应存入数组中 X[] Y[] 中
-
-
搭建Echart
-
全部定义全局方法就好!
-