当前位置：
首页 >
前端技术
> 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窗