统计图表ECharts

统计某个时间段，观看人数
在这里插入图片描述

在这里插入图片描述

①、数据表
在这里插入图片描述

②、业务代码

@RestController
@RequstMapping(value="/admin/vod/videoVisitor")
@CrossOrigin
public class VideoVisitorController{@Autowriedprivate VideoVisitorService videoVisitorService;//课程统计的接口@GetMapping("findCount/{courseId}/{startDate}/{endDate}")public Result findCount(@PathVariable Long courseId,@PathVariable String startDate,@PathVariable String endDate){Map<String,Object> map = videoVisitorService.findCount(courseId,startDate,endDate);return Result.ok(map);}
}

@Override
public Map<String,Object> findCount(Long courseId,String startDate,String endDate){List<VideoVisitorCountVo> videoVisitorVoList = baseMapper.findCount(courseId,startDate,endDate);Map<String,Object> map = new HashMap<>();List<String> dateList = videoVisitorVoList.stream().map(VideoVisitorCountVo::getJoinTime).collect(Collectors.toList());List<Integer> countList = videoVisitorVoList.stream().map(VideoVisitorCountVo::getUserCount).collect(Collectors.toList());map.put("xData",dataList);map.put("yData",countList);return map;
}

public interface VideoVisitorMapper extends BaseMapper<VideoVisitor>{List<VideoVisitorCountVo> findCount(@Param("courseId") Long courseId,@Param("startDate") String startDate,@Param("endDate") String endDate);}

<select id="findCount" resultType="com.michael.ggkt.vo.vod.VideoVisitorCountVo">SELECTFROM<where><if test="startDate!=null and startDate!=''">AND DATE(join_tiem) >= #{startDate}</if><if test="endDate!=null and endDate!=''">AND DATE(join_tiem) &lt;= #{endDate}</if>and course_id=#{courseId}</where>GROUP BY DATE(join_time)ORDER BY DATE(join_time)
</select>

在这里插入图片描述

③、前端整合

接口videoVisitor.js

import request from '@/utils/request'const api_name = '/admin/vod/videoVisitor'export default{findCount(courseId,startDate,endDate){return request({url:`${api_name}/findCount/${courseId}/${startDate}/${endDate}`,method:'get'})}
}

安装Echarts组件
在这里插入图片描述

页面chart.vue

<template><div class="app-container"><el-form :inline="true" class="demo-form-inline"><el-form-item><el-date-picker v-model="startDate"type="date"placeholder="选择开始日期"value-format="yyyy-MM-dd"/></el-form-item><el-form-item><el-date-pickerv-model="endDate"type="date"/></el-form-item></el-form></div>
</template>