Big-Data-Lab
/
AI-VUE
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

刘家

This commit is contained in:
hh 2024-04-29 18:27:41 +08:00
parent 54f5c2b529
commit 093c6192bf
12 changed files with 1768 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "0.1.0",
"dependencies": {
"core-js": "^3.8.3",
"echarts": "^5.5.0",
"element-ui": "^2.15.14",
"less-loader": "^12.2.0",
"vue": "^2.6.14",
@ -5088,6 +5089,20 @@
"node": ">=6.0.0"
}
},
"node_modules/echarts": {
"version": "5.5.0",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.0.tgz",
"integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==",
"dependencies": {
"tslib": "2.3.0",
"zrender": "5.5.0"
}
},
"node_modules/echarts/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
},
"node_modules/ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@ -11454,6 +11469,19 @@
"resolved": "https://registry.npmmirror.com/yallist/-/yallist-2.1.2.tgz",
"integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
"dev": true
},
"node_modules/zrender": {
"version": "5.5.0",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.5.0.tgz",
"integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==",
"dependencies": {
"tslib": "2.3.0"
}
},
"node_modules/zrender/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
},
"dependencies": {
@ -15376,6 +15404,22 @@
"integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==",
"dev": true
},
"echarts": {
"version": "5.5.0",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.0.tgz",
"integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==",
"requires": {
"tslib": "2.3.0",
"zrender": "5.5.0"
},
"dependencies": {
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
}
},
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@ -20366,6 +20410,21 @@
"dev": true
}
}
},
"zrender": {
"version": "5.5.0",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.5.0.tgz",
"integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==",
"requires": {
"tslib": "2.3.0"
},
"dependencies": {
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
}
}
}
}

1
package.json
View File

