统计图表展示

柔情只为你懂 2021-07-24 22:15 567阅读 0赞

# 一 后端聚合数据 #

## 1 web层 ##

@ApiOperation("显示统计数据")
    @GetMapping("show-chart/{begin}/{end}")
    public R showChart(
            @ApiParam("开始时间") @PathVariable String begin,
            @ApiParam("结束时间") @PathVariable String end){
    
    
        Map<String, Map<String, Object>> map = dailyService.getChartData(begin, end);
        return R.ok().data("chartData", map);
    }

## 2 service层 ##

接口

Map<String, Map<String, Object>> getChartData(String begin, String end);

实现

@Override
    public Map<String, Map<String, Object>> getChartData(String begin, String end) {
        // 学员登录数统计
        Map<String, Object> registerNum = this.getChartDataByType(begin, end, "register_num");
        // 学员注册数统计
        Map<String, Object> loginNum = this.getChartDataByType(begin, end, "login_num");
        // 课程播放数统计
        Map<String, Object> videoViewNum = this.getChartDataByType(begin, end, "video_view_num");
        // 每日新增课程数统计
        Map<String, Object> courseNum = this.getChartDataByType(begin, end, "course_num");
        Map<String, Map<String, Object>> map = new HashMap<>();
        map.put("registerNum", registerNum);
        map.put("loginNum", loginNum);
        map.put("videoViewNum", videoViewNum);
        map.put("courseNum", courseNum);
        return map;
    }
    
    /**
    * 根据时间和要查询的列查询数据
    * @param begin
    * @param end
    * @param type 要查询的列名
    * @return
    */
    private Map<String, Object> getChartDataByType(String begin, String end, String type){
        Map<String, Object> map = new HashMap<>();
        List<String> xList = new ArrayList<>(); // 日期列表
        List<Integer> yList = new ArrayList<>(); // 数据列表
        QueryWrapper<Daily> queryWrapper = new QueryWrapper<>();
        queryWrapper.select("date_calculated", type);
        queryWrapper.between("date_calculated", begin, end);
        List<Map<String, Object>> mapsData = baseMapper.selectMaps(queryWrapper);
        for (Map<String, Object> data : mapsData) {
            String dateCalculated = (String)data.get("date_calculated");
            xList.add(dateCalculated);
            Integer count = (Integer)data.get(type);
            yList.add(count);
        }
        map.put("xData", xList);
        map.put("yData", yList);
        return map;
    }

# 二 前端显示图标 #

## 1 api ##

showChart(searchObj) {
        return request({
          // baseURL: 'http://127.0.0.1:8180',
          url: `/admin/statistics/daily/show-chart/${searchObj.begin}/${searchObj.end}`,
          method: 'get'
        })
      }

## 2 脚本 ##

# 三 测试结果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/e4e1ded4bccc45679c95da36723c9fa6.png