當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

谷粒学院（十九）统计分析模块 | 定时任务 | echarts

發布時間：2024/1/8 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了谷粒学院（十九）统计分析模块 | 定时任务 | echarts 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1、統計分析模塊需求分析

一、統計分析功能 - 后端

1、準備數據庫

guli_statistics.sql

2、在service模塊下創建子模塊

service_statistics

3、MP代碼生成器生成代碼

4、application.properties

resources目錄下創建文件

# 服務端口 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?serverTimezone=GMT%2B8 spring.datasource.username=root spring.datasource.password=123456#返回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/kuang/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#開啟熔斷機制 #feign.hystrix.enabled=true # 設置hystrix超時時間，默認1000ms #hystrix.command.default.execution.isolation.thread.timeoutInMilliseconds=3000

5、創建SpringBoot啟動類

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

6、在service_ucenter模塊創建接口，統計某一天的注冊人數

controller

@ApiOperation(value = "查詢某一天注冊人數") @GetMapping("countRegister/{day}") public R countRegister(@PathVariable String day) {Integer count = memberService.countRegisterDay(day);return R.ok().data("countRegister",count); }

service

//查詢某一天注冊人數 @Override public Integer countRegisterDay(String day) {return baseMapper.countRegisterDay(day); }

mapper

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

7、在service_statistics模塊創建遠程調用接口

創建client包和UcenterClient接口

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

8、在service_statistics模塊調用微服務

controller

@Api(description = "統計管理模塊") @RestController @RequestMapping("/staservice/sta") @CrossOrigin public class StatisticsDailyController {@Autowiredprivate StatisticsDailyService staService;@ApiOperation(value = "統計某一天注冊人數，生成統計數據")@PostMapping("registerCount/{day}")public R registerCount(@PathVariable String day) {staService.registerCount(day);return R.ok();}}

service

@Service public class StatisticsDailyServiceImpl extends ServiceImpl<StatisticsDailyMapper, StatisticsDaily> implements StatisticsDailyService {@Autowiredprivate UcenterClient ucenterClient;//統計某一天注冊人數,生成統計數據@Overridepublic void registerCount(String day) {//添加記錄之前刪除表相同日期都得數據QueryWrapper<StatisticsDaily> wrapper = new QueryWrapper<>();wrapper.eq("date_calculated",day);baseMapper.delete(wrapper);//遠程調用得到某一天的注冊人數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);} }

9、使用swagger進行測試

二、統計分析功能 - 前端

1、nginx配置

2、增加路由

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' }}] },

3、創建api

創建src/api/sta.js

import request from '@/utils/request'export default{//生成統計數據createStaData(day) {return request({url: `/staservice/sta/registerCount/${day}`,method: 'post'})}}

4、創建組件

src/views/sta/create.vue
模板部分

script部分

三、添加定時任務

1、在啟動類上添加注解

2、創建定時任務類，使用cron表達式

@Component public class ScheduleTask {@Autowiredprivate StatisticsDailyService staService;// 0/5 * * * * ?表示每隔5秒執行一次這個方法@Scheduled(cron = "0/5 * * * * ?")public void task1() {System.out.println("**************task1執行了..");}//在每天凌晨1點，把前一天數據進行數據查詢添加@Scheduled(cron = "0 0 1 * * ?")public void task2() {staService.registerCount(DateUtil.formatDate(DateUtil.addDays(new Date(), -1)));}}

3、復制日期工具類

public class DateUtil {private static final String dateFormat = "yyyy-MM-dd";/*** 格式化日期** @param date* @return*/public static String formatDate(Date date) {SimpleDateFormat sdf = new SimpleDateFormat(dateFormat);return sdf.format(date);}/*** 在日期date上增加amount天。** @param date 處理的日期，非null* @param amount 要加的天數，可能為負數*/public static Date addDays(Date date, int amount) {Calendar now =Calendar.getInstance();now.setTime(date);now.set(Calendar.DATE,now.get(Calendar.DATE)+amount);return now.getTime();}public static void main(String[] args) {System.out.println(DateUtil.formatDate(new Date()));System.out.println(DateUtil.formatDate(DateUtil.addDays(new Date(), -1)));} }

4、在線生成cron表達式

http://cron.qqe2.com/

cron工具生成的是七位，在整合SpringBoot的時候只需要寫六位；他的年默認為當前年。

四、ECharts

1、簡介

ECharts是百度的一個項目，后來百度把Echart捐給apache，用于圖表展示，提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統計的盒形圖，用于地理數據可視化的地圖、熱力圖、線圖，用于關系數據可視化的關系圖、treemap、旭日圖，多維數據可視化的平行坐標，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。
官方網站：https://echarts.apache.org/zh/index.html

2、基本使用

入門參考：官網->文檔->教程->5分鐘上手ECharts

（1）創建html頁面：柱圖.html

（2）引入ECharts

<script src="echarts.min.js"></script>

（3）定義圖表區域

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

（4）渲染圖表

3、折線圖

實例參考：官網->實例->官方實例 https://echarts.apache.org/examples/zh/index.html
折線圖.html

五、項目中集成ECharts

1、安裝ECharts

npm install --save echarts@4.1.0

2、創建組件

src/views/statistics/daily/chart.vue

模板

js：暫時顯示臨時數據

3、完成后端業務

（1）controller

@ApiOperation(value = "圖表顯示，返回兩個部分數據，日期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); }

（2）service

//圖表顯示，返回兩個部分數據，日期json數組，數量json數據 @Override public Map<String, Object> getShowData(String type, String begin, String end) {//根據條件查詢對應的數據QueryWrapper<StatisticsDaily> wrapper = new QueryWrapper<>();wrapper.between("date_calculated",begin,end);wrapper.select("date_calculated",type);List<StatisticsDaily> staList = baseMapper.selectList(wrapper);//因為返回有兩部分數據：日期和日期對象的數量//前端要求數據json結構，對應后端java代碼時list集合//創建兩個list集合，一個日期list，一個數量listList<String> date_calculatedList = new ArrayList<>();List<Integer> numDataList = new ArrayList<>();//遍歷查詢所有的數據集合list集合，進行封裝for (int i = 0; i < staList.size(); i++) {StatisticsDaily daily = staList.get(i);//封裝日期list集合date_calculatedList.add(daily.getDateCalculated());//封裝對飲數量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;}}//把封裝之后兩個list集合放到map集合，進行返回Map<String, Object> map =new HashMap<>();map.put("date_calculatedList",date_calculatedList);map.put("numDataList",numDataList);return map; }

4、前后端整合

（1）創建api

src/api/sta.js中添加方法

//生成統計數據 getDataSta(searchObj) {return request({url: `/staservice/sta/showData/${searchObj.type}/${searchObj.begin}/${searchObj.end}`,method: 'get'}) }

（2）chart.vue中引入api模塊

import staApi from '@/api/sta'

（3）修改 showChart 方法

// 準備圖表數據 showChart() {staApi.getDataSta(this.searchObj).then(response => {console.log('*****************'+response)this.yData = response.data.numDataListthis.xData = response.data.date_calculatedList//調用下面生成圖表的方法，改變值this.setChart()}) },

（4）修改options中的數據

// x軸是類目軸（離散數據）,必須通過data設置類目數據 xAxis: {type: 'category',data: this.xData//-------綁定數據 }, // y軸是數據軸（連續數據） yAxis: {type: 'value' }, // 系列列表。每個系列通過 type 決定自己的圖表類型 series: [{// 系列中的數據內容數組data: this.yData,//-------綁定數據// 折線圖type: 'line' }]

（5）樣式調整

顯示標題

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 }],

如果有收獲！！！希望老鐵們來個三連，點贊、收藏、轉發。
創作不易，別忘點個贊，可以讓更多的人看到這篇文章，順便鼓勵我寫出更好的博客

總結

以上是生活随笔為你收集整理的谷粒学院（十九）统计分析模块 | 定时任务 | echarts的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：手机图片怎么做成笔记手机照片笔记怎么制
下一篇： VIRTIO 前后端驱动中 GPA，HV