@ -9,6 +9,7 @@
},
"dependencies": {
"core-js": "^3.8.3",
"echarts": "^5.5.0",
"element-ui": "^2.15.14",
"less-loader": "^12.2.0",
"vue": "^2.6.14",

34
src/App.vue
View File

@ -1,14 +1,14 @@
<template>
<div class="peripheral">
<el-row class="card">
<el-col :span="4" style="height: 100%;padding: 10px">
<el-col :span="4" style="height: 100%;padding: 6px">
<el-card style="height: 100%;">
<MenuList @change="switchMenu"></MenuList>
</el-card>
</el-col>
<el-col :span="20" style="height: 100%;padding: 10px">
<el-card style="height: 100%;">
<component :is="currentComponent"></component>
<el-col :span="20" style="height: 100%;padding: 6px">
<el-card style="height: 100%;" :body-style="{ height: '95%', width: '100%' }">
<component :is="currentComponent" style="height: 95%;"></component>
</el-card>
</el-col>
</el-row>
@ -17,10 +17,10 @@
<script>
import MenuList from './page/menuList.vue'
import MenuOne from './page/MenuOne.vue';
import MenuTwo from './page/MenuTwo.vue';
import MenuThree from './page/MenuThree.vue';
import MenuFour from './page/MenuFour.vue';
import PageOne from './page/PageOne.vue';
import PageTwo from './page/PageTwo.vue';
import PageThree from './page/PageThree.vue';
import PageFour from './page/PageFour.vue';
export default {
components: {
@ -30,23 +30,23 @@ export default {
return {
menuList: [
{
path: 'MenuOne',
component: MenuOne
path: 'PageOne',
component: PageOne
},
{
path: 'MenuTwo',
component: MenuTwo
path: 'PageTwo',
component: PageTwo
},
{
path: 'MenuThree',
component: MenuThree
path: 'PageThree',
component: PageThree
},
{
path: 'MenuFour',
component: MenuFour
path: 'PageFour',
component: PageFour
}
],
currentComponent: MenuOne
currentComponent: PageOne
}
},
created() {

17
src/page/MenuFour.vue
View File

@ -1,17 +0,0 @@
<template>
<div>4</div>
</template>
<script>
export default {
data() {
return {
}
},
created() {
},
methods: {
}
}
</script>
<style lang="less" scoped></style>

17
src/page/MenuOne.vue
View File

@ -1,17 +0,0 @@
<template>
<div>1</div>
</template>
<script>
export default {
data() {
return {
}
},
created() {
},
methods: {
}
}
</script>
<style lang="less" scoped></style>

17
src/page/MenuThree.vue
View File

@ -1,17 +0,0 @@
<template>
<div>3</div>
</template>
<script>
export default {
data() {
return {
}
},
created() {
},
methods: {
}
}
</script>
<style lang="less" scoped></style>

17
src/page/MenuTwo.vue
View File

@ -1,17 +0,0 @@
<template>
<div>2</div>
</template>
<script>
export default {
data() {
return {
}
},
created() {
},
methods: {
}
}
</script>
<style lang="less" scoped></style>

1206
src/page/PageFour.vue Normal file
View File

File diff suppressed because it is too large Load Diff

257
src/page/PageOne.vue Normal file
View File

@ -0,0 +1,257 @@
<template>
<div class="card">
<!-- <el-row style="height: 100%;">
<el-col :span="12" style="height: 100%;">
<div id="chart1" style="height: 100%;"></div>
</el-col>
<el-col :span="12" style="height: 100%;">
<div id="chart2" style="height: 100%;"></div>
</el-col>
</el-row> -->
<div id="chart1" style="height: 50%;"></div>
<div id="chart2" style="height: 50%;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
}
},
created() {
this.$nextTick(() => {
this.NBchart1();
this.NBchart2();
})
},
methods: {
NBchart1() {
var chartDom = document.getElementById('chart1');
var myChart = echarts.init(chartDom);
var option;
let data = [
{ hour: 0, count: 146309 },
{ hour: 1, count: 138889 },
{ hour: 2, count: 128847 },
{ hour: 3, count: 120973 },
{ hour: 4, count: 112576 },
{ hour: 5, count: 104372 },
{ hour: 6, count: 99483 },
{ hour: 7, count: 103561 },
{ hour: 8, count: 107022 },
{ hour: 9, count: 113571 },
{ hour: 10, count: 119230 },
{ hour: 11, count: 122001 },
{ hour: 12, count: 124386 },
{ hour: 13, count: 125616 },
{ hour: 14, count: 124979 },
{ hour: 15, count: 126296 },
{ hour: 16, count: 133374 },
{ hour: 17, count: 141045 },
{ hour: 18, count: 145971 },
{ hour: 19, count: 152993 },
{ hour: 20, count: 158624 },
{ hour: 21, count: 162193 },
{ hour: 22, count: 158135 },
{ hour: 23, count: 146495 }
];
option = {
title: {
text: '每小时新增用户数量'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: data.map(item => item.hour)
},
yAxis: {
type: 'value'
},
series: [
{
data: data.map(item => item.count),
type: 'line',
smooth: true
}
]
};
option && myChart.setOption(option);
},
NBchart2() {
var chartDom = document.getElementById('chart2');
var myChart = echarts.init(chartDom);
var option;
// 此处有两条线，一条是新增用户，一条是流失用户
// 流失
let data1 = [
{ day: '2023/1/26', count: 9405 },
{ day: '2023/3/16 ', count: 9405 },
{ day: '2023/3/12 ', count: 12164 },
{ day: '2023/3/15 ', count: 8981 },
{ day: '2023/3/7 ', count: 9693 },
{ day: '2023/3/21 ', count: 10706 },
{ day: '2023/3/9 ', count: 16507 },
{ day: '2023/3/19 ', count: 10871 },
{ day: '2023/3/11 ', count: 14919 },
{ day: '2023/3/17 ', count: 10170 },
{ day: '2023/3/20 ', count: 9581 },
{ day: '2023/3/22 ', count: 8967 },
{ day: '2023/3/18 ', count: 10607 },
{ day: '2023/3/14 ', count: 10105 },
{ day: '2023/3/13 ', count: 19523 },
{ day: '2023/3/10 ', count: 34936 },
{ day: '2023/3/8 ', count: 9940 },
{ day: '2023/2/27 ', count: 7971 },
{ day: '2023/2/23 ', count: 8456 },
{ day: '2023/2/2 ', count: 9661 },
{ day: '2023/1/26 ', count: 43444 },
{ day: '2023/2/7 ', count: 9194 },
{ day: '2023/1/28 ', count: 49089 },
{ day: '2023/2/26 ', count: 10287 },
{ day: '2023/2/17 ', count: 8982 },
{ day: '2023/2/6 ', count: 9026 },
{ day: '2023/3/5 ', count: 10929 },
{ day: '2023/2/15 ', count: 21703 },
{ day: '2023/2/9 ', count: 9842 },
{ day: '2023/2/16 ', count: 18849 },
{ day: '2023/2/5 ', count: 9370 },
{ day: '2023/3/3 ', count: 10823 },
{ day: '2023/2/18 ', count: 15192 },
{ day: '2023/2/22 ', count: 9195 },
{ day: '2023/2/3 ', count: 8699 },
{ day: '2023/2/10 ', count: 12165 },
{ day: '2023/3/6 ', count: 10030 },
{ day: '2023/2/12 ', count: 12002 },
{ day: '2023/2/28 ', count: 8498 },
{ day: '2023/2/1 ', count: 9217 },
{ day: '2023/1/27 ', count: 42097 },
{ day: '2023/2/19 ', count: 60733 },
{ day: '2023/3/1 ', count: 7999 },
{ day: '2023/2/25 ', count: 10880 },
{ day: '2023/2/11 ', count: 12160 },
{ day: '2023/1/31 ', count: 25495 },
{ day: '2023/3/2 ', count: 8922 },
{ day: '2023/2/21 ', count: 8878 },
{ day: '2023/1/29 ', count: 38196 },
{ day: '2023/2/14 ', count: 11203 },
{ day: '2023/2/20 ', count: 54872 },
{ day: '2023/1/30 ', count: 26505 },
{ day: '2023/3/4 ', count: 12309 },
{ day: '2023/2/24 ', count: 8848 },
{ day: '2023/2/13 ', count: 11808 },
{ day: '2023/2/4 ', count: 9911 },
{ day: '2023/2/8 ', count: 9926 },
]
let data2 = [
{ day: '2023/1/26 ', count: 70250 },
{ day: '2023/1/27 ', count: 70417 },
{ day: '2023/1/28 ', count: 79227 },
{ day: '2023/1/29 ', count: 63803 },
{ day: '2023/1/30 ', count: 50201 },
{ day: '2023/1/31 ', count: 56522 },
{ day: '2023/2/1 ', count: 83245 },
{ day: '2023/2/2 ', count: 60173 },
{ day: '2023/2/3 ', count: 51659 },
{ day: '2023/2/4 ', count: 60421 },
{ day: '2023/2/5 ', count: 60998 },
{ day: '2023/2/6 ', count: 57203 },
{ day: '2023/2/7 ', count: 71576 },
{ day: '2023/2/8 ', count: 72402 },
{ day: '2023/2/9 ', count: 50143 },
{ day: '2023/2/10 ', count: 53521 },
{ day: '2023/2/11 ', count: 54014 },
{ day: '2023/2/12 ', count: 52231 },
{ day: '2023/2/13 ', count: 50638 },
{ day: '2023/2/14 ', count: 54419 },
{ day: '2023/2/15 ', count: 78707 },
{ day: '2023/2/16 ', count: 56355 },
{ day: '2023/2/17 ', count: 44477 },
{ day: '2023/2/18 ', count: 59447 },
{ day: '2023/2/19 ', count: 117311 },
{ day: '2023/2/20 ', count: 92860 },
{ day: '2023/2/21 ', count: 43720 },
{ day: '2023/2/22 ', count: 42110 },
{ day: '2023/2/23 ', count: 44635 },
{ day: '2023/2/24 ', count: 45648 },
{ day: '2023/2/25 ', count: 49835 },
{ day: '2023/2/26 ', count: 42647 },
{ day: '2023/2/27 ', count: 39140 },
{ day: '2023/2/28 ', count: 42928 },
{ day: '2023/3/1 ', count: 36226 },
{ day: '2023/3/2 ', count: 42775 },
{ day: '2023/3/3 ', count: 48970 },
{ day: '2023/3/4 ', count: 50989 },
{ day: '2023/3/5 ', count: 44726 },
{ day: '2023/3/6 ', count: 41438 },
{ day: '2023/3/7 ', count: 42050 },
{ day: '2023/3/8 ', count: 39826 },
{ day: '2023/3/9 ', count: 62117 },
{ day: '2023/3/10 ', count: 114035 },
{ day: '2023/3/11 ', count: 59038 },
{ day: '2023/3/12 ', count: 45172 },
{ day: '2023/3/13 ', count: 63141 },
{ day: '2023/3/14 ', count: 44502 },
{ day: '2023/3/15 ', count: 42782 },
{ day: '2023/3/16 ', count: 51064 },
{ day: '2023/3/17 ', count: 47506 },
{ day: '2023/3/18 ', count: 44449 },
{ day: '2023/3/19 ', count: 43487 },
{ day: '2023/3/20 ', count: 40666 },
{ day: '2023/3/21 ', count: 46736 },
{ day: '2023/3/22 ', count: 42363 },
]
// 对两个data的时间进行排序
data1.sort((a, b) => new Date(a.day) - new Date(b.day));
data2.sort((a, b) => new Date(a.day) - new Date(b.day));
option = {
title: {
text: '每日新增用户和流失用户数量'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: data1.map(item => item.day)
},
legend: {
data: ['流失用户', '新增用户']
},
yAxis: {
type: 'value'
},
series: [
{
data: data1.map(item => item.count),
type: 'line',
smooth: true,
name: '流失用户'
},
{
data: data2.map(item => item.count),
type: 'line',
smooth: true,
name: '新增用户'
}
]
};
option && myChart.setOption(option);
}
}
}
</script>
<style lang="less" scoped>
.card {
height: 100%;
padding: 10px;
}
</style>

131
src/page/PageThree.vue Normal file
View File

@ -0,0 +1,131 @@
<template>
<div class="card">
<el-row style="height: 100%;">
<el-col :span="12" style="height: 100%;">
<div id="chart1" style="height: 100%;"></div>
</el-col>
<el-col :span="12" style="height: 100%;">
<div id="chart2" style="height: 100%;"></div>
</el-col>
</el-row>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
}
},
created() {
this.$nextTick(() => {
this.NBchart1();
this.NBchart2();
})
},
methods: {
NBchart1() {
var chartDom = document.getElementById('chart1');
var myChart = echarts.init(chartDom);
var option;
let data = [
{ type: 'PVP', battingAverage: 0.452397912, payingUserBattingAverage: 0.746663671, nonPayingUserBattingAverage: 0.39396634 },
{ type: 'PVE', battingAverage: 0.901009265, payingUserBattingAverage: 0.913388548, nonPayingUserBattingAverage: 0.897998177 },
];
option = {
title: {
text: '玩家游戏胜率'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['平均胜率', '付费用户胜率', '非付费用户胜率']
},
xAxis: {
type: 'category',
data: data.map(item => item.type)
},
yAxis: {
type: 'value'
},
series: [
{
name: '平均胜率',
data: data.map(item => item.battingAverage),
type: 'bar'
},
{
name: '付费用户胜率',
data: data.map(item => item.payingUserBattingAverage),
type: 'bar'
},
{
name: '非付费用户胜率',
data: data.map(item => item.nonPayingUserBattingAverage),
type: 'bar'
}
]
};
option && myChart.setOption(option);
},
NBchart2() {
var chartDom = document.getElementById('chart2');
var myChart = echarts.init(chartDom);
var option;
let data = [
{ type: 'PVP', averageGames: 2.232661767, payingUserAverageGames: 30.62432598, nonPayingUserAverageGames: 1.885549415 },
{ type: 'PVE', averageGames: 3.164516107, payingUserAverageGames: 51.26015353, nonPayingUserAverageGames: 2.576505848 },
];
option = {
title: {
text: '玩家游戏场次'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['平均场次', '付费用户平均场次', '非付费用户平均场次']
},
xAxis: {
type: 'category',
data: data.map(item => item.type)
},
yAxis: {
type: 'value'
},
series: [
{
name: '平均场次',
data: data.map(item => item.averageGames),
type: 'bar'
},
{
name: '付费用户平均场次',
data: data.map(item => item.payingUserAverageGames),
type: 'bar'
},
{
name: '非付费用户平均场次',
data: data.map(item => item.nonPayingUserAverageGames),
type: 'bar'
}
]
};
option && myChart.setOption(option);
}
}
}
</script>
<style lang="less" scoped>
.card {
height: 100%;
padding: 10px;
}
</style>

