在游戏数仓分析（二）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项目对数据进行可视化展示
项目架构: 1.新创建war项目 2.补全项目结构文件夹 3.添加依赖Pom.xml: <?xml version="1.0" encoding="UTF-8&qu ...
游戏数仓分析（一）数据准备阶段
这各项目中有大量的指标,这里先只做一个进行分析 ,后续再更. 1.分析指标每日登陆人数用户在N天内每日的登陆人数. 2.静态分析数据静态观察CharacterLogin中的20141027. ...
每天和琦琦学点新知识_大数据_数仓分析
数仓分析 ShopXO免费开源商城系统.国内领先企业级B2C免费开源电商系统,包含PC.h5.微信小程序.支付宝小程序.百度小程序.头条&抖音小程序.QQ小程序.APP.多商户,遵循MIT开源 ...
大数据-案例-离线数仓-在线教育：MySQL(业务数据)-ETL(Sqoop)-＞Hive数仓【ODS层-数据清洗-＞DW层(DWD-统计分析-＞DWS)】-导出(Sqoop)-＞MySQL-＞可视化
一.商业BI系统概述商业智能系统,通常简称为商业智能系统,是商业智能软件的简称,是为提高企业经营绩效而采用的一系列方法.技术和软件的总和.通常被理解为将企业中的现有数据转换为知识并帮助企业做出明智的 ...
数仓（三）简析阿里、美团、网易、恒丰银行、马蜂窝5家数仓分层架构
上一篇我们介绍了数据集市的概念以及它和数仓的区别,并且重点论述了大数据数仓中的分层架构体系. 这篇我们简要分析一下以下5家公司的数仓分层架构模型: 1.马蜂窝数仓分层架构 2.阿里云MaxComput ...
离线数仓（三）数仓建模基本理论
1.建模目标数据模型就是数据组织和存储方法,它强调从业务.数据存取和使用角度合理存储数据.Linux的创始人Torvalds有一段关于"什么才是优秀程序员"的话:"烂程 ...
数仓实战|一文看懂数据中台接口数据采集
作者简介:王春波,<高效使用Greenplum:入门.进阶和数据中台>作者,"数据中台研习社"号主,十年数据开发从业者,资深零售数仓项目实施专家. 以下内容摘自< ...
大数据三维可视化展示系统的应用分析
伴随着数据在当今互联网飞速发展下变的维度更广,数量更大.构造越来越复杂,人们要想更为清晰,飞速的认识和理解一份数据,传统的二维平面图表已经无法满足需求,三维可视化技术越结合多媒体技术.网络技术及其三维 ...
实战 | 用Python爬取《云南虫谷》3.6万条评论，并做数据统计可视化展示分析，好看！...
最近鬼吹灯系列网剧<云南虫谷>上线,作为鬼吹灯系列作品,承接上部<龙岭迷窟>内容,且还是铁三角原班人马主演,网友直呼非常好看! 今天,我们就用Python爬取目前全部剧集的评论 ...

游戏数仓分析（三）SpringBoot项目对数据进行可视化展示，每日注册用户