谷粒学院16万字笔记+1600张配图(十八)——统计分析

阳光穿透心脏的1/2处 2023-10-02 21:26 24阅读 0赞

> 项目源码与所需资料  
> 链接：https://pan.baidu.com/s/1azwRyyFwXz5elhQL0BhkCA?pwd=8z59  
> 提取码：8z59

#### 文章目录 ####

*  demo18-统计分析
 *   *  1.需求描述
     *  2.新建统计微服务
     *   *  2.1创建子子模块service\_statistics
         *  2.2创建数据表
         *  2.3配置application.properties
         *  2.4生成代码
         *  2.5创建启动类
         *  2.6配置nginx
         *  2.7自动填充
     *  3.查询某天注册人数的接口
     *   *  3.1分析
         *  3.2控制层
         *  3.3业务层接口
         *  3.4业务层实现类
         *  3.5持久层接口
         *  3.6编写映射
         *  3.7编写接口
         *  3.8进行远程调用并向统计表添加数据
         *   *  3.8.1控制层
             *  3.8.2业务层接口
             *  3.8.3业务层实现类
         *  3.9测试
         *  3.10完善
     *  4.查询某天注册人数前端
     *   *  4.1添加路由
         *  4.2创建页面
         *  4.3在api中定义方法
         *  4.4在api中定义方法
         *  4.5测试
     *  5.整合定时任务
     *   *  5.1需求
         *  5.2添加注解
         *  5.3cron表达式
         *  5.4创建工具类
         *  5.2创建定时任务类
     *  6.ECharts入门(柱状图)
     *   *  6.1创建页面
         *  6.2引入ECharts
         *  6.3添加div标签
         *  6.4编写js代码渲染图表
         *  6.5测试
     *  7.项目中集成ECharts
     *   *  7.1安装ECharts
         *  7.2在show.vue页面创建组件
         *  7.3暂时显示临时数据
     *  8.图标显示后端
     *   *  8.1控制层
         *  8.2业务层接口
         *  8.3业务层实现类
         *  8.4测试
     *  9.图标显示前端
     *   *  9.1在api中定义方法
         *  9.2调用api中的方法
         *  9.3测试
         *  9.4其它样式

## demo18-统计分析 ##

### 1.需求描述 ###

统计我们的在线教育项目中每天有多少注册人数,把统计出来的数据存储到statistics\_daily表(统计表),并使用图标显示出来:

1.既然要统计每天有多少注册人数,那就需要查ucenter\_member表(用户表)。从用户表中查询某一天新增数据的数量,得到的即是该天注册人数,但是用户表存储的数据的gmt\_create字段都是年月日时分秒,但我们从用户表查询数据时肯定是只定位到年月日,不关心时分秒,解决方法有:使用模糊查询(不推荐)、使用sql提供的date函数(推荐)

**date函数的作用是:获取日期的年月日部分**

使用date函数的sql语句举例如下:

SELECT COUNT(*) FROM ucenter_member uc WHERE DATE(uc.gmt_create)='2022-09-14'

2.把从用户表查询到的改天注册人数存储到统计表

3.把统计表中的数据使用图标显示

### 2.新建统计微服务 ###

#### 2.1创建子子模块service\_statistics ####

1.在service模块上右键选择New–>Module…

![在这里插入图片描述][3edc7cb663e74097a11d8cb00fc44b8e.png_pic_center]

2.创建一个Maven项目

![在这里插入图片描述][37d42cc2d22643d880a510bacf85dc8c.png_pic_center]

3.填写信息后点击"Finish"

![在这里插入图片描述][5062d157ccc14d8d91a3a8e2bafce436.png_pic_center]

#### 2.2创建数据表 ####

1.创建statistics\_daily表(统计表)的脚本在资料中有

![在这里插入图片描述][33724ea17c13494c88bca70558b541d3.png_pic_center]

![在这里插入图片描述][0122eae8c4b44042acb32e1c02556ea1.png_pic_center]

2.将创建这张表的sql语句复制粘贴到数据库中执行

