实时数据
This commit is contained in:
parent
61c3e9026b
commit
2fdd2aff88
14
package.json
14
package.json
|
|
@ -21,13 +21,13 @@
|
||||||
"husky:install": "husky install"
|
"husky:install": "husky install"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@jeecg/online": "3.6.2-beta",
|
|
||||||
"@iconify/iconify": "^3.1.1",
|
|
||||||
"@ant-design/colors": "^7.0.2",
|
"@ant-design/colors": "^7.0.2",
|
||||||
"@ant-design/icons-vue": "^7.0.1",
|
"@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",
|
"@vue/shared": "^3.3.4",
|
||||||
"@vueuse/core": "^10.7.1",
|
"@vueuse/core": "^10.7.1",
|
||||||
"@tinymce/tinymce-vue": "^4.0.7",
|
|
||||||
"@zxcvbn-ts/core": "^3.0.4",
|
"@zxcvbn-ts/core": "^3.0.4",
|
||||||
"ant-design-vue": "^4.1.2",
|
"ant-design-vue": "^4.1.2",
|
||||||
"axios": "^1.6.4",
|
"axios": "^1.6.4",
|
||||||
|
|
@ -40,6 +40,8 @@
|
||||||
"dayjs": "^1.11.10",
|
"dayjs": "^1.11.10",
|
||||||
"dom-align": "^1.12.4",
|
"dom-align": "^1.12.4",
|
||||||
"echarts": "^5.4.3",
|
"echarts": "^5.4.3",
|
||||||
|
"element-plus": "^2.7.2",
|
||||||
|
"element-ui": "^2.15.14",
|
||||||
"emoji-mart-vue-fast": "^15.0.0",
|
"emoji-mart-vue-fast": "^15.0.0",
|
||||||
"enquire.js": "^2.1.6",
|
"enquire.js": "^2.1.6",
|
||||||
"intro.js": "^7.2.0",
|
"intro.js": "^7.2.0",
|
||||||
|
|
@ -51,8 +53,8 @@
|
||||||
"path-to-regexp": "^6.2.1",
|
"path-to-regexp": "^6.2.1",
|
||||||
"pinia": "2.1.7",
|
"pinia": "2.1.7",
|
||||||
"print-js": "^1.6.0",
|
"print-js": "^1.6.0",
|
||||||
"qs": "^6.11.2",
|
|
||||||
"qrcode": "^1.5.3",
|
"qrcode": "^1.5.3",
|
||||||
|
"qs": "^6.11.2",
|
||||||
"resize-observer-polyfill": "^1.5.1",
|
"resize-observer-polyfill": "^1.5.1",
|
||||||
"showdown": "^2.1.0",
|
"showdown": "^2.1.0",
|
||||||
"sortablejs": "^1.15.1",
|
"sortablejs": "^1.15.1",
|
||||||
|
|
@ -77,6 +79,7 @@
|
||||||
"@commitlint/config-conventional": "^18.4.3",
|
"@commitlint/config-conventional": "^18.4.3",
|
||||||
"@iconify/json": "^2.2.164",
|
"@iconify/json": "^2.2.164",
|
||||||
"@purge-icons/generated": "^0.10.0",
|
"@purge-icons/generated": "^0.10.0",
|
||||||
|
"@rys-fe/vite-plugin-theme": "^0.8.6",
|
||||||
"@types/codemirror": "^5.60.15",
|
"@types/codemirror": "^5.60.15",
|
||||||
"@types/crypto-js": "^4.2.1",
|
"@types/crypto-js": "^4.2.1",
|
||||||
"@types/fs-extra": "^11.0.4",
|
"@types/fs-extra": "^11.0.4",
|
||||||
|
|
@ -138,6 +141,7 @@
|
||||||
"ts-jest": "^29.1.1",
|
"ts-jest": "^29.1.1",
|
||||||
"ts-node": "^10.9.2",
|
"ts-node": "^10.9.2",
|
||||||
"typescript": "^4.9.5",
|
"typescript": "^4.9.5",
|
||||||
|
"unocss": "^0.58.3",
|
||||||
"vite": "^4.4.9",
|
"vite": "^4.4.9",
|
||||||
"vite-plugin-compression": "^0.5.1",
|
"vite-plugin-compression": "^0.5.1",
|
||||||
"vite-plugin-html": "^3.2.1",
|
"vite-plugin-html": "^3.2.1",
|
||||||
|
|
@ -145,9 +149,7 @@
|
||||||
"vite-plugin-mock": "^2.9.6",
|
"vite-plugin-mock": "^2.9.6",
|
||||||
"vite-plugin-purge-icons": "^0.10.0",
|
"vite-plugin-purge-icons": "^0.10.0",
|
||||||
"vite-plugin-svg-icons": "^2.0.1",
|
"vite-plugin-svg-icons": "^2.0.1",
|
||||||
"@rys-fe/vite-plugin-theme": "^0.8.6",
|
|
||||||
"vite-plugin-vue-setup-extend-plus": "^0.1.0",
|
"vite-plugin-vue-setup-extend-plus": "^0.1.0",
|
||||||
"unocss": "^0.58.3",
|
|
||||||
"vue-eslint-parser": "^9.3.2",
|
"vue-eslint-parser": "^9.3.2",
|
||||||
"vue-tsc": "^1.8.27"
|
"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