Big-Data-Lab
/
Completion-template-Vue3.0
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

实时与平台数据

This commit is contained in:
xbx 2024-05-10 16:12:17 +08:00
parent 0ba780b0c5
commit baf2c3040a
2 changed files with 189 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/views/live/analysis.vue
View File

@ -49,6 +49,20 @@
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
<a-row style="height: 100%; width: 98%; display: flex; justify-content: space-between;">
<a-col :span="14" 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="main4" style="height: 100%; width: 100%"></div>
</a-card>
</a-col>
<a-col :span="10" 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="main5" style="height: 100%; width: 100%"></div>
</a-card>
</a-col>
</a-row>
<!-- <template #extra> <!-- <template #extra>
<a-button type="primary" @click="getData()">同步数据</a-button> <a-button type="primary" @click="getData()">同步数据</a-button>
</template> </template>
@ -383,12 +397,95 @@ export default {
} }
this.chartInstance4.setOption(option); this.chartInstance4.setOption(option);
}, },
initChart4() {
this.chartInstance5 = echarts.init(document.getElementById('main4'));
const option = {
title: {
text: '直播时段分析'
},
legend: {
data: ['主播数']
},
xAxis: {
type: 'category',
data: ['0-3点', '3-6点', '6-9点', '9-12点', '12-15点', '15-18点', '18-21点', '21-24点']
},
yAxis: {
type: 'value'
},
series: [
{
name: '主播数',
data: [1297, 21601, 21306, 23156, 30820, 36265, 36129, 36632],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
}
this.chartInstance5.setOption(option);
},
initChart5() {
this.chartInstance6 = echarts.init(document.getElementById('main5'));
const option = {
title: {
text: '直播时长分析'
},
legend: {
data: ['主播数量'],
top: '5%',
left: 'center'
},
series: [
{
name: '主播数量',
data: [
{ value: 48509, name: '0-3小时' },
{ value: 5705, name: '3-6小时' },
{ value: 2948, name: '6-9小时' },
{ value: 1601, name: '9-12小时' },
{ value: 846, name: '12-15小时' },
{ value: 335, name: '15-18小时' },
{ value: 191, name: '18-21小时' },
{ value: 4046, name: '21-24小时' },
{ value: 0, name: '24小时以上' }
],
type: 'pie',
radius: ['40%', '70%'],
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
}
]
}
this.chartInstance6.setOption(option);
},
updateData2() { updateData2() {
setInterval(() => { setInterval(() => {
if (this.data4.length >= 24) { if (this.data4.length >= 24) {
this.data4.shift(); this.data4.shift();
} }
this.data4.push(Math.floor(Math.random() * 15000) + 500); this.data4.push(Math.floor(Math.random() * 1500) + 10000);
this.chartInstance4.setOption({ this.chartInstance4.setOption({
series: [{ series: [{
data: this.data4 data: this.data4
@ -414,6 +511,8 @@ export default {
this.initChart3(); this.initChart3();
this.updateData2(); this.updateData2();
this.updateData4(); this.updateData4();
this.initChart4();
this.initChart5();
}, },
} }
</script> </script>

150
src/views/live/realTime.vue
View File

@ -3,32 +3,49 @@
<div class="grid"> <div class="grid">
<a-card title="直播实时数据分析" :loading="loading" :bordered="false"> <a-card title="直播实时数据分析" :loading="loading" :bordered="false">
<template #extra> <template #extra>
<div style="font-size: 25px;">当前主播为 林cute哟</div> <div style="font-size: 25px;">当前主播为
<a-tag color="pink" style="font-size: 20px;">林cute哟</a-tag>
</div>
</template> </template>
<a-row style="height: 100%;width: 98%;"> <a-row style="height: 100%;width: 98%;">
<a-col :span="12" style="height: 100%;padding: 6px"> <a-col :span="18" style="height: 100%;padding: 6px">
<a-card style="height: 400px; width:100%; border-radius: 10px;" <a-card style="height: 550px; width:100%; border-radius: 10px;"
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }"> :body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
<iframe :src="iframeUrl" style="width: 100%; height: 500px;"></iframe> <iframe :src="iframeUrl" style="width: 100%; height: 500px;"></iframe>
</a-card> </a-card>
</a-col> </a-col>
<a-col :span="12" style="height: 100%;padding: 6px"> <a-col :span="6" style="height: 100%;padding: 6px">
<a-card style="height: 400px; width:100%; border-radius: 10px;" <a-card style="height: 550px; width:100%; border-radius: 10px;"
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }"> :body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
<div style="font-size: 30px;font-weight: bold;padding-bottom: 15px;">主播信息</div> <div style="text-align: center; padding-bottom: 15px;">
<div style="flex-wrap: wrap; justify-content: center; padding-top: 15px;"> <div style="font-size: 30px; font-weight: bold; padding-bottom: 15px;">主播信息</div>
<div style="font-size: 20px;font-weight: bold;float: left;"> <div
<div>ID: 153443</div> style="display: flex; flex-direction: column; align-items: center; padding-top: 15px;">
</br> <div style="font-size: 20px; font-weight: bold;">
<div style="padding-top: 5px;">昵称: 林cute哟</div></br> <div style="padding: 5px 0;">ID:
<div style="padding-top: 5px;">等级: 125</div></br> <a-tag color="green" style="font-size: 18px;">153443</a-tag>
<div style="padding-top: 5px;">性别: 女</div></br> </div>
</div> <div style="padding: 5px 0;">昵称:
<div style="font-size: 20px;font-weight: bold;float: right;"> <a-tag color="pink" style="font-size: 18px;">林cute哟</a-tag>
<div>直播间ID: 6818</div> </div>
</br> <div style="padding: 5px 0;">等级:
<div style="padding-top: 5px;">主题: 【火锅点歌】</div></br> <a-tag color="green" style="font-size: 18px;">115</a-tag>
<div style="padding-top: 5px;">标签: 跳舞，唱歌，聊天</div></br> </div>
<div style="padding: 5px 0;">性别:
<a-tag color="green" style="font-size: 18px;">女</a-tag>
</div>
<div style="padding: 5px 0;">直播间ID:
<a-tag color="green" style="font-size: 18px;">6818</a-tag>
</div>
<div style="padding: 5px 0;">主题:
<a-tag color="cyan" style="font-size: 18px;">火锅点歌</a-tag>
</div>
<div style="padding: 5px 0;">标签:
<a-tag color="blue" style="font-size: 15px;">唱歌</a-tag>
<a-tag color="blue" style="font-size: 15px;">跳舞</a-tag>
<a-tag color="blue" style="font-size: 15px;">交友</a-tag>
</div>
</div>
</div> </div>
</div> </div>
</a-card> </a-card>
@ -42,10 +59,10 @@
<div id="main3" style="height: 100%; width: 100%"></div> <div id="main3" style="height: 100%; width: 100%"></div>
</a-card> </a-card>
</a-col> </a-col>
<a-col :span="12" style="height: 100%; padding: 6px"> <a-col :span="12" style="height: 100%;padding: 6px">
<a-card style="height: 400px; width:100%; border-radius: 10px;" <a-card style="height: 400px; width:100%; border-radius: 10px;"
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }"> :body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
<div id="main1" style="height: 100%; width: 100%"></div> <div id="main2" style="height: 100%; width: 100%"></div>
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
@ -217,8 +234,8 @@ export default {
28654, 28654,
28537, 28537,
], ],
data3: [802, 8224, 883.5], data3: [55, 66, 77.5],
data4: [169, 108, 129], data4: [16, 10, 12],
num: 41461, num: 41461,
redu: 304, redu: 304,
danmu: 90189, danmu: 90189,
@ -226,48 +243,38 @@ export default {
}; };
}, },
methods: { methods: {
initChart1() { initChart2() {
this.chartInstance2 = echarts.init(document.getElementById('main1')); this.chartInstance3 = echarts.init(document.getElementById('main2'));
const option = { const option = {
title: { title: {
text: '主播实时热度排行' text: '实时礼物总值'
},
xAxis: {
type: 'value',
name: '热度'
},
yAxis: {
type: 'category',
data: [
"英雄联盟赛事",
"MrGemini",
"金咕咕金咕咕doinb",
"进击的神乐",
"即将拥有人鱼线的PDD",
"叫我老陈就好了",
"王者荣耀官方赛事",
"Xleft小叮当",
"进击D神乐",
"狂仔酷炫",
],
name: '主播'
}, },
legend: { legend: {
data: ['热度'] data: ['礼物总值']
}, },
series: [ xAxis: {
{ type: 'category',
data: this.data2, boundaryGap: false,
type: 'bar', name: '每10分钟'
label: { },
show: true, yAxis: {
position: 'right' type: 'value',
}, name: '礼物总值'
name: '热度' },
series: [{
data: this.data3,
type: 'line',
smooth: true,
name: '礼物总值',
itemStyle: {
opacity: 0
},
lineStyle: {
width: 2
} }
] }]
}; }
this.chartInstance2.setOption(option); this.chartInstance3.setOption(option);
}, },
updateData1() { updateData1() {
setInterval(() => { setInterval(() => {
@ -317,7 +324,7 @@ export default {
if (this.data4.length >= 24) { if (this.data4.length >= 24) {
this.data4.shift(); this.data4.shift();
} }
this.data4.push(Math.floor(Math.random() * 150) + 50); this.data4.push(Math.floor(Math.random(10) * 4) + 10);
this.chartInstance4.setOption({ this.chartInstance4.setOption({
series: [{ series: [{
data: this.data4 data: this.data4
@ -325,6 +332,26 @@ export default {
}); });
}, 1000); }, 1000);
}, },
updateData3() {
setInterval(() => {
if (this.data3.length >= 60) {
this.data3.shift();
}
this.data3.push(Math.floor(Math.random(10) * 5) + 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);
},
updateData4() { updateData4() {
setInterval(() => { setInterval(() => {
// + 50-100 // + 50-100
@ -336,11 +363,12 @@ export default {
}, },
}, },
mounted() { mounted() {
this.initChart1(); this.initChart2();
this.updateData1(); this.updateData1();
this.initChart3(); this.initChart3();
this.updateData2(); this.updateData2();
this.updateData4(); this.updateData4();
this.updateData3();
}, },
} }
</script> </script>