第八次课：统计图和轮播图

统计图

需求

统计在线教育项目中，每一天有多少注册人数

思路

从会员表中查出每天的注册人数生成数据存入到统计表中。然后用ECharts把展示到前端页面

SELECT
	COUNT(*)
FROM
	edu_member uc
WHERE
	DATE(uc.edu_create) = '2023-05-10'

定时任务

每天凌晨的时候，把前一天的注册人数自动统计好 生成数据保存到统计表中

• 创建定时任务类，使用cron表达式

@Component
public class ScheduledTask {

    @Autowired
    private EduStatisticsDailyService dailyService;

    /**
     * 每天凌晨0点过一分执行定时
     */
    @Scheduled(cron = "0 1 0 * * ?")
    public void task2() {
        // 获取当前日期前一天的日期
        LocalDate localDate = LocalDate.now().minusDays(1);
        String day = localDate.toString();
        dailyService.registerCount(day);

    }
}

• 在启动类上添加注解

@EnableScheduling
public class StarterApp {

• 在线生成cron表达式
  http://cron.qqe2.com/

简介

ECharts是百度的一个项目，后来百度把Echart捐给apache，用于图表展示，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

官方网站：https://echarts.apache.org/handbook/zh/get-started/

特别注意：不能在created里使用。要在页面渲染成功后使用，也就是在mounted中可以用

先安装

npm install echarts --save

<template>
<div id="main" style="width: 400px;height: 300px" ></div>
</template>

<script>

import * as echarts from 'echarts';
export default {
    data(){
        return{}
    },
    methods:{
        

    },
    mounted(){
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
            }
        ]
        };

        option && myChart.setOption(option);
      
    }
}

</script>

<style>

</style>

轮播图管理

后台管理端添加好轮播图信息，前台首页广告位的地方随之更新。

预期效果：