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

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

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

🎈前端实现

采用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)

后端返回的结果：[1,1,2,2,3,4,4]

展示结果：

🍚总结

大功告成，撒花致谢🎆🎇🌟，关注我不迷路，带你起飞带你富。
Writted By 知识浅谈