java查询近七日数据功能的实现
前文
在开写之前 先来看实现的思路
1.编写SQL 根据这七天的日期作为条件查询数据库
2.获取Java内每次从今天开始到前六天的日期数据
3.将查询出来数据做逻辑处理 之后返回json字符串
4.前端使用ajax对接接口 将获取的数据对接到echarts表图上面
注意 如果你只是看如何获取近七天的数据只看 1 2 3即可
编写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。
获取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;
}
将查询出来数据做逻辑处理 之后返回json字符串
在java中获取到了最新的近七天的日期 现在将日期和sql结合 在项目中查询出数据来。
现在看接口，先看前两句，第一句是获取近七天数据，我把代码封装到工具类中了，直接调用的，第二句是将生成的日期作为参数，执行查询方法
这里看Mapper foreach 当中collection 传的是map就写map 传list就写list 这里咱们查询方法 默认就写list就行，item是集合中每一个元素进行迭代时的别名， 传的参数名叫什么这个就叫什么就可以。 其他的默认不用管
<select id="sevenDaysCompleteTask" resultType="com.example.demo.bean.Task">
SELECT
COUNT(*) AS 'FinishTheTask',
DATE_FORMAT(start_task_time,'%Y-%m-%d') AS start_task_time
FROM
task
WHERE
is_delete='0'
and
DATE_FORMAT(start_task_time, '%Y-%m-%d') IN
<foreach collection="list" item="sevenDate" separator="," open="(" close=")">
#{sevenDate}
</foreach>
GROUP BY
DATE_FORMAT(start_task_time, '%Y-%m-%d')
ORDER BY
DATE_FORMAT(start_task_time, '%Y-%m-%d') DESC;
</select>写完后我们测试一下看看查询出来的数据是什么样子
用postman测试了一下接口和在数据库查询返回的数据是一样的
那么现在用java将没有的日期和数量进行补全
在开始写之前说一下编写思路
现在知道生成的日期长度是7 而数据库查询出来的数据长度是不一定的 因为只有那个日期有数据的话才能查询出来。
实现思路是 创建一个空的arraylist集合来放我们的封装类，循环创建封装类要创建七个，之后循环拿生成的时间和数据库查询出的时间做比较，如果一致就将查询出来的数据添加进封装类中，如果不一致就设置为0，因为我们要有七天的数据，所以要有七条数据，每一条数据一个封装类，共七个，之后循环的将封装类添加进arraylist集合中。
我不知道大家能不能看明白我所表达的意思 ，如果不明白也没关系，去看代码一句一句理解意思。
下面我上代码 我会一句一句解释意思
第三句创建一个arraylist对象 这个就是我们最后要返回的集合 这个不难理解
第四句 for循环 长度是我们生成日期数组长度 也就是七个
第五句 创建封装类 外圈循环七次 一共会创建七个封装类 一个封装类代表一条数据
第六句 创建boolean类型变量 ，用来判断生成的日期和查询出的日期是否一致，默认为false
第七句 创建小循环 目的是每次小循环都去循环查询出来的日期 一个一个的跟生成出的日期比较，如果一致就将查询出的数据添加进封装类中，并且设置boolean类型为true 不让进入设置0的判断，并结束此次小循环，开始第二次大循环。
第八句 将查询出的数据添加进封装类中
第九句 设置boolean类型为true
第十句 结束此次小循环 break
第十一句 每次大循环都要判断 是否进入了循环内部判断 如果进入就不设置0 如果没有进入就设置为0
第十二句 将每次的封装类添加到list集合中 并最后返回
上面图片有点误差 最后的list要放到外面
@ResponseBody
@RequestMapping("/sevenDaysCompleteTask")
public List<Task> sevenDaysCompleteTask(){
try {
//获取近七天日期
List<String> sevenDate = ConFig.getSevenDate();
//查询近七天完成任务数量方法
List<Task> tasks = healthCommissionService.sevenDaysCompleteTask(sevenDate);
//创建一个arraylist对象
List<Task> list=new ArrayList<>();
//外层七天循环 循环七次
for (int i=0;i<sevenDate.size();i++){
//创建封装类对象 循环七次 创建七个
Task task=new Task();
//将近七天日期添加进封装类中
task.setStart_task_time(sevenDate.get(i));
boolean bool=false;
//创建内循环 根据查询出已有的数量 循环次数
for (int m=0;m<tasks.size();m++){
if (sevenDate.get(i).equals(tasks.get(m).getStart_task_time())){
task.setFinishTheTask(tasks.get(m).getFinishTheTask());
bool=true;
break;
}
}
if (!bool) {
task.setFinishTheTask("0");
}
list.add(task);
}
return list;
}catch (Exception e) {
LOG.error("错误信息", e);
return null;
}
}好了 java的逻辑已经完成了 最后看一下返回的数据
现在成功的吧没有数据的日期也添加到集合并且返回了
前端使用ajax对接接口 将获取的数据对接到echarts表图上面
OK！！ 最后一步 对接echarts图表
打开html 在图表的js里面先创建两个 数组 一个代表时间 一个代表数量 也就是图表当中的这两部分
使用ajax 对接接口 用each循环将返回的json数据添加进两个数组中
将数据添加进去后 把数组放入echarts图表中
这里就结束了 看成品效果
最后放js代码 比较长
<!--完成任务七天数量条形图js-->
<script>
//七天时间变量
var time1=[];
//近七天完成任务数量
var numberofelderly1=[];
$(function () {
$.ajax({
type:"post",
url:"sevenDaysCompleteTask",
async: false,
datatype: "json",
success:function (data){
$.each(data, function(i,item) {
time1.push(item.start_task_time);
numberofelderly1.push(item.finishTheTask);
})
var myChart = echarts.init(document.getElementById('main'));
const CubeLeft = echarts.graphic.extendShape({
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]]
ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
}
})
const CubeRight = echarts.graphic.extendShape({
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]
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
}
})
const CubeTop = echarts.graphic.extendShape({
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]
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
}
})
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)
const MAX = numberofelderly1
const VALUE = numberofelderly1
option = {
// backgroundColor: "#010d3a",
title: {
text: '',
top: 32,
left: 18,
textStyle: {
color: '#00F6FF',
fontSize: 24
}
},
/*调整表格大小*/
grid: {
left: 0,
right: 0,
bottom: '6%',
top: 90,
containLabel: true
},
xAxis: {
type: 'category',
data: time1,
axisLine: {
show: true,
lineStyle: {
color: 'white'
}
},
offset: 20,
axisTick: {
show: false,
length: 9,
alignWithLabel: true,
lineStyle: {
color: '#7DFFFD'
}
},
axisLabel: {
fontSize: 10
}
},
yAxis: {
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: 'white'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 15
},
boundaryGap: ['0', '20%']
},
series: [{
type: 'custom',
renderItem: function(params, api) {
const location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
children: [{
type: 'CubeLeft',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(7,29,97,.6)'
}
}, {
type: 'CubeRight',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(10,35,108,.7)'
}
}, {
type: 'CubeTop',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(11,42,106,.8)'
}
}]
}
},
data: MAX
}, {
type: 'custom',
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
children: [{
type: 'CubeLeft',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#3B80E2'
},
{
offset: 1,
color: '#49BEE5'
}
])
}
}, {
type: 'CubeRight',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#3B80E2'
},
{
offset: 1,
color: '#49BEE5'
}
])
}
}, {
type: 'CubeTop',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#3B80E2'
},
{
offset: 1,
color: '#49BEE5'
}
])
}
}]
}
},
data: VALUE
}, {
type: 'bar',
label: {
normal: {
show: true,
position: 'top',
formatter: (e) => {
switch (e.name) {
case '10kV线路':
return VALUE[0]
case '公用配变':
return VALUE[1]
case '35kV主变':
return VALUE[2]
case '水':
}
},
fontSize: 16,
color: '#38ff9f',
offset: [4, -25]
}
},
itemStyle: {
color: 'transparent'
},
data: MAX
}]
}
myChart.setOption(option);
}
})
})
</script>到此这篇关于java查询近七日数据功能的实现的文章就介绍到这了,更多相关java实现查询数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家带来一篇JVM 方法调用之静态分派(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了Java后台开发之表单提交之前验证的实现代码，非常不错具有参考借鉴价值，需要的朋友参考下吧2017-02-02
SpringBoot集成Nacos实现注册中心与配置中心流程详解
这篇文章主要介绍了SpringBoot集成Nacos实现注册中心与配置中心流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-02-02
关于Spring中@Transactional事务回滚的注意事项
这篇文章主要介绍了关于Spring中@Transactional事务回滚的注意事项,回滚（Rollback）指的是程序或数据处理错误，将程序或数据恢复到上一次正确状态的行为。回滚包括程序回滚和数据回滚等类型,需要的朋友可以参考下2023-05-05
消息总线是一种通信工具，可以在机器之间互相传输消息、文件等，这篇文章主要介绍了SpringCloud Bus消息总线的实现，Spring cloud bus 通过轻量消息代理连接各个分布的节点，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇将介绍使用Post方式提交数据到服务器，由于Post的方式和Get方式创建Web工程是一模一样的，只用几个地方的代码不同，这篇文章主要介绍了使用Post方式提交数据到Tomcat服务器的方法，感兴趣的朋友一起学习吧2016-04-04
Spring中ApplicationContextAware的使用方法详解
ApplicationContextAware 通过它Spring容器会自动把上下文环境对象调用ApplicationContextAware接口中的setApplicationContext方法，这篇文章主要介绍了Spring中ApplicationContextAware的作用,需要的朋友可以参考下2023-03-03
使用动态配置的原因是properties和yaml是写到项目中的，好多时候有些配置需要修改，每次修改就要重新启动项目，不仅增加了系统的不稳定性，也大大提高了维护成本，非常麻烦，且耗费时间2022-09-09
java提取字符串中数字string以及获取字符串中的整数或小数
这篇文章主要给大家介绍了关于java提取字符串中数字string以及获取字符串中的整数或小数的相关资料,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了Spring Cloud入门系列之服务提供者总结,服务提供者使用Eureka Client组件创建 ，创建完成以后修改某文件，具体操作方法及实例代码跟随小编一起看看吧2021-06-06
最新评论