67
src/page/PageTwo.vue Normal file
View File

@ -0,0 +1,67 @@
<template>
<div class="card">
<div id="chart1" style="height: 100%;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
}
},
created() {
this.$nextTick(() => {
this.NBchart1();
})
},
methods: {
NBchart1() {
var chartDom = document.getElementById('chart1');
var myChart = echarts.init(chartDom);
var option;
let data = [
{ type: '零氪', count: 13.41 },
{ type: '低氪', count: 127.15 },
{ type: '中氪', count: 198.97 },
{ type: '高氪', count: 339.63 },
];
option = {
title: {
text: '不同氪金档位平均在线时长'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: data.map(item => item.type)
},
yAxis: {
type: 'value'
},
series: [
{
data: data.map(item => item.count),
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
option && myChart.setOption(option);
},
}
}
</script>
<style lang="less" scoped>
.card {
height: 100%;
padding: 10px;
}
</style>

47
src/page/menuList.vue
View File

@ -1,22 +1,32 @@
<template>
<el-menu default-active="1" @select="changeMenu">
<el-menu-item index="MenuOne">
<i class="el-icon-s-ticket"></i>
<span slot="title">菜单1</span>
</el-menu-item>
<el-menu-item index="MenuTwo">
<i class="el-icon-menu"></i>
<span slot="title">菜单2</span>
</el-menu-item>
<el-menu-item index="MenuThree">
<i class="el-icon-document"></i>
<span slot="title">菜单3</span>
</el-menu-item>
<el-menu-item index="MenuFour">
<i class="el-icon-setting"></i>
<span slot="title">菜单4</span>
</el-menu-item>
</el-menu>
<div>
<div style="text-align: center;padding-bottom: 20px;border-bottom: 1px solid #e1e8f8;">
<div style="font-size: 25px;">
《野蛮时代》
</div>
<div style="font-size: 20px;">
玩家数据分析系统
</div>
</div>
<el-menu default-active="1" @select="changeMenu">
<el-menu-item index="PageOne">
<i class="el-icon-s-ticket"></i>
<span slot="title">用户变化</span>
</el-menu-item>
<el-menu-item index="PageTwo">
<i class="el-icon-menu"></i>
<span slot="title">用户活跃度</span>
</el-menu-item>
<el-menu-item index="PageThree">
<i class="el-icon-document"></i>
<span slot="title">用户游戏情况</span>
</el-menu-item>
<el-menu-item index="PageFour">
<i class="el-icon-setting"></i>
<span slot="title">未来付费情况预测</span>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
@ -29,6 +39,7 @@ export default {
},
methods: {
changeMenu(key, keyPath) {
console.log(key, keyPath)
this.$emit('change', key)
}
}