首页 前端知识 ECharts实现按月统计和MTBF统计

ECharts实现按月统计和MTBF统计

2025-02-24 13:02:04 前端知识 前端哥 629 784 我要收藏

一、数据准备

下表是小明最近一年的旅游记录

create_datecity_namecost_money
2023-10-10 10:10:10北京1499
2023-11-11 11:11:11上海2999
2023-12-12 12:12:12上海1999
2024-01-24 12:12:12北京123
2024-01-24 12:12:12上海223
2024-02-24 12:12:12广州564
2024-02-24 12:12:12北京221
2024-02-24 12:12:12上海442
2024-03-24 12:12:12广州505
2024-04-24 12:12:12上海656
2024-05-14 12:12:12上海766
2024-05-18 12:12:12广州999
2024-05-24 12:12:12上海3244
2024-05-24 12:12:12北京786
2024-06-24 12:12:12广州662
2024-07-24 12:12:12北京532

现在小明有两个需求

  1. 统计自己2024年每个月出去旅游了多少次及消费
  2. 统计自己这一年每个城市旅行的平均间隔时间

二、按月统计

SELECT substring(a.create_date, 6, 2)::int as month,
sum(a.cost_money) cost_money ,
sum(a.travel_count) travel_count from
(
SELECT to_char(create_date, 'YYYY-MM') AS create_date,
sum(CASE WHEN to_char(create_date, 'YYYY') = '2024' THEN cost_money ELSE 0 END) AS cost_money,
count(CASE WHEN to_char(create_date, 'YYYY') = '2024' THEN city_name ELSE null END) AS travel_count
FROM travel
WHERE create_date >= '2024-01-01' AND create_date < '2024-12-31'
GROUP BY to_char(create_date, 'YYYY-MM')
ORDER BY create_date
) a
GROUP BY substring(a.create_date, 6, 2) ::int
ORDER BY month asc
复制

查询结果如下
在这里插入图片描述
现在把这些数据加载到echarts折现柱状图中直观地展示出来

option = {
title : {
text : '2024旅游统计图',
textStyle :{
color:'rgba(15,64,245,1)'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '金额',
min: 0,
axisLabel: {
formatter: '{value} 元'
}
},
{
type: 'value',
name: '次数',
min: 0,
axisLabel: {
formatter: '{value} 次'
}
}
],
series: [
{
name: '消费金额',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' 元';
}
},
data: [
346, 1277,505,656,5795,662,532
]
},
{
name: '旅游次数',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' 次';
}
},
data: [2, 3, 1, 1, 4, 1,1]
}
]
};
复制

展示结果如下图:可以看出5月份的旅游次数最多,消费金额也是5月最多

在这里插入图片描述

三、按城市统计平均旅游间隔时间

1,先用sql查询出每个城市的名字和旅游日期,同时按城市排序

SELECT city_name,create_date FROM travel
order by city_name asc,create_date asc
复制

在这里插入图片描述

2,使用java分组方法将数据按城市分组成一个map

import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.stream.Collectors;;
import java.util.List;
import java.util.Map;
import java.util.ArrayList;
public class Main {
public static void main(String[] args) {
List<TravelData> list = new ArrayList<>();
list.add(new TravelData("北京","2023-10-10 10:10:10"));
list.add(new TravelData("北京","2024-01-24 12:12:12"));
list.add(new TravelData("北京","2024-02-24 12:12:12"));
list.add(new TravelData("北京","2024-05-24 12:12:12"));
list.add(new TravelData("北京","2024-07-24 12:12:12"));
list.add(new TravelData("广州","2024-02-24 12:12:12"));
list.add(new TravelData("广州","2024-03-24 12:12:12"));
list.add(new TravelData("广州","2024-05-18 12:12:12"));
list.add(new TravelData("广州","2024-06-24 12:12:12"));
list.add(new TravelData("上海","2023-11-11 12:12:12"));
list.add(new TravelData("上海","2023-12-12 12:12:12"));
list.add(new TravelData("上海","2024-01-24 12:12:12"));
list.add(new TravelData("上海","2024-02-24 12:12:12"));
list.add(new TravelData("上海","2024-04-24 12:12:12"));
list.add(new TravelData("上海","2024-05-14 12:12:12"));
list.add(new TravelData("上海","2024-05-24 12:12:12"));
// 以上数据可使用数据库sql查询
Map<String, List<TravelData>> maps = list.stream().collect(Collectors.groupingBy(TravelData::getCityName));
maps.forEach((key, dateList) -> {
long timeTotal = 0;
for (int i = 0; i < dateList.size(); i++) {
if(i < dateList.size() - 1){
TravelData nextItem = dateList.get(i + 1);
timeTotal += nextItem.getCreateDate() - dateList.get(i).getCreateDate();
}
}
long avgTime = timeTotal/(dateList.size() - 1);
// 单位为天
System.out.println(key + ",平均间隔 = " + avgTime/(1000*60*60*24));
}
);
}
static class TravelData{
String cityName;
Date createDate;
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
public TravelData(String name,String date){
this.cityName = name;
try{
this.createDate = dateFormat.parse(date);
}catch(Exception e){
System.out.println(e.getMessage());
}
}
public String getCityName(){
return cityName;
}
public Long getCreateDate(){
return createDate.getTime();
}
public String toString(){
return "city:"+cityName + ",create_date:"+dateFormat.format(createDate);
}
}
}
复制

以上java代码输出结果为
在这里插入图片描述
把数据装载到ECharts图表中

option = {
title : {
text : '2024旅游城市MTBF',
textStyle :{
color:'rgba(15,64,245,1)'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis: [
{
type: 'category',
data: ['北京', '上海', '广州'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '间隔',
min: 0,
axisLabel: {
formatter: '{value} '
}
}
],
series: [
{
name: '平均旅游间隔',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' 天';
}
},
data: [
72, 32, 40
]
}
]
};
复制

实际效果如下图:由图可见,小明去上海的频率最高
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/21169.html
标签
评论
还可以输入200
共0条数据,当前/页
发布的文章

C/C | 每日一练 (2)

2025-02-24 13:02:49

Linux性能监控工具汇总

2025-02-24 13:02:48

Python常见面试题的详解16

2025-02-24 13:02:48

QQ登录测试用例报告

2025-02-24 13:02:47

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!