Echarts统计用户近七日走量趋势：前后端实现

🍁 作者：知识浅谈，CSDN签约讲师，CSDN博客专家，华为云云享专家，阿里云专家博主
📌 擅长领域：全栈工程师、爬虫、ACM算法
💒 公众号：知识浅谈
🔥网站：vip.zsqt.cc

🤞统计用户近七日走量趋势：前后端实现🤞

🎈前端实现

采用Echarts+Vue实现用户走势的折线图

Echarts组件代码在这：Ecarts在Vue中使用

使用代码：

<template><div><MyEchart :options="optionsUser" style="height: 300px"/></div>
</template>
<script setup name="Index">
import { onMounted, reactive } from 'vue'
import moment from "moment" 
import MyEchart from "@/components/Echarts/MyEchart"
const optionsUser = reactive({title: {text: '近七日用户统计',textStyle: {fontSize: 18 // 设置标题字体大小为 16px}},tooltip: {trigger: 'axis'},toolbox: {feature: {saveAsImage: {},// 可以添加其他工具按钮...}},xAxis: {type: 'category',boundaryGap: false,data: []},yAxis: {type: 'value'},series: [{smooth: true,type: 'line',data: []}]
})const getUserCount = ()=>{const currentDate  = moment();console.log("sad");for (var i = 7-1; i >= 0; i--) {let tmp = moment(currentDate).subtract(i, 'days').format('MM/DD');optionsUser.xAxis.data.push(tmp);}//设定y值 下边我获取的是用户数量最近7天的变化趋势，可自行修改countUserNumber().then((result) => {optionsUser.series[0].data = result.data;}).catch((err) => {ElMessage.error("用户统计异常");});}getUserCount()
</script>

请求后端的方法

在api/system/user.js中

// 统计最近7天用户的数量变化
export function countUserNumber() {return request({url: '/system/user/countUserNumber',method: 'get'})
}

🎈后端代码实现

@GetMapping("/countUserNumber")
public AjaxResult countUserNumber()
{LocalDate currentDate = LocalDate.now();TreeMap<String, Long> map = new TreeMap<>(); //用来记录每个日期对应的用户数量SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");Long all = userService.countUser(); //当前时间最终的人数List<CountPo> countGroup = userService.countUserGroupTime(); //分组查询最近七天每天增加的人数for (CountPo countPo : countGroup) {map.put(sdf.format(countPo.getDate()),countPo.getCount()); //先把这个map记录每天增加的人数 ，一会下边用于减去这个值就是前一天的总人数}Long tmp;for (int i = 0; i <7; i++) {String dateStr = currentDate.minusDays(i).format(DateTimeFormatter.ofPattern("yyyy-MM-dd"));if(map.containsKey(dateStr)){  //这个map中如果有值，表明今天增加了人员，昨天就应该减去今天的新增的tmp = map.get(dateStr);}else tmp=0L;map.put(dateStr,all);all-=tmp;}return AjaxResult.success(new ArrayList<>(map.values()));
}

countUser对应的sql语句

select count(*)
from share.sys_user;

countUserGroupTime对应的sql语句

select DATE(create_time) as date,count(*) as count
from share.sys_user
where DATE(create_time)> (CURRENT_DATE - interval 7 day)
group by DATE(create_time)