实时数据
This commit is contained in:
parent
61c3e9026b
commit
2fdd2aff88
14
package.json
14
package.json
|
|
@ -21,13 +21,13 @@
|
|||
"husky:install": "husky install"
|
||||
},
|
||||
"dependencies": {
|
||||
"@jeecg/online": "3.6.2-beta",
|
||||
"@iconify/iconify": "^3.1.1",
|
||||
"@ant-design/colors": "^7.0.2",
|
||||
"@ant-design/icons-vue": "^7.0.1",
|
||||
"@iconify/iconify": "^3.1.1",
|
||||
"@jeecg/online": "3.6.2-beta",
|
||||
"@tinymce/tinymce-vue": "^4.0.7",
|
||||
"@vue/shared": "^3.3.4",
|
||||
"@vueuse/core": "^10.7.1",
|
||||
"@tinymce/tinymce-vue": "^4.0.7",
|
||||
"@zxcvbn-ts/core": "^3.0.4",
|
||||
"ant-design-vue": "^4.1.2",
|
||||
"axios": "^1.6.4",
|
||||
|
|
@ -40,6 +40,8 @@
|
|||
"dayjs": "^1.11.10",
|
||||
"dom-align": "^1.12.4",
|
||||
"echarts": "^5.4.3",
|
||||
"element-plus": "^2.7.2",
|
||||
"element-ui": "^2.15.14",
|
||||
"emoji-mart-vue-fast": "^15.0.0",
|
||||
"enquire.js": "^2.1.6",
|
||||
"intro.js": "^7.2.0",
|
||||
|
|
@ -51,8 +53,8 @@
|
|||
"path-to-regexp": "^6.2.1",
|
||||
"pinia": "2.1.7",
|
||||
"print-js": "^1.6.0",
|
||||
"qs": "^6.11.2",
|
||||
"qrcode": "^1.5.3",
|
||||
"qs": "^6.11.2",
|
||||
"resize-observer-polyfill": "^1.5.1",
|
||||
"showdown": "^2.1.0",
|
||||
"sortablejs": "^1.15.1",
|
||||
|
|
@ -77,6 +79,7 @@
|
|||
"@commitlint/config-conventional": "^18.4.3",
|
||||
"@iconify/json": "^2.2.164",
|
||||
"@purge-icons/generated": "^0.10.0",
|
||||
"@rys-fe/vite-plugin-theme": "^0.8.6",
|
||||
"@types/codemirror": "^5.60.15",
|
||||
"@types/crypto-js": "^4.2.1",
|
||||
"@types/fs-extra": "^11.0.4",
|
||||
|
|
@ -138,6 +141,7 @@
|
|||
"ts-jest": "^29.1.1",
|
||||
"ts-node": "^10.9.2",
|
||||
"typescript": "^4.9.5",
|
||||
"unocss": "^0.58.3",
|
||||
"vite": "^4.4.9",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-html": "^3.2.1",
|
||||
|
|
@ -145,9 +149,7 @@
|
|||
"vite-plugin-mock": "^2.9.6",
|
||||
"vite-plugin-purge-icons": "^0.10.0",
|
||||
"vite-plugin-svg-icons": "^2.0.1",
|
||||
"@rys-fe/vite-plugin-theme": "^0.8.6",
|
||||
"vite-plugin-vue-setup-extend-plus": "^0.1.0",
|
||||
"unocss": "^0.58.3",
|
||||
"vue-eslint-parser": "^9.3.2",
|
||||
"vue-tsc": "^1.8.27"
|
||||
},
|
||||
|
|
|
|||
9741
pnpm-lock.yaml
9741
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,432 @@
|
|||
<template>
|
||||
<div class="card">
|
||||
<a-card title="直播实时数据分析" :loading="loading" :bordered="false">
|
||||
<a-row style="height: 100%;width: 98%;">
|
||||
<a-col :span="12" style="height: 100%;padding: 6px">
|
||||
<a-card style="height: 400px; width:100%; border-radius: 10px;"
|
||||
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
|
||||
<div style="font-size: 30px;font-weight: bold;padding-bottom: 15px;">直播概况</div>
|
||||
<div style="display: flex; flex-wrap: wrap; justify-content: center; padding-top: 15px;">
|
||||
<div style="flex: 50%; text-align: center; padding: 5px;">
|
||||
<div style="font-size: 20px; font-weight: bold;">活跃观众</div>
|
||||
<div style="font-size: 40px;">{{ num }}</div>
|
||||
</div>
|
||||
<div style="flex: 50%; text-align: center; padding: 5px;">
|
||||
<div style="font-size: 14px;font-weight: bold;">平均热度</div>
|
||||
<div style="font-size: 40px;">{{ redu }}</div>
|
||||
</div>
|
||||
<div style="flex: 50%; text-align: center; padding: 5px;">
|
||||
<div style="font-size: 14px;font-weight: bold;">弹幕数量</div>
|
||||
<div style="font-size: 40px;">{{ danmu }}</div>
|
||||
</div>
|
||||
<div style="flex: 50%; text-align: center; padding: 5px;">
|
||||
<div style="font-size: 14px;font-weight: bold;">礼物数量</div>
|
||||
<div style="font-size: 40px;">{{ liwu }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
</a-col>
|
||||
<a-col :span="12" style="height: 100%;padding: 6px">
|
||||
<a-card style="height: 400px; width:115%; border-radius: 10px;"
|
||||
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
|
||||
<div id="main2" style="height: 100%; width: 110%"></div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row style="height: 100%; width: 98%; display: flex; justify-content: space-between;">
|
||||
<a-col :span="12" style="height: 100%; padding: 6px">
|
||||
<a-card style="height: 400px; width:100%; border-radius: 10px;"
|
||||
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
|
||||
<div id="main3" style="height: 100%; width: 100%"></div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="12" style="height: 100%; padding: 6px">
|
||||
<a-card style="height: 400px; width:100%; border-radius: 10px;"
|
||||
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
|
||||
<div id="main1" style="height: 100%; width: 100%"></div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- <template #extra>
|
||||
<a-button type="primary" @click="getData()">同步数据</a-button>
|
||||
</template>
|
||||
<a-table :columns="columns" :data-source="datasets" bordered>
|
||||
</a-table> -->
|
||||
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '主播',
|
||||
dataIndex: 'name',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '活跃观众',
|
||||
dataIndex: 'Aperson',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '弹幕数量',
|
||||
dataIndex: 'Cnumber',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '弹幕人数',
|
||||
dataIndex: 'Cperson',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '礼物人数',
|
||||
dataIndex: 'Gperson',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '礼物总值(元)',
|
||||
dataIndex: 'Gsum',
|
||||
align: 'center',
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
datasets: [
|
||||
{
|
||||
name: '英雄联盟赛事',
|
||||
Aperson: 59523,
|
||||
Cnumber: 64785,
|
||||
Cperson: 29715,
|
||||
Gperson: 268,
|
||||
Gsum: 1396,
|
||||
},
|
||||
{
|
||||
name: 'MrGemini',
|
||||
Aperson: 32988,
|
||||
Cnumber: 30731,
|
||||
Cperson: 10369,
|
||||
Gperson: 9443,
|
||||
Gsum: 74918,
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: '金咕咕金咕咕doinb',
|
||||
Aperson: 32036,
|
||||
Cnumber: 71838,
|
||||
Cperson: 11965,
|
||||
Gperson: 3354,
|
||||
Gsum: 32585,
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
name: '进击的神乐',
|
||||
Aperson: 31701,
|
||||
Cnumber: 27065,
|
||||
Cperson: 8067,
|
||||
Gperson: 733,
|
||||
Gsum: 7334,
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
name: '即将拥有人鱼线的PDD',
|
||||
Aperson: 30510,
|
||||
Cnumber: 20,
|
||||
Cperson: 20,
|
||||
Gperson: 2408,
|
||||
Gsum: 12930,
|
||||
},
|
||||
{
|
||||
key: '6',
|
||||
name: '叫我老陈就好了',
|
||||
Aperson: 30356,
|
||||
Cnumber: 35978,
|
||||
Cperson: 8772,
|
||||
Gperson: 1946,
|
||||
Gsum: 15495,
|
||||
},
|
||||
{
|
||||
key: '7',
|
||||
name: '王者荣耀官方赛事',
|
||||
Aperson: 30146,
|
||||
Cnumber: 16291,
|
||||
Cperson: 13303,
|
||||
Gperson: 59,
|
||||
Gsum: 293,
|
||||
},
|
||||
{
|
||||
key: '8',
|
||||
name: 'Xleft小叮当',
|
||||
Aperson: 29596,
|
||||
Cnumber: 27503,
|
||||
Cperson: 8337,
|
||||
Gperson: 3799,
|
||||
Gsum: 25646,
|
||||
},
|
||||
{
|
||||
key: '9',
|
||||
name: '进击D神乐',
|
||||
Aperson: 28654,
|
||||
Cnumber: 10968,
|
||||
Cperson: 6090,
|
||||
Gperson: 304,
|
||||
Gsum: 4922,
|
||||
},
|
||||
{
|
||||
key: '10',
|
||||
name: '狂仔酷炫',
|
||||
Aperson: 28537,
|
||||
Cnumber: 7290,
|
||||
Cperson: 5090,
|
||||
Gperson: 90,
|
||||
Gsum: 321,
|
||||
},
|
||||
{
|
||||
key: '11',
|
||||
name: 'pigff',
|
||||
Aperson: 27975,
|
||||
Cnumber: 23003,
|
||||
Cperson: 7454,
|
||||
Gperson: 2204,
|
||||
Gsum: 18051,
|
||||
},
|
||||
{
|
||||
key: '12',
|
||||
name: '谢彬DD',
|
||||
Aperson: 27408,
|
||||
Cnumber: 56633,
|
||||
Cperson: 12039,
|
||||
Gperson: 1575,
|
||||
Gsum: 14466,
|
||||
},
|
||||
],
|
||||
columns,
|
||||
loading: false,
|
||||
data2: [
|
||||
59523,
|
||||
32988,
|
||||
32036,
|
||||
31701,
|
||||
30510,
|
||||
30356,
|
||||
30146,
|
||||
29596,
|
||||
28654,
|
||||
28537,
|
||||
],
|
||||
data3: [8002323, 10002304, 12938683.5],
|
||||
data4: [10869, 11108, 12109],
|
||||
num: 4149861,
|
||||
redu: 31904,
|
||||
danmu: 9028189,
|
||||
liwu: 303691,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
//将数据进行随机的加减变化
|
||||
this.datasets.forEach((item) => {
|
||||
item.Aperson += Math.floor(Math.random() * 100);
|
||||
item.Cnumber += Math.floor(Math.random() * 50);
|
||||
item.Cperson += Math.floor(Math.random() * 10);
|
||||
item.Gperson += Math.floor(Math.random() * 10);
|
||||
item.Gsum += Math.floor(Math.random() * 1000);
|
||||
});
|
||||
this.loading = false;
|
||||
}, 2000);
|
||||
},
|
||||
initChart1() {
|
||||
this.chartInstance2 = echarts.init(document.getElementById('main1'));
|
||||
const option = {
|
||||
title: {
|
||||
text: '主播实时热度排行'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
name: '热度'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: [
|
||||
"英雄联盟赛事",
|
||||
"MrGemini",
|
||||
"金咕咕金咕咕doinb",
|
||||
"进击的神乐",
|
||||
"即将拥有人鱼线的PDD",
|
||||
"叫我老陈就好了",
|
||||
"王者荣耀官方赛事",
|
||||
"Xleft小叮当",
|
||||
"进击D神乐",
|
||||
"狂仔酷炫",
|
||||
],
|
||||
name: '主播'
|
||||
},
|
||||
legend: {
|
||||
data: ['热度']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: this.data2,
|
||||
type: 'bar',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right'
|
||||
},
|
||||
name: '热度'
|
||||
}
|
||||
]
|
||||
};
|
||||
this.chartInstance2.setOption(option);
|
||||
},
|
||||
updateData1() {
|
||||
setInterval(() => {
|
||||
// 每个数据为随机+20-50
|
||||
this.data2 = this.data2.map(item => item + Math.floor(Math.random() * 31) + 20);
|
||||
// 对数据进行排序
|
||||
this.data2.sort((a, b) => a - b);
|
||||
this.chartInstance2.setOption({
|
||||
series: [{
|
||||
data: this.data2
|
||||
}]
|
||||
});
|
||||
}, 1000);
|
||||
},
|
||||
initChart2() {
|
||||
this.chartInstance3 = echarts.init(document.getElementById('main2'));
|
||||
const option = {
|
||||
title: {
|
||||
text: '礼物实时总值'
|
||||
},
|
||||
legend: {
|
||||
data: ['礼物总值']
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
name: '每10分钟'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '礼物总值'
|
||||
},
|
||||
series: [{
|
||||
data: this.data3,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
name: '礼物总值',
|
||||
itemStyle: {
|
||||
opacity: 0
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2
|
||||
}
|
||||
}]
|
||||
}
|
||||
this.chartInstance3.setOption(option);
|
||||
},
|
||||
updateData3() {
|
||||
setInterval(() => {
|
||||
if (this.data3.length >= 60) {
|
||||
this.data3.shift();
|
||||
}
|
||||
this.data3.push(Math.floor(Math.random() * (5000 - 2000 + 1)) + 2000 + this.data3[this.data3.length - 1]);
|
||||
this.chartInstance3.setOption({
|
||||
xAxis: {
|
||||
data: this.data3.map((item, index) => {
|
||||
const date = new Date();
|
||||
date.setMinutes(date.getMinutes() - this.data3.length + index);
|
||||
return `${date.getHours()}:${date.getMinutes()}`;
|
||||
})
|
||||
},
|
||||
series: [{
|
||||
data: this.data3
|
||||
}]
|
||||
});
|
||||
}, 1000);
|
||||
},
|
||||
initChart3() {
|
||||
this.chartInstance4 = echarts.init(document.getElementById('main3'));
|
||||
const option = {
|
||||
title: {
|
||||
text: '每小时弹幕人数'
|
||||
},
|
||||
legend: {
|
||||
data: ['弹幕人数']
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
name: '每小时'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '弹幕人数'
|
||||
},
|
||||
series: [{
|
||||
data: this.data4,
|
||||
type: 'line',
|
||||
areaStyle: {},
|
||||
name: '弹幕人数',
|
||||
itemStyle: {
|
||||
opacity: 0
|
||||
}
|
||||
}]
|
||||
}
|
||||
this.chartInstance4.setOption(option);
|
||||
},
|
||||
updateData2() {
|
||||
setInterval(() => {
|
||||
if (this.data4.length >= 24) {
|
||||
this.data4.shift();
|
||||
}
|
||||
this.data4.push(Math.floor(Math.random() * 15000) + 500);
|
||||
this.chartInstance4.setOption({
|
||||
series: [{
|
||||
data: this.data4
|
||||
}]
|
||||
});
|
||||
}, 1000);
|
||||
},
|
||||
updateData4() {
|
||||
setInterval(() => {
|
||||
// + 50-100
|
||||
this.num += Math.floor(Math.random() * 50) + 50;
|
||||
this.redu += Math.floor(Math.random() * 50) + 50;
|
||||
this.danmu += Math.floor(Math.random() * 50) + 50;
|
||||
this.liwu += Math.floor(Math.random() * 50) + 50;
|
||||
}, 1000);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initChart1();
|
||||
this.updateData1();
|
||||
this.initChart2();
|
||||
this.updateData3();
|
||||
this.initChart3();
|
||||
this.updateData2();
|
||||
this.updateData4();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.peripheral {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgb(239, 239, 239);
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue