當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
游戏数仓分析（三）SpringBoot项目对数据进行可视化展示，每日注册用户
生活随笔
收集整理的這篇文章主要介紹了
游戏数仓分析（三）SpringBoot项目对数据进行可视化展示，每日注册用户
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在游戲數倉分析（二）SpringBoot項目對數據進行可視化展示中已經做出一定的演示：https://georgedage.blog.csdn.net/article/details/103278405
這里再添加一些指標。并做出另一個頁面。希望對你我有用！
在游戲數倉分析（二）中的代碼項目上進行添加：
【注】這里的hive創表，然后設置中間層，最后sqoop將數據導出到mysql沒有細寫，數據準備階段參考：
create external table t1(line string) location "/GameData/2015-6-12/0001/0007/CharacterCreate";create table CCreate as select split(line,"\\|")[5] as AId, split(line,"\\|")[6] CId, from_unixtime(cast(substr(split(line,"\\|")[8],0,10) as bigint),"yyyy-MM-dd") LTime, split(line,"\\|")[9] , split(line,"\\|")[10] CNamefrom t1;0: jdbc:hive2://henu2:10000> select * from CCreate limit 1; +-----------------------------------+-----------------------------------+----------------+--------------+----------------+--+ | ccreate.aid | ccreate.cid | ccreate.ltime | ccreate.pid | ccreate.cname | +-----------------------------------+-----------------------------------+----------------+--------------+----------------+--+ | d655f33d70064bc995b85d7b39f6789f | e1a5ced3528c4eac986dd64a837f7ba9 | 2014-10-27 | sanguo_01 | gs1001城第2位君主 | +-----------------------------------+-----------------------------------+----------------+--------------+----------------+--+sqoop export --connect jdbc:mysql://henu1:3306/gamedata --username root --password 123 --table CCreate --num-mappers 1 --export-dir /user/hive/warehouse/ccreate --input-fields-terminated-by "\001"游戲數倉分析（一）數據準備階段
https://georgedage.blog.csdn.net/article/details/103264282
記下來說這個！！！?
1.項目架構：
2.庫表數據：CCreate
3.實體類：
package com.henu.bean;import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor;import java.io.Serializable;/*** @author George* @description**/ @Data @NoArgsConstructor @AllArgsConstructor public class CCreate implements Serializable {private String aid;private String cid;private String ltime;private String pid;private String cname; }顯示頁面的數據，只需兩個參數所以這里寫一個類對其進行封裝：?
package com.henu.bean;import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor;/*** @author George* @description**/ @Data @AllArgsConstructor @NoArgsConstructor public class C1 {private Integer num;private String ltime; }4.Dao層
package com.henu.dao; import com.henu.bean.C1; import java.util.List;public interface CCreateDao {List<C1> findRegister(); }5.service層
package com.henu.service; import com.henu.bean.C1; import java.util.List;/*** @author George* @description**/ public interface CCreateService {List<C1> findRegister(); } package com.henu.service;import com.henu.bean.C1; import com.henu.dao.CCreateDao; import lombok.Data; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service;import java.util.List;/*** @author George* @description**/ @Service @Data public class CCreateServiceImpl implements CCreateService{@Autowiredprivate CCreateDao createDao;@Overridepublic List<C1> findRegister() {return createDao.findRegister();} }6.Controller層
package com.henu.controller;import com.henu.bean.C1; import com.henu.bean.CCreate; import com.henu.service.CCreateService; import lombok.Data; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController;import java.util.List;/*** @author George* @description**/ @RestController @Data public class CCreateController {@Autowiredprivate CCreateService createService;@RequestMapping("/findRegister")public List<C1> findRegister(){List<C1> regiters = createService.findRegister();return regiters;}}7.mybatis映射文件
CCreateMapper.xml
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" > <mapper namespace="com.henu.dao.CCreateDao" ><select id="findRegister" resultType="C1">select count(*) num,ltime from CCreate group by ltime</select> </mapper>8.前端頁面bar-gradient.html
<!DOCTYPE html> <html style="height: 100%"> <head><meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script> <script type="text/javascript"src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> <script type="text/javascript">var dom = document.getElementById("container");var myChart = echarts.init(dom);var app = {};var num01s = new Array()var date01s = new Array()$(function () {$.get("findRegister", function (data) {for (var i = 0; i < data.length; i++) {num01s[i] = data[i].numdate01s[i] = data[i].ltime}option = null;var dataAxis = [];var datawq = [];var yMax = 1000;var dataShadow = [];for (var i = 0; i < num01s.length;i ++){datawq.push(num01s[i]);}for (var i = 0; i < date01s.length;i++){dataAxis.push(date01s[i]);}for (var i = 0; i < datawq.length; i++) {dataShadow.push(yMax);}option = {title: {text: '每日注冊用戶',subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'},xAxis: {data: dataAxis,axisLabel: {inside: true,textStyle: {color: '#171717'}},axisTick: {show: false},axisLine: {show: false},z: 10},yAxis: {axisLine: {show: false},axisTick: {show: false},axisLabel: {textStyle: {color: '#999'}}},dataZoom: [{type: 'inside'}],series: [{ // For shadowtype: 'bar',itemStyle: {normal: {color: 'rgba(0,0,0,0.05)'}},barGap: '-100%',barCategoryGap: '40%',data: dataShadow,animation: false},{type: 'bar',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#83bff6'},{offset: 0.5, color: '#188df0'},{offset: 1, color: '#188df0'}])},emphasis: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#2378f7'},{offset: 0.7, color: '#2378f7'},{offset: 1, color: '#83bff6'}])}},data: datawq}]};// Enable data zoom when user click bar.var zoomSize = 6;myChart.on('click', function (params) {console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);myChart.dispatchAction({type: 'dataZoom',startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, datawq.length - 1)]});});;if (option && typeof option === "object") {myChart.setOption(option, true);}// alert(date01s);// alert(num01s);})})</script> </body> </html>運行啟動類
訪問http://localhost:9999/e2/bar-gradient.html
注可以滑輪放大！
真的很煩！！！人生的歷程吧，慢慢長大！！！
總結
以上是生活随笔為你收集整理的游戏数仓分析（三）SpringBoot项目对数据进行可视化展示，每日注册用户的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SpringBoot如何把mysql中的
- 下一篇： IDEA显示Run Dashboard窗