Java realizes the function of querying data for the past seven days
How to use echarts connected to a table of FIG address
to achieve a table map page docking So how how to use data patience to read! ! !
This time, I will use the table diagram in the lower right corner as an example.
The table diagram below is sorted by time and is dynamic. Each time you get the date from today to the previous six days, there are seven days. The above data represents how much data is in each day.
Let's look at the idea of realization before writing
1. Write SQL to query the database based on the seven-day date as a condition
. 2. Get the date data from today to the previous six days in JAVA.
3. The queried data will be processed logically and then the json string will be returned
. 4. The front end uses ajax for docking The interface connects the acquired data to the echarts table map
! Note that if you just look at how to get the data for the last seven days, just look at 1 2 3
1. Write SQL to query the database based on the seven-day date as a condition.
Now I have a look at what my table structure looks like.
Here you can see that there are a total of 7 data, a total of 3, 26, 4, 25, 1 23 The number of data,
then we query it out according to the daily query and display the number
of data on the 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;
The effect diagram of the query,
so let’s first explain the sql. I am the time in the database with hours, minutes and seconds, and the query condition date is without hours, minutes and seconds. This sentence means that the date format is converted into year, month and day to remove the hours, minutes and seconds.
DATE_FORMAT( start_task_time, '%Y-%m-%d' )
The middle one is the field to be queried.
Now let’s take a look at the SQL. Let’s take a look at the first part
. The first part of sql is a good understanding. The first is to query the entire table and there are several data. The second is to query the time AS means The field is aliased.
The data queried now is the entire table with a total of 8 data. The time of the first data is 2020-10-25.
Now look at the second paragraph of SQL
where DATE_FORMAT( start_task_time,'%Y-%m-%d') It is the condition to be queried. We query based on the date condition. Since it is a query for seven days at a time, we need to use IN with multiple conditions in one field.
The following group by grouping each date condition queried the time to group and display a total of several.
The last order by sort
OK! Now that you have finished reading sql, look at the final query result. Now I find that if there is data on a certain day, it can be queried and grouped, and if there is no data, it cannot be queried. But we query the data for the past seven days, and if there is no value, it will be filled with 0.
2. Get the date data from today to the previous six days in JAVA. To
complete the remaining data without dates, we need our JAVA logic to implement it.
First of all, the sql statement condition just now is written by ourselves. In java, we can't write by hand to dynamically get the date data from today to the previous six days for seven days.
Then use the JAVA code to get the date of the last seven days
//获取近七天日期
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. After the queried data is logically processed, the json string is returned
. The latest nearly seven-day date is obtained in java. Now the date and sql are combined to query the data in the project.
Now let’s look at the interface. Let’s look at the first two sentences. The first sentence is to obtain data for nearly seven days. I encapsulated the code in a tool class and called it directly. The second sentence takes the generated date as a parameter.
See Mapper for the query method . In the foreach collection, if you pass a map, you can write a map. If you pass a list, you can write a list. Here, the default query method is to write a list. The item is the alias of each element in the collection when iterating. The parameter name passed is what you call it. . Don't care about other defaults
<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>
After writing, we test to see what the data queried looks like
. Tested with postman, the interface and the data returned by the database query are the same.
So now use java to complete the missing dates and numbers.
Before you start writing, talk about the idea of writing.
Now I know that the length of the generated date is 7 and the length of the data queried by the database is not necessarily because it can only be queried if there is data on that date. , The realization idea is to create an empty arraylist collection to put our package classes, and create seven package classes in a loop. Then the loop will compare the generated time with the time out of the database query, and if they are consistent, add the queried data In the package class, if it is inconsistent, set it to 0, because we need seven days of data, so there are seven pieces of data, one package class for each data, a total of seven, and then the package class is added to the arraylist collection cyclically. I don't know if you can understand what I mean. If you don't understand, it doesn't matter. Look at the code sentence by sentence to understand the meaning.
Next, I will explain the meaning of the code sentence by sentence. The
third sentence creates an arraylist object. This is the collection we will return. It is not difficult to understand. The
fourth sentence for loop length is the length of the array of dates we generate, which is seven. The
fifth sentence creates a package. The outer circle of the class loops seven times, a total of seven encapsulated classes will be created. One encapsulated class represents a piece of data. The
sixth sentence creates a boolean variable to determine whether the generated date is consistent with the query date. The default is false. The
seventh sentence creates a small loop. The purpose is to cycle the query date and compare it with the generated date one by one each time in the small loop. If they are consistent, add the query data to the package class, and set the boolean type to true to prevent entering the judgment of setting 0 , And end this small cycle and start the second big cycle.
The eighth sentence adds the queried data to the package class. The
ninth sentence sets the boolean type to true. The
tenth sentence ends the small
loop break. The eleventh sentence must determine whether it has entered the loop or not. Do not set 0, if it is not entered, set it to 0. The
twelfth sentence will add each package class to the list collection and return at the end
Well, the logic of java has been completed. Finally, take a look at the returned data.
Now it is successful. The date without data is also added to the collection and returned.
4. The front end uses the ajax docking interface to connect the acquired data to the echarts table map,
OK! ! The last step is to dock the echarts chart.
Open the html and create two arrays in the js of the chart. One represents the time and the other represents the number, which is the two parts of the chart.
Use the ajax docking interface to add the returned json data into the two arrays with each loop.
After adding the data, put the array into the echarts chart
It's over here to see the finished effect
Finally, the js code is longer
<!--完成任务七天数量条形图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>