当前位置: 首页 > news >正文

统计图表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>
http://www.dtcms.com/a/147658.html

相关文章:

  • vue vite开发时保留console.log打包完后依然想保留某个文件夹下的console.log方便以后的观察
  • Linux的基础的操作指令
  • 关于ORM
  • 辛格迪客户案例 | 上海科济药业细胞治疗生产及追溯项目(CGT)
  • Qt-创建模块化.pri文件
  • Windows BilibiliHistoryFetcher-v1.3.2-v1.2.1-开源B站历史记录管理工具[支持批量管理下载]
  • 01_Flask快速入门教程介绍
  • OneClicker脚本自动运行工具
  • 白嫖腾讯的H20!!!同时部署RVC模型
  • 堡垒机和跳板机之区别(The Difference between Fortress and Springboard Aircraft)
  • 一文详解卷积神经网络中的卷积层和池化层原理 !!
  • 量化交易 - RSRS(阻力支撑相对强度)- 正确用法 - 年均收益18%
  • 进行ecovadis认证有哪些优势?百胜咨询:专业ecovadis认证辅导机构
  • Java并发:线程池
  • 车载软件架构 --- 二级boot设计说明需求规范
  • 阻塞队列-ArrayBlockingQueue
  • C++算法(11):vector作为函数参数的三种传递方式详解
  • Mininet--nodelib.py源码解析
  • Fluent 内置双向流固耦合FSI 液舱晃荡仿真计算
  • Vue的模板语法——指令语法
  • Discuz!与DeepSeek的深度融合:打造智能网址导航新标杆
  • 测试基础笔记第八天
  • 如何解决Enovia许可冲突
  • 抱佛脚之学SSM三
  • Linux操作系统--进程等待
  • 【全网最全】23种设计模式思维导图详解 | 含React/Vue/Spring实战案例
  • JavaScript 闭包:从原理到实战应用
  • 单片机 + 图像处理芯片 + TFT彩屏 进度条控件
  • Nacos 客户端 SDK 的核心功能是什么?是如何与服务端通信的?
  • Qt界面控件中点击触发处理耗时业务的方法