java实现查询近七天数据功能
java 实现查询近七天数据功能
接上⼀篇 如何使⽤echarts表图
实现了页⾯的表图 那么如何对接数据 如何使⽤ 耐⼼看完
这次就以右下⾓这⼀个表图做⽰范
这个表图的下⾯是按时间排序的 并且是动态的 每次获取从今天到前六天的⽇期 共七天 上⾯的数据代表每⼀天的数据量是多少
在开写之前先来看实现的思路
1.编写SQL 根据这七天的⽇期作为条件查询数据库
2.获取JAVA内每次从今天开始到前六天的⽇期数据
3.将查询出来数据做逻辑处理 之后返回json字符串
4.前端使⽤ajax对接接⼝ 将获取的数据对接到echarts表图上⾯
!注意 如果你只是看如何获取近七天的数据只看 1 2 3即可
1.编写SQL 根据这七天的⽇期作为条件查询数据库
说了实现思路 那么现在看⼀眼我的表结构是什么样⼦的
这⾥看到⼀共是7条数据 ⼀共是 3条26号 4条25号 1条23号的数据
那么我们查询出来 按每⽇查询 有数据的显⽰⼏条数量
上SQL
SELECT
COUNT( * ) AS 'count',
DATE_FORMAT( start_task_time, '%Y-%m-%d' ) AS date
FROM
task
WHERE
DATE_FORMAT( start_task_time, '%Y-%m-%d' ) IN ( '2020-10-27', '2020-10-26', '2020-10-25', '2020-10-24', '2020-10-23', '2020-10-22', '2020-10-21' ) GROUP BY
DATE_FORMAT( start_task_time, '%Y-%m-%d' )
ORDER BY
DATE_FORMAT( start_task_time, '%Y-%m-%d' ) DESC;
查询出来的效果图
那么现在先来讲解⼀下sql 我是数据库⾥⾯时间是带了时分秒 ⽽查询的条件⽇期是不带时分秒的 这句话的意思是⽇期格式转换 转换成年⽉⽇ 去掉时分秒
DATE_FORMAT( start_task_time, '%Y-%m-%d' )
中间的这个是要查询的字段
现在把SQL拆开来看 先看第⼀部分
sql的第⼀部分很好理解 第⼀个是查询出整表共有⼏条数据 ,第⼆个是查询出时间 AS的意思是字段取别名 。
现在查询出来的数据是 整表共8条数据 第⼀条的数据的时间是2020-10-25⽇
现在来看SQL的第⼆段
where DATE_FORMAT( start_task_time, ‘%Y-%m-%d’ ) 是要查询的条件我们根据⽇期条件进⾏查询 由于是⼀次查询七天的 所以需要使⽤ IN ⼀个字段多个条件。
后⾯的group by 分组 每⼀个⽇期条件查询出来的时间 进⾏分组 并显⽰共有⼏条 。
最后⼀个order by 排序
OK! 现在看完了sql 来看最后的查询结果 。现在发现如果哪⼀天有数据的话是可以查询出来并分组的,如何没有数据是查询不出来的 。但是我们查询出近七天的数据,如果没有值就补全为0。
2.获取JAVA内每次从今天开始到前六天的⽇期数据
补全剩下没有⽇期的数据,这⾥就需要我们JAVA逻辑来实现了。
⾸先刚刚的sql语句条件是⾃⼰写的 在java⾥⾯我们可不能⼿写要每次都动态的获取从今天开始到前六⽇的⽇期数据共七天。
那么上JAVA代码 获取近七天的⽇期
//获取近七天⽇期
public static List<String> getSevenDate() {
List<String> dateList = new ArrayList<>();
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
for (int i = 0; i < 7; i++) {
Date date = DateUtils.addDays(new Date(), -i);
String formatDate = sdf.format(date);
dateList.add(formatDate);
}
return dateList;
}
3.将查询出来数据做逻辑处理 之后返回json字符串
在java中获取到了最新的近七天的⽇期 现在将⽇期和sql结合 在项⽬中查询出数据来。
supplies现在看接⼝,先看前两句,第⼀句是获取近七天数据,我把代码封装到⼯具类中了,直接调⽤的,第⼆句是将⽣成的⽇期作为参数,执⾏查询⽅法
这⾥看Mapper foreach 当中collection 传的是map就写map 传list就写list 这⾥咱们查询⽅法 默认就写list就⾏,item是集合中每⼀个元素进⾏迭代时的别名, 传的参数名叫什么这个就叫什么就可以。 其他的默认不⽤管
<lect id="venDaysCompleteTask" resultType="ample.demo.bean.Task">
SELECT
COUNT(*) AS 'FinishTheTask',
DATE_FORMAT(start_task_time,'%Y-%m-%d') AS start_task_time
FROM
assumes
task
WHERE
is_delete='0'
and
DATE_FORMAT(start_task_time, '%Y-%m-%d') IN
<foreach collection="list" item="venDate" parator="," open="(" clo=")">
#{venDate}
</foreach>
GROUP BY
DATE_FORMAT(start_task_time, '%Y-%m-%d')
ORDER BY
DATE_FORMAT(start_task_time, '%Y-%m-%d') DESC;
</lect>
写完后我们测试⼀下看看查询出来的数据是什么样⼦
拼接英文⽤postman测试了⼀下接⼝和在数据库查询返回的数据是⼀样的
那么现在⽤java将没有的⽇期和数量进⾏补全
在开始写之前说⼀下编写思路
现在知道⽣成的⽇期长度是7 ⽽数据库查询出来的数据长度是不⼀定的 因为只有那个⽇期有数据的话
才能查询出来, 实现思路是 创建⼀个空的arraylist集合来放我们的封装类,循环创建封装类要创建七个,之后循环拿⽣成的时间和数据库查询出的时间做⽐较,如果⼀致就将查询出来的数据添加进封装类中,如果不⼀致就设置为0,因为我们要有七天的数据,所以要有七条数据,每⼀条数据⼀个封装类,共七个,之后循环的将封装类添加进arraylist集合中。我不知道⼤家能不能看明⽩我所表达的意思 ,如果不明⽩也没关系,去看代码⼀句⼀句理解意思。
下⾯我上代码 我会⼀句⼀句解释意思
第三句创建⼀个arraylist对象 这个就是我们最后要返回的集合 这个不难理解
第四句 for循环 长度是我们⽣成⽇期数组长度 也就是七个
第五句 创建封装类 外圈循环七次 ⼀共会创建七个封装类 ⼀个封装类代表⼀条数据
第六句 创建boolean类型变量 ,⽤来判断⽣成的⽇期和查询出的⽇期是否⼀致,默认为fal
第七句 创建⼩循环 ⽬的是每次⼩循环都去循环查询出来的⽇期 ⼀个⼀个的跟⽣成出的⽇期⽐较,如果⼀致就将查询出的数据添加进封装类中,并且设置boolean类型为true 不让进⼊设置0的判断,并结束此次⼩循环,开始第⼆次⼤循环。
第⼋句 将查询出的数据添加进封装类中
heva第九句 设置boolean类型为true
第⼗句 结束此次⼩循环 break
第⼗⼀句 每次⼤循环都要判断 是否进⼊了循环内部判断 如果进⼊就不设置0 如果没有进⼊就设置为0
第⼗⼆句 将每次的封装类添加到list集合中 并最后返回
上⾯图⽚有点误差 最后的list要放到外⾯
@ResponBody
@RequestMapping("/venDaysCompleteTask")
public List<Task> venDaysCompleteTask(){
try {
/
/获取近七天⽇期
List<String> venDate = SevenDate();
//查询近七天完成任务数量⽅法
List<Task> tasks = healthCommissionService.venDaysCompleteTask(venDate);
//创建⼀个arraylist对象
List<Task> list=new ArrayList<>();
//外层七天循环循环七次
for (int i=0;i<venDate.size();i++){
//创建封装类对象循环七次创建七个
Task task=new Task();
//将近七天⽇期添加进封装类中
task.tStart_task_(i));
boolean bool=fal;
//创建内循环根据查询出已有的数量循环次数
for (int m=0;m<tasks.size();m++){
if ((i).(m).getStart_task_time())){
task.(m).getFinishTheTask());
bool=true;
break;
}
}
if (!bool) {
task.tFinishTheTask("0");
}
list.add(task);
}
return list;
}catch (Exception e) {
<("错误信息", e);
return null;
}
}
好了 java的逻辑已经完成了 最后看⼀下返回的数据
现在成功的吧没有数据的⽇期也添加到集合并且返回了
4.前端使⽤ajax对接接⼝ 将获取的数据对接到echarts表图上⾯
OK!! 最后⼀步 对接echarts图表
打开html 在图表的js⾥⾯先创建两个 数组 ⼀个代表时间 ⼀个代表数量 也就是图表当中的这两部分
kagome使⽤ajax 对接接⼝ ⽤each循环将返回的json数据添加进两个数组中
将数据添加进去后 把数组放⼊echarts图表中
这⾥就结束了 看成品效果
department简写最后放js代码 ⽐较长
<!--完成任务七天数量条形图js-->
<script>
//七天时间变量
//七天时间变量
var time1=[];
//近七天完成任务数量
var numberofelderly1=[];
$(function () {
$.ajax({
type:"post",
url:"venDaysCompleteTask",
async: fal,
datatype: "json",
success:function (data){
$.each(data, function(i,item) {
time1.push(item.start_task_time);
numberofelderly1.push(item.finishTheTask);
})
var myChart = echarts.ElementById('main'));
const CubeLeft = dShape({
shape: {
布列瑟农歌词
x: 20,
y: 10
},
buildPath: function(ctx, shape) {
const xAxisPoint = shape.xAxisPoint
const c0 = [shape.x, shape.y]
const c1 = [shape.x - 9, shape.y - 9]
const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
const c3 = [xAxisPoint[0], xAxisPoint[1]]
})
awful的反义词const CubeRight = dShape({
shape: {
x: 10,
y: 10
},
buildPath: function(ctx, shape) {
const xAxisPoint = shape.xAxisPoint
const c1 = [shape.x, shape.y]
const c2 = [xAxisPoint[0], xAxisPoint[1]]
const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
const c4 = [shape.x + 18, shape.y - 9]
})stacking
const CubeTop = dShape({
shape: {
x: 0,
y: 0
},
buildPath: function(ctx, shape) {
const c1 = [shape.x, shape.y]
const c2 = [shape.x + 18, shape.y - 9]
const c3 = [shape.x + 9, shape.y - 18]
const c4 = [shape.x - 9, shape.y - 9]
give in
})
const MAX = numberofelderly1
const VALUE = numberofelderly1
option = {
// backgroundColor: "#010d3a",
title: {
text: '',