CREATE TABLE `statistics_daily` (
      `id` char(19) NOT NULL COMMENT '主键',
      `date_calculated` varchar(20) NOT NULL COMMENT '统计日期',
      `register_num` int(11) NOT NULL DEFAULT '0' COMMENT '注册人数',
      `login_num` int(11) NOT NULL DEFAULT '0' COMMENT '登录人数',
      `video_view_num` int(11) NOT NULL DEFAULT '0' COMMENT '每日播放视频数',
      `course_num` int(11) NOT NULL DEFAULT '0' COMMENT '每日新增课程数',
      `gmt_create` datetime NOT NULL COMMENT '创建时间',
      `gmt_modified` datetime NOT NULL COMMENT '更新时间',
      PRIMARY KEY (`id`),
      KEY `statistics_day` (`date_calculated`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='网站统计日数据';

![在这里插入图片描述][4f64056ae3ca406bbbf350353c5ecf4d.png_pic_center]

#### 2.3配置application.properties ####

创建配置文件application.properties并编写配置

# 服务端口
    server.port=8008
    # 服务名
    spring.application.name=service-statistics
    
    # mysql数据库连接
    spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
    spring.datasource.url=jdbc:mysql://localhost:3306/guli?useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8
    spring.datasource.username=root
    spring.datasource.password=root
    
    #返回json的全局时间格式
    spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
    spring.jackson.time-zone=GMT+8
    
    #配置mapper xml文件的路径
    mybatis-plus.mapper-locations=classpath:com/atguigu/staservice/mapper/xml/*.xml
    
    #mybatis日志
    mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
    
    # nacos服务地址
    spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848

![在这里插入图片描述][3caa6409728e4959bdc5910bf2555381.png_pic_center]

#### 2.4生成代码 ####

1.在service\_statistics模块的test包的java包下创建包demo

![在这里插入图片描述][4865736af69c461f86a19893da890b24.png_pic_center]

2.将service\_ucenter模块的代码生成器CodeGenerator复制到上一步创建的demo包下

![在这里插入图片描述][53db030b46ed406ab3ba8f326f2549b1.png_pic_center]

3.修改service\_statistics模块的代码生成器中的部分代码

![在这里插入图片描述][7cb9a15c0290448a8c4a114a70102a49.png_pic_center]

4.在run方法上右键选择"Run ‘run()’"就可以生成代码了

![在这里插入图片描述][dad6a9ce23b0485e9942c08259e73101.png_pic_center]

5.给生成的控制器StatisticsDailyController添加@CrossOrigin注解,并且给请求路径`/staservice/statistics-daily`中的`statistics-daily`改为`sta`

![在这里插入图片描述][349c1f9c9afc4a7bb86a250d1f4480b4.png_pic_center]

#### 2.5创建启动类 ####

在staservice包下创建启动类StaApplication

@SpringBootApplication
    @ComponentScan("com.atguigu")
    @EnableDiscoveryClient
    @EnableFeignClients
    @MapperScan("com.atguigu.staservice.mapper")
    public class StaApplication {
        
        public static void main(String[] args) {
        
            SpringApplication.run(StaApplication.class, args);
        }
    }

![在这里插入图片描述][4b3ed158761a498186fb6166be9a2092.png_pic_center]

#### 2.6配置nginx ####

在nginx中配置8008端口保存后重启nginx

location ~ /staservice/ {
    	proxy_pass http://localhost:8008;
    }

![在这里插入图片描述][8fbd74fea36f48deab24a2d2c1fae0c1.png_pic_center]

#### 2.7自动填充 ####

给生成的实体类StatisticsDaily的gmtCreate属性和gmtModified属性都添加注解@TableField以实现自动填充

![在这里插入图片描述][2d93c29282a141978303c82eb1b415ad.png_pic_center]

### 3.查询某天注册人数的接口 ###

#### 3.1分析 ####

查询某天注册人数需要去用户表查询,所以查询的接口应该写在service\_ucenter模块,然后在service\_statistics模块远程调用这个查询方法

#### 3.2控制层 ####

在控制器UcenterMemberController中编写代码来查询某天注册人数

//查询某天注册人数(该方法供远程调用使用)
    @GetMapping("countRegister/{day}")
    public R countRegister(@PathVariable String day) {
        
        Integer count = memberService.countRegisterDay(day);
        return R.ok().data("countRegister", count);
    }

![在这里插入图片描述][7b06fcaeab074edaaf3747d70ecb4482.png_pic_center]

#### 3.3业务层接口 ####

在业务层接口UcenterMemberService中定义抽象方法

//查询某天注册人数(该方法供远程调用使用)
    Integer countRegisterDay(String day);

![在这里插入图片描述][49274fc11ba74c0ab712a78f25717fed.png_pic_center]

#### 3.4业务层实现类 ####

在业务层实现类UcenterMemberServiceImpl中实现上一步定义的抽象方法

//查询某天注册人数(该方法供远程调用使用)
    @Override
    public Integer countRegisterDay(String day) {
        
        return baseMapper.countRegisterDay(day);
    }

![在这里插入图片描述][d485a850360944e4bd76200e52ef5d4a.png_pic_center]

#### 3.5持久层接口 ####

在持久层接口UcenterMemberMapper中定义抽象方法

//查询某天注册人数(该方法供远程调用使用)
    Integer countRegisterDay(String day);

![在这里插入图片描述][f43270b872324014906c76f60bb9620a.png_pic_center]

#### 3.6编写映射 ####

在UcenterMemberMapper.xml中编写上一步定义的抽象方法的映射

<select id="countRegisterDay" resultType="java.lang.Integer">
        SELECT COUNT(*) FROM ucenter_member uc
        WHERE DATE(uc.gmt_create)=#{day}
    </select>

![在这里插入图片描述][0dd5ca039cf8406ebf5e62973416c91f.png_pic_center]

*  截图中第6行的返回值类型我们这里写的是java.lang.Integer,其实写int也是可以的
 *  因为持久层抽象方法的参数只有一个,所以截图中第8行的`#{day}`中的day随便写别的字母、数字都可以。我们在"demo10-课程管理"的"1.4.3编写映射"也曾说过

#### 3.7编写接口 ####

在service\_statistics模块的staservice包下创建包client,然后在client包下创建接口UcenterClient

@Component
    @FeignClient("service-ucenter")
    public interface UcenterClient {
        
        //查询某天注册人数
        @GetMapping("/educenter/member/countRegister/{day}")
        public R countRegister(@PathVariable("day") String day);
    }

![在这里插入图片描述][0f4c5cd888214be39ff2f1a46ab1dd6a.png_pic_center]

#### 3.8进行远程调用并向统计表添加数据 ####

##### 3.8.1控制层 #####

在控制器StatisticsDailyController中编写代码

@Autowired
    private StatisticsDailyService staService;
    
    //统计某天的注册人数(远程调用)并加到统计表
    @PostMapping("registerCount/{day}")
    public R registerCount(@PathVariable String day) {
        
        staService.registerCount(day);
        return R.ok();
    }

![在这里插入图片描述][d91bf5b8e2af4c7b9dae34798429fb5b.png_pic_center]

##### 3.8.2业务层接口 #####

在业务层接口StatisticsDailyService中定义抽象方法

//统计某天的注册人数(远程调用)并加到统计表
    void registerCount(String day);

![在这里插入图片描述][c5f819f29a4b49b9a60ed09f407ad20a.png_pic_center]

##### 3.8.3业务层实现类 #####

在业务层实现类StatisticsDailyServiceImpl中实现上一步定义的抽象方法

@Autowired
    private UcenterClient ucenterClient;
    
    //统计某天的注册人数(远程调用)并加到统计表
    @Override
    public void registerCount(String day) {
        
        //远程调用,得到某天的注册人数
        R registerR = ucenterClient.countRegister(day);
        Integer countRegister = (Integer)registerR.getData().get("countRegister");
    
        //把获取到的数据添加到统计表
        StatisticsDaily sta = new StatisticsDaily();
        sta.setRegisterNum(countRegister); //注册人数
        sta.setDateCalculated(day); //统计的哪天的数据
        //统计表中的其它数据我们这里模拟生成随机数,后期自行完善
        sta.setVideoViewNum(RandomUtils.nextInt(100, 200));
        sta.setLoginNum(RandomUtils.nextInt(100, 200));
        sta.setCourseNum(RandomUtils.nextInt(100, 200));
        baseMapper.insert(sta);
    }

![在这里插入图片描述][07cf2bf32f894b09adb3d3f53df5f3cc.png_pic_center]

截图中第38行的RandomUtils类使用的是`org.apache.commons.lang3`包里面的

#### 3.9测试 ####

1.重启后端服务,在地址栏访问[http://localhost:8008/swagger-ui.html][http_localhost_8008_swagger-ui.html]

2.给我们测试的接口传一个参数,可以看到执行成功,并且统计表确实插入了一条新数据

![在这里插入图片描述][2485b516af024946945c53bd9e5a9531.png_pic_center]

![在这里插入图片描述][cb00b94df32b450fbf0031cb0cbbd942.png_pic_center]

#### 3.10完善 ####

1.比如说我在2022-01-01的早上六点做了查询,在2022-01-01的上午十一点又做了查询,那这两次查询得到的注册人数可能会不一样,我们肯定不想让统计中有两条相同日期的数据,所以**每次向数据表插入数据前先查询统计表中是否有和即将插入的数据日期相同的数据,如果有,则删掉那条数据再执行插入操作**

2.在业务层实现类StatisticsDailyServiceImpl的registerCount方法中添加如下代码

//插入新数据之前,先删掉表中与即将插入的数据日期相同的数据
    QueryWrapper<StatisticsDaily> wrapper = new QueryWrapper<>();
    wrapper.eq("date_calculated", day);
    baseMapper.delete(wrapper);

![在这里插入图片描述][3f298a8203bb407db563af7f32f1cb12.png_pic_center]

3.重启后端服务,自行测试

### 4.查询某天注册人数前端 ###

#### 4.1添加路由 ####

在后台的前端项目中添加路由:

在src–>router下的index.js中添加如下代码

{
        
      path: '/sta',
      component: Layout,
      redirect: '/sta/create',
      name: '统计分析',
      meta: {
         title: '统计分析', icon: 'example' },
      children: [
        {
        
          path: 'create',
          name: '生成数据',
          component: () => import('@/views/sta/create'),
          meta: {
         title: '生成数据', icon: 'table' }
        },
        {
        
          path: 'show',
          name: '图标显示',
          component: () => import('@/views/sta/show'),
          meta: {
         title: '图标显示', icon: 'tree' }
        }
      ]
    },

![在这里插入图片描述][451dbf4396cc473b91cd9a8d08ecfe29.png_pic_center]

#### 4.2创建页面 ####

在src–>views目录下创建文件夹sta,然后在sta文件夹下分别创建两个页面:create.vue和show.vue

![在这里插入图片描述][48e34513665943ccbcb7cf2bce639b38.png_pic_center]

#### 4.3在api中定义方法 ####

在src–>api目录下创建sta.js文件

import request from '@/utils/request'
    
    export default {
        
      //将统计得到的数据插入统计表
      createStaData(day) {
        
        return request({
        
          url: `/staservice/sta/registerCount/${
          day}`,
          method: 'post'
        })
      }
    }

![在这里插入图片描述][fbd7862e85074541b47bc915222bb49f.png_pic_center]

#### 4.4在api中定义方法 ####

1.在create.vue页面添加组件,这个组件的作用是:进入created.vue页面后会显示一个日期框供我们选择日期

![在这里插入图片描述][8b95124a0f6a4a13908f8e4a22a8e5ca.png_pic_center]

2.在create.vue页面编写js代码来调用api中的方法

![在这里插入图片描述][478100f7e29942e695413fa0b5b4f361.png_pic_center]

#### 4.5测试 ####

启动前端项目,进行测试,我的执行成功,并且数据库确实加入了这条统计数据

![在这里插入图片描述][4c5aaa2ac48c4621971bb3c115faffc6.png_pic_center]

### 5.整合定时任务 ###

#### 5.1需求 ####

我想让service\_statistics模块中向统计表添加统计数据的方法在每天的凌晨一点定时执行一次,查询前一天的统计数据并插入到统计表

#### 5.2添加注解 ####

给service\_statistics模块的启动类添加注解@EnableScheduling

![在这里插入图片描述][49bda53d2600424d9cb5029b153fccb2.png_pic_center]

#### 5.3cron表达式 ####

创建定时任务类时需要用到cron表达式,我们先了解一下cron表达式:

1.cron表达式也称七子表达式(七域表达式),用来设置执行规则。这个表达式不需要我们去写,在网络上有很多cron表达式的生成工具,如:[https://www.pppet.net/][https_www.pppet.net]

2.打开这个生成工具的网站进行操作:如果我们想让每天的凌晨一点执行一次,则**在"小时"菜单下先选中"指定"然后选择"01"**,其它六个菜单就默认的就行。可以看到人家给我们生成了cron表达式`0 0 1 * * ?`

![在这里插入图片描述][ab9acb12889e46e39490449fdb98334b.png_pic_center]

3.注意:如果人家生成的cron表达式是6位,我们就可以直接用,**如果生成的cron表达式是7位,我们使用时需要将最后一位删掉**,因为SpringBoot整合定时任务时默认让年份为今年,所以SpringBoot中只能写6位的cron表达式,如果写7位的就会报错

#### 5.4创建工具类 ####

1.我们在"5.1需求"说过,我们想要查询、插入的是前一天的统计数据,并且我们调用方法来查询、插入时传给方法的参数需要是yyyy-MM-dd格式。这些需求我们在工具类DateUtil中已实现,这个工具类在资料中已提供

![在这里插入图片描述][c8e18544f61f4b3b8a63d1bcc4cf99b7.png_pic_center]

2.我们在service\_statistics模块的staservice包下创建包utils,然后将这个工具类复制粘贴到utils包下

![在这里插入图片描述][e21428e5d0f24a05a2877b318fee6403.png_pic_center]

#### 5.2创建定时任务类 ####

在service\_statistics模块的staservice包下创建包schedule,然后在schedule包下创建定时任务类,在这个类中使用cron表达式来设置什么时候去执行

@Component
    public class ScheduledTask {
        
        @Autowired
        private StatisticsDailyService staService;
    
        //在每天的凌晨一点查询前一天的统计数据并插入到统计表
        @Scheduled(cron = "0 0 1 * * ?")
        public void task2() {
        
            //获取上一天的日期(格式是yyyy-MM-dd)
            String day = DateUtil.formatDate(DateUtil.addDays(new Date(), -1));
            staService.registerCount(day);
        }
    }

![在这里插入图片描述][a84a8b33d64e49e288f485fe110da64c.png_pic_center]

### 6.ECharts入门(柱状图) ###

#### 6.1创建页面 ####

在vs1010工作区的vs1010目录下创建文件夹echarts,然后在echarts文件夹下创建文件01.html,使用在"demo04-前端技术"的"3.1vue入门案例"的第1步说的方式快捷生成页面的基础代码

![在这里插入图片描述][c878af50f0b549d599603e31c918a946.png_pic_center]

#### 6.2引入ECharts ####

1.使用ECharts就需要人家的js文件,这个文件在资料中提供了

![在这里插入图片描述][53a6b354612c448ea3e175a90457b4d8.png_pic_center]

2.我们将这个js文件复制粘贴到在"6.1创建页面"创建的echarts目录下

![在这里插入图片描述][a94904a2954e4e90b18a925697aa6fa7.png_pic_center]

3.在01.html中引入这个js文件

![在这里插入图片描述][7ae1f07803d34181846a52c84a42f450.png_pic_center]

#### 6.3添加div标签 ####

div标签用于指定图表的位置

![在这里插入图片描述][79428c2804e14c958992653716d2ce96.png_pic_center]

#### 6.4编写js代码渲染图表 ####

![在这里插入图片描述][bb7607991a5747f0a09729be39154ef4.png_pic_center]

截图中第25行的横坐标数据和第31行的纵坐标数据都是数组形式,这是因为人家规定了,**想让ECharts识别横、纵坐标的数据,那就必须让前端的横、纵坐标数据都是json数组**

#### 6.5测试 ####

在空白处右键选择"Open with Live Server"去浏览器看效果

![在这里插入图片描述][838b1577f43f4e128e7cfd00e856818e.png_pic_center]

![在这里插入图片描述][edc072a318a040ef83413afe5ef040ce.png_pic_center]

### 7.项目中集成ECharts ###

#### 7.1安装ECharts ####

在终端使用如下命令安装ECharts

npm install --save echarts@4.1.0

![在这里插入图片描述][e688b5d08fad4cb2a90ce96bca3bc274.png_pic_center]

#### 7.2在show.vue页面创建组件 ####

1.我们的需求是:管理员进入show.vue页面后会显示表单,该表单中有:

*  一个下拉列表(术语叫做统一因子),下拉列表中有:学员登录数统计、学员注册数统计、课程播放数统计…管理员可以选择要查看哪个数据
 *  开始日期
 *  结束日期

2.模板代码老师已经给了,我们直接复制粘贴到show.vue即可

#### 7.3暂时显示临时数据 ####

1.我们先在show.vue中写一些js代码,封装一些静态数据,以便我们可以看到效果

![在这里插入图片描述][105407d1e0754b4593d14e9e0afad51f.png_pic_center]

2.点击"图标显示"路由,表单中的统一因子、开始时间、结束时间随便填(因为我们此时是在js代码中写了固定的数据),然后点击"查询"就可以看到折线图了

![在这里插入图片描述][d872507563924b1c80d9433455f467cc.png_pic_center]

![在这里插入图片描述][540d1214ca5e41b0b289c936d4d4dd97.png_pic_center]

### 8.图标显示后端 ###

#### 8.1控制层 ####

在控制器StatisticsDailyController中编写方法

//图表显示,返回两部分数据:日期的json数组(横坐标)和数量的json数组(纵坐标)
    @GetMapping("showData/{type}/{begin}/{end}")
    public R showData(@PathVariable String type,
                      @PathVariable String begin,
                      @PathVariable String end) {
        
        Map<String, Object> map = staService.getShowData(type, begin, end);
        return R.ok().data(map);
    }

![在这里插入图片描述][f98cb625939744679df2b4d4eed716d9.png_pic_center]

*  截图中第34行的`showData/{type}/{begin}/{end}`:以前我们都是用对象接收前端传过来的数据,但是这里前端表单只传过来三个数据(统一因子、开始时间、结束时间),所以我们这里不用对象接收(当然了,用对象接收也是正确的)
 *  截图中第39行的`return R.ok().data(map)`:我们让后端返回map集合,这样前端取值方便,这个我们说过很多遍了(当然,不想返回map集合也行)

#### 8.2业务层接口 ####

在业务层接口StatisticsDailyService中定义抽象方法

//图表显示,返回两部分数据:日期的json数组(横坐标)和数量的json数组(纵坐标)
    Map<String, Object> getShowData(String type, String begin, String end);

![在这里插入图片描述][7f4e5d3488c94a8d9604d2e7f3021344.png_pic_center]

#### 8.3业务层实现类 ####

1.先普及一下json:

*  json在后端只有一种形式:json形式的字符串
 *  json在前端有两种形式
    
     *  json对象
        
         *  \{“name”:“lucy”,“age”:20\}
     *  json数组
        
         *  \[1,2,3\]

我们在"6.4编写js代码渲染图表"说过,**想让ECharts识别横、纵坐标的数据,那就必须让前端的横、纵坐标数据都是json数组**。前端的json数组对应后端就是list集合,所以我们后端封装横、纵坐标数据时需要用list集合来封装(如果后端用对象或map集合来封装横、纵坐标数据,对应到前端则是json对象而不是我们想要的json数组)

2.在业务层实现类StatisticsDailyServiceImpl中实现上一步定义的抽象方法

//图表显示,返回两部分数据:日期的json数组(横坐标)和数量的json数组(纵坐标)
    @Override
    public Map<String, Object> getShowData(String type, String begin, String end) {
        
        //1.根据条件查询对应数据
        QueryWrapper<StatisticsDaily> wrapper = new QueryWrapper<>();
        wrapper.between("date_calculated", begin, end);
        wrapper.select("date_calculated", type);
        List<StatisticsDaily> staList = baseMapper.selectList(wrapper);
    
        //2.封装数据(我们需要返回两部分数据:统计日期 和 该日期对应的数量)
        //2.1创建两个list集合
        List<String> date_calculated = new ArrayList<>(); //统计日期
        List<Integer> numDataList = new ArrayList<>(); //数量
        //2.2遍历staList进行数据的封装
        for (int i = 0; i < staList.size(); i++) {
        
            StatisticsDaily daily = staList.get(i);
            //2.2.1封装日期list集合
            date_calculated.add(daily.getDateCalculated());
            //2.2.2封装对应数量
            switch (type) {
        
                case "login_num":
                    numDataList.add(daily.getLoginNum());
                    break;
                case "register_num":
                    numDataList.add(daily.getRegisterNum());
                    break;
                case "video_view_num":
                    numDataList.add(daily.getVideoViewNum());
                    break;
                case "course_num":
                    numDataList.add(daily.getCourseNum());
                    break;
                default:
                    break;
            }
        }
    
        //3.将封装后的两个list集合放到map集合中并返回
        Map<String, Object> map = new HashMap<>();
        map.put("date_calculated", date_calculated);
        map.put("numDataList", numDataList);
        return map;
    }

![在这里插入图片描述][2d2b82d4f74b4c37978e48bf16816395.png_pic_center]

*  截图中第66、67行为什么要使用两个list集合来封装数据而不是使用map集合或使用java对象呢?具体原因看"8.3业务层实现类"的第1步
 *  截图中第61行的`dayQueryWrapper.select("date_calculated", type)`:select方法指定要查询的列,我们查询得到的数据中需要有统计日期,所以给select方法传的第一个参数是`"date_calculated"`。但是我们给select方法传的第二个参数type是有何用意呢:
    
    从下面这两张图我们可以知道,下拉列表中的value值和数据库中的字段是一一对应的,如果在页面选的是"学员注册数统计",那么前端传给后端的type就是`"register_num"`,刚好和数据库中的register\_num字段对应
    
    ![在这里插入图片描述][24e050ea8ba844ca92aa8358ca9f4db2.png_pic_center]
    
    ![在这里插入图片描述][25e2574297184bbabf7df8f5de7e49b0.png_pic_center]

#### 8.4测试 ####

重启后端项目,使用swagger进行测试,我测试时一切正常

![在这里插入图片描述][6ab2c1f9166c4e5ea529dff5aa7773d3.png_pic_center]

### 9.图标显示前端 ###

#### 9.1在api中定义方法 ####

在sta.js中编写方法调用后端接口来获取统计数据

//获取统计数据以实现图标显示
    getDataSta(searchObj) {
        
      return request({
        
        url: `/staservice/sta/showData/${
          searchObj.type}/${
          searchObj.begin}/${
          searchObj.end}`,
        method: 'get'
      })
    }

![在这里插入图片描述][db853b4757ba40d189832aa2ba4bf964.png_pic_center]

截图中第14行的`/${searchObj.type}/${searchObj.begin}/${searchObj.end}`:我们前端是searchObj对象,但是后端控制层接口的参数是`@PathVariable String type, @PathVariable String begin,@PathVariable String end`所以我们用`/${searchObj.type}/${searchObj.begin}/${searchObj.end}`这种方式获取searchObj对象中的值并作为路由参数传递给后端

#### 9.2调用api中的方法 ####

1.在show.vue页面引入sta.js文件

import staApi from '@/api/sta'

![在这里插入图片描述][14e0eeec6a904032ad6e7feeb72d6015.png_pic_center]

2.将在`methods: {...}`中定义的showChart方法改名为setChart

![在这里插入图片描述][6147c94f3774463ba0fe9ae5dd8fe16c.png_pic_center]

3.定义两个数据模型分别用来封装横、纵坐标数据

xData: [], //横坐标数据
    yData: [] //纵坐标数据

![在这里插入图片描述][58446da040e44935a96ad1dcfdfd7387.png_pic_center]

4.在`methods: {...}`中定义方法来调用api中的方法

showChart() {
        
      staApi.getDataSta(this.searchObj)
        .then(response => {
        
          this.xData = response.data.date_calculated
          this.yData = response.data.numDataList
          //调用真正生成图表的方法setChart
          this.setChart()
        })
    },

![在这里插入图片描述][1b404119a36d417199382260df248b87.png_pic_center]

5.在真正的生成图表的方法setChart中作出如下修改使得生成图表时使用的数据是从数据库中查到的数据

![在这里插入图片描述][9487aeb9a70e4fbeb1a8efaaa0973885.png_pic_center]

#### 9.3测试 ####

保存修改,自行测试,我的没问题

![在这里插入图片描述][bc18c177258342ce9ba313b05f2a50d9.png_pic_center]

#### 9.4其它样式 ####

1.我们在`var option = {...}`中添加如下代码,可以让图表显示更加完美

//显示标题
    title: {
        
        text: '数据统计'
    },
    //x坐标轴触发提示
    tooltip: {
        
        trigger: 'axis'
    },
    //区域缩放
    dataZoom: [{
        
      show: true,
      height: 30,
      xAxisIndex: [
        0
      ],
      bottom: 30,
      start: 10,
      end: 80,
      handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
      handleSize: '110%',
      handleStyle: {
        
        color: '#d3dee5'
    
      },
      textStyle: {
        
        color: '#fff'
      },
      borderColor: '#90979c'
    },
    {
        
      type: 'inside',
      show: true,
      height: 15,
      start: 1,
      end: 35
    }],

![在这里插入图片描述][cfec888570b74ea391d0465a3429cec2.png_pic_center]

2.效果如下

![在这里插入图片描述][12367d6633c5474fa273044e8d9ffb86.png_pic_center]

[3edc7cb663e74097a11d8cb00fc44b8e.png_pic_center]: https://img-blog.csdnimg.cn/3edc7cb663e74097a11d8cb00fc44b8e.png#pic_center
[37d42cc2d22643d880a510bacf85dc8c.png_pic_center]: https://img-blog.csdnimg.cn/37d42cc2d22643d880a510bacf85dc8c.png#pic_center
[5062d157ccc14d8d91a3a8e2bafce436.png_pic_center]: https://img-blog.csdnimg.cn/5062d157ccc14d8d91a3a8e2bafce436.png#pic_center
[33724ea17c13494c88bca70558b541d3.png_pic_center]: https://img-blog.csdnimg.cn/33724ea17c13494c88bca70558b541d3.png#pic_center
[0122eae8c4b44042acb32e1c02556ea1.png_pic_center]: https://img-blog.csdnimg.cn/0122eae8c4b44042acb32e1c02556ea1.png#pic_center
[4f64056ae3ca406bbbf350353c5ecf4d.png_pic_center]: https://img-blog.csdnimg.cn/4f64056ae3ca406bbbf350353c5ecf4d.png#pic_center
[3caa6409728e4959bdc5910bf2555381.png_pic_center]: https://img-blog.csdnimg.cn/3caa6409728e4959bdc5910bf2555381.png#pic_center
[4865736af69c461f86a19893da890b24.png_pic_center]: https://img-blog.csdnimg.cn/4865736af69c461f86a19893da890b24.png#pic_center
[53db030b46ed406ab3ba8f326f2549b1.png_pic_center]: https://img-blog.csdnimg.cn/53db030b46ed406ab3ba8f326f2549b1.png#pic_center
[7cb9a15c0290448a8c4a114a70102a49.png_pic_center]: https://img-blog.csdnimg.cn/7cb9a15c0290448a8c4a114a70102a49.png#pic_center
[dad6a9ce23b0485e9942c08259e73101.png_pic_center]: https://img-blog.csdnimg.cn/dad6a9ce23b0485e9942c08259e73101.png#pic_center
[349c1f9c9afc4a7bb86a250d1f4480b4.png_pic_center]: https://img-blog.csdnimg.cn/349c1f9c9afc4a7bb86a250d1f4480b4.png#pic_center
[4b3ed158761a498186fb6166be9a2092.png_pic_center]: https://img-blog.csdnimg.cn/4b3ed158761a498186fb6166be9a2092.png#pic_center
[8fbd74fea36f48deab24a2d2c1fae0c1.png_pic_center]: https://img-blog.csdnimg.cn/8fbd74fea36f48deab24a2d2c1fae0c1.png#pic_center
[2d93c29282a141978303c82eb1b415ad.png_pic_center]: https://img-blog.csdnimg.cn/2d93c29282a141978303c82eb1b415ad.png#pic_center
[7b06fcaeab074edaaf3747d70ecb4482.png_pic_center]: https://img-blog.csdnimg.cn/7b06fcaeab074edaaf3747d70ecb4482.png#pic_center
[49274fc11ba74c0ab712a78f25717fed.png_pic_center]: https://img-blog.csdnimg.cn/49274fc11ba74c0ab712a78f25717fed.png#pic_center
[d485a850360944e4bd76200e52ef5d4a.png_pic_center]: https://img-blog.csdnimg.cn/d485a850360944e4bd76200e52ef5d4a.png#pic_center
[f43270b872324014906c76f60bb9620a.png_pic_center]: https://img-blog.csdnimg.cn/f43270b872324014906c76f60bb9620a.png#pic_center
[0dd5ca039cf8406ebf5e62973416c91f.png_pic_center]: https://img-blog.csdnimg.cn/0dd5ca039cf8406ebf5e62973416c91f.png#pic_center
[0f4c5cd888214be39ff2f1a46ab1dd6a.png_pic_center]: https://img-blog.csdnimg.cn/0f4c5cd888214be39ff2f1a46ab1dd6a.png#pic_center
[d91bf5b8e2af4c7b9dae34798429fb5b.png_pic_center]: https://img-blog.csdnimg.cn/d91bf5b8e2af4c7b9dae34798429fb5b.png#pic_center
[c5f819f29a4b49b9a60ed09f407ad20a.png_pic_center]: https://img-blog.csdnimg.cn/c5f819f29a4b49b9a60ed09f407ad20a.png#pic_center
[07cf2bf32f894b09adb3d3f53df5f3cc.png_pic_center]: https://img-blog.csdnimg.cn/07cf2bf32f894b09adb3d3f53df5f3cc.png#pic_center
[http_localhost_8008_swagger-ui.html]: http://localhost:8008/swagger-ui.html
[2485b516af024946945c53bd9e5a9531.png_pic_center]: https://img-blog.csdnimg.cn/2485b516af024946945c53bd9e5a9531.png#pic_center
[cb00b94df32b450fbf0031cb0cbbd942.png_pic_center]: https://img-blog.csdnimg.cn/cb00b94df32b450fbf0031cb0cbbd942.png#pic_center
[3f298a8203bb407db563af7f32f1cb12.png_pic_center]: https://img-blog.csdnimg.cn/3f298a8203bb407db563af7f32f1cb12.png#pic_center
[451dbf4396cc473b91cd9a8d08ecfe29.png_pic_center]: https://img-blog.csdnimg.cn/451dbf4396cc473b91cd9a8d08ecfe29.png#pic_center
[48e34513665943ccbcb7cf2bce639b38.png_pic_center]: https://img-blog.csdnimg.cn/48e34513665943ccbcb7cf2bce639b38.png#pic_center
[fbd7862e85074541b47bc915222bb49f.png_pic_center]: https://img-blog.csdnimg.cn/fbd7862e85074541b47bc915222bb49f.png#pic_center
[8b95124a0f6a4a13908f8e4a22a8e5ca.png_pic_center]: https://img-blog.csdnimg.cn/8b95124a0f6a4a13908f8e4a22a8e5ca.png#pic_center
[478100f7e29942e695413fa0b5b4f361.png_pic_center]: https://img-blog.csdnimg.cn/478100f7e29942e695413fa0b5b4f361.png#pic_center
[4c5aaa2ac48c4621971bb3c115faffc6.png_pic_center]: https://img-blog.csdnimg.cn/4c5aaa2ac48c4621971bb3c115faffc6.png#pic_center
[49bda53d2600424d9cb5029b153fccb2.png_pic_center]: https://img-blog.csdnimg.cn/49bda53d2600424d9cb5029b153fccb2.png#pic_center
[https_www.pppet.net]: https://www.pppet.net/
[ab9acb12889e46e39490449fdb98334b.png_pic_center]: https://img-blog.csdnimg.cn/ab9acb12889e46e39490449fdb98334b.png#pic_center
[c8e18544f61f4b3b8a63d1bcc4cf99b7.png_pic_center]: https://img-blog.csdnimg.cn/c8e18544f61f4b3b8a63d1bcc4cf99b7.png#pic_center
[e21428e5d0f24a05a2877b318fee6403.png_pic_center]: https://img-blog.csdnimg.cn/e21428e5d0f24a05a2877b318fee6403.png#pic_center
[a84a8b33d64e49e288f485fe110da64c.png_pic_center]: https://img-blog.csdnimg.cn/a84a8b33d64e49e288f485fe110da64c.png#pic_center
[c878af50f0b549d599603e31c918a946.png_pic_center]: https://img-blog.csdnimg.cn/c878af50f0b549d599603e31c918a946.png#pic_center
[53a6b354612c448ea3e175a90457b4d8.png_pic_center]: https://img-blog.csdnimg.cn/53a6b354612c448ea3e175a90457b4d8.png#pic_center
[a94904a2954e4e90b18a925697aa6fa7.png_pic_center]: https://img-blog.csdnimg.cn/a94904a2954e4e90b18a925697aa6fa7.png#pic_center
[7ae1f07803d34181846a52c84a42f450.png_pic_center]: https://img-blog.csdnimg.cn/7ae1f07803d34181846a52c84a42f450.png#pic_center
[79428c2804e14c958992653716d2ce96.png_pic_center]: https://img-blog.csdnimg.cn/79428c2804e14c958992653716d2ce96.png#pic_center
[bb7607991a5747f0a09729be39154ef4.png_pic_center]: https://img-blog.csdnimg.cn/bb7607991a5747f0a09729be39154ef4.png#pic_center
[838b1577f43f4e128e7cfd00e856818e.png_pic_center]: https://img-blog.csdnimg.cn/838b1577f43f4e128e7cfd00e856818e.png#pic_center
[edc072a318a040ef83413afe5ef040ce.png_pic_center]: https://img-blog.csdnimg.cn/edc072a318a040ef83413afe5ef040ce.png#pic_center
[e688b5d08fad4cb2a90ce96bca3bc274.png_pic_center]: https://img-blog.csdnimg.cn/e688b5d08fad4cb2a90ce96bca3bc274.png#pic_center
[105407d1e0754b4593d14e9e0afad51f.png_pic_center]: https://img-blog.csdnimg.cn/105407d1e0754b4593d14e9e0afad51f.png#pic_center
[d872507563924b1c80d9433455f467cc.png_pic_center]: https://img-blog.csdnimg.cn/d872507563924b1c80d9433455f467cc.png#pic_center
[540d1214ca5e41b0b289c936d4d4dd97.png_pic_center]: https://img-blog.csdnimg.cn/540d1214ca5e41b0b289c936d4d4dd97.png#pic_center
[f98cb625939744679df2b4d4eed716d9.png_pic_center]: https://img-blog.csdnimg.cn/f98cb625939744679df2b4d4eed716d9.png#pic_center
[7f4e5d3488c94a8d9604d2e7f3021344.png_pic_center]: https://img-blog.csdnimg.cn/7f4e5d3488c94a8d9604d2e7f3021344.png#pic_center
[2d2b82d4f74b4c37978e48bf16816395.png_pic_center]: https://img-blog.csdnimg.cn/2d2b82d4f74b4c37978e48bf16816395.png#pic_center
[24e050ea8ba844ca92aa8358ca9f4db2.png_pic_center]: https://img-blog.csdnimg.cn/24e050ea8ba844ca92aa8358ca9f4db2.png#pic_center
[25e2574297184bbabf7df8f5de7e49b0.png_pic_center]: https://img-blog.csdnimg.cn/25e2574297184bbabf7df8f5de7e49b0.png#pic_center
[6ab2c1f9166c4e5ea529dff5aa7773d3.png_pic_center]: https://img-blog.csdnimg.cn/6ab2c1f9166c4e5ea529dff5aa7773d3.png#pic_center
[db853b4757ba40d189832aa2ba4bf964.png_pic_center]: https://img-blog.csdnimg.cn/db853b4757ba40d189832aa2ba4bf964.png#pic_center
[14e0eeec6a904032ad6e7feeb72d6015.png_pic_center]: https://img-blog.csdnimg.cn/14e0eeec6a904032ad6e7feeb72d6015.png#pic_center
[6147c94f3774463ba0fe9ae5dd8fe16c.png_pic_center]: https://img-blog.csdnimg.cn/6147c94f3774463ba0fe9ae5dd8fe16c.png#pic_center
[58446da040e44935a96ad1dcfdfd7387.png_pic_center]: https://img-blog.csdnimg.cn/58446da040e44935a96ad1dcfdfd7387.png#pic_center
[1b404119a36d417199382260df248b87.png_pic_center]: https://img-blog.csdnimg.cn/1b404119a36d417199382260df248b87.png#pic_center
[9487aeb9a70e4fbeb1a8efaaa0973885.png_pic_center]: https://img-blog.csdnimg.cn/9487aeb9a70e4fbeb1a8efaaa0973885.png#pic_center
[bc18c177258342ce9ba313b05f2a50d9.png_pic_center]: https://img-blog.csdnimg.cn/bc18c177258342ce9ba313b05f2a50d9.png#pic_center
[cfec888570b74ea391d0465a3429cec2.png_pic_center]: https://img-blog.csdnimg.cn/cfec888570b74ea391d0465a3429cec2.png#pic_center
[12367d6633c5474fa273044e8d9ffb86.png_pic_center]: https://img-blog.csdnimg.cn/12367d6633c5474fa273044e8d9ffb86.png#pic_center