【springboot+vue健康管理系统】-会员统计折线图

1. 后端dataReportController

 /**
     * 会员数量统计
     * @return
     */
    @GetMapping("/getMemberReport")
    @ApiOperation(value = "会员数量统计")
    public Result getMemberReport(){
        Calendar calendar = Calendar.getInstance();
        calendar.add(Calendar.MONTH,-12);//获得当前日期之前12个月的日期

        List<String> list = new ArrayList<>();
        for(int i=0;i<12;i++){
            calendar.add(Calendar.MONTH,1);
            list.add(new SimpleDateFormat("yyyy.MM").format(calendar.getTime()));
        }

        Map<String,Object> map = new HashMap<>();
        map.put("months",list);

        List<Integer> memberCount = memberService.findMemberCountByMonth(list);
        map.put("memberCount",memberCount);

        return Result.ok(MessageConstant.GET_MEMBER_NUMBER_REPORT_SUCCESS,map);
    }

2. MemberServiceImpl会员模块的实现类
   这里做了一个天数判断，避免不同月份天数不一样的问题

 @Override
    public List<Integer> findMemberCountByMonth(List<String> months) {
        List<Integer> list = new ArrayList<>();
        DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy.MM");
        for (String month : months) {
            // 解析年月字符串为 YearMonth 对象
            YearMonth yearMonth = YearMonth.parse(month, formatter);
            // 假设每个月的最后一天为该月的最后一天，这里以 28 作为默认日
            // 您可能需要根据实际情况调整这个值
            LocalDate startDate = yearMonth.atDay(1); // 获取该月的第一天
            LocalDate endDate = yearMonth.atEndOfMonth(); // 获取该月的最后一天
            // 将日期格式化为 "YYYYMMDD" 格式
            String date = endDate.format(DateTimeFormatter.ofPattern("yyyyMMdd"));
            Integer count = memberMapper.findMemberCountBeforeDate(date);
            list.add(count);
        }
        return list;
    }

3. MemberMapper.xml

 <!--根据日期统计会员数，统计指定日期之前的会员数-->
<select id="findMemberCountBeforeDate" parameterType="string" resultType="int">
  select count(id) from t_member where regTime &lt;= #{value}
</select>

当前，服务端返回格式如图：

4. 前端 vue
   这里采用的是vue npm install echarts --save全局引入

<template>
     <div id="chart1" style="height:500px;"></div>
</template>
  
<script>
import * as echarts from 'echarts';

export default {
    name: 'LineChart',
    mounted() {
        this.initChart();
        window.addEventListener('resize', () => {
            this.myChart.resize();
        });
    },
    data() {
        return {
            // myChart1: null
        };
    },
    methods: {
        initChart() {
            // 基于准备好的dom，初始化echarts实例
            var myChart1 = echarts.init(document.getElementById('chart1'));
            //发送ajax请求获取动态数据
            this.$axios.get("/system/DataReport/getMemberReport").then((res) => {
                myChart1.setOption(
                    {
                        title: {
                            text: '会员数量'
                        },
                        tooltip: {},
                        legend: {
                            data: ['会员数量']
                        },
                        xAxis: {
                            data: res.data.data.months
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '会员数量',
                            type: 'line',
                            data: res.data.data.memberCount
                        }]
                    });
            });
        }
    }
}
</script>

没有怎么改样式，就是导出来，最后感觉丑丑的，后面会再改进页面ui