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-11 12:32:18 +08:00
parent ff28404999
commit dc6ec4ac94
1 changed files with 286 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

286
src/views/live/shouye.vue Normal file
View File

@ -0,0 +1,286 @@
<template>
<div class="outer">
<div class="grid">
<a-card :loading="loading" :bordered="false">
<a-row style="height: 100%;width: 98%;">
<a-col :span="24" style="height: 100%;padding: 6px">
<a-card style="height: 300px; width:100%; border-radius: 10px;"
:body-style="{ height: '95%', width: '100%', borderRadius: '10px' }">
<div style="font-size: 25px;font-weight: bold;padding-bottom: 15px;">平台当天直播概况</div>
<div style="display: flex; flex-wrap: nowrap; 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: 30px;">{{ num }}</div>
</div>
<div style="flex: 50%; text-align: center; padding: 5px;">
<div style="font-size: 20px;font-weight: bold;">平均热度</div>
<div style="font-size: 30px;">{{ redu }}</div>
</div>
<div style="flex: 50%; text-align: center; padding: 5px;">
<div style="font-size: 20px;font-weight: bold;">直播类型</div>
<div style="font-size: 30px;">{{ danmu }}</div>
</div>
<div style="flex: 50%; text-align: center; padding: 5px;">
<div style="font-size: 20px;font-weight: bold;">活跃观众</div>
<div style="font-size: 30px;">{{ liwu }}</div>
</div>
</div>
<div style="display: flex; flex-wrap: nowrap; 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: 30px;">3399623</div>
</div>
<div style="flex: 50%; text-align: center; padding: 5px;">
<div style="font-size: 20px;font-weight: bold;">弹幕人数</div>
<div style="font-size: 30px;">930726</div>
</div>
<div style="flex: 50%; text-align: center; padding: 5px;">
<div style="font-size: 20px;font-weight: bold;">礼物价值（元）</div>
<div style="font-size: 30px;">6274697.4</div>
</div>
<div style="flex: 50%; text-align: center; padding: 5px;">
<div style="font-size: 20px;font-weight: bold;">礼物人数</div>
<div style="font-size: 30px;">197557</div>
</div>
</div>
</a-card>
</a-col>
</a-row>
<a-row style="height: 100%;width: 98%; padding-top: 10px;">
<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="flex: 50%; text-align: center; padding: 5px;">
<div style="font-size: 24px; font-weight: bold; color: #333; margin-bottom: 10px;">系统介绍
<div style="font-size: 16px; line-height: 2.0; color: #666;">
<br>
该平台能够实时监控并分析来自多个直播源的数据。通过采集包括观众互动、观看时长、弹幕评论等多维度数据，平台能够为直播运营者提供关键的业务洞察，帮助他们优化内容策略、提升观众参与度，并有效地调整营销活动。此外，该平台还将应用机器学习算法对观众偏好进行预测，以推动个性化内容推荐和广告投放，最终实现增强用户体验和提升商业收益的双重目标。
</div>
</div>
</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>
</a-card>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
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,
},
],
loading: false,
data2: [
27408,
27975,
28537,
28654,
29596,
30146,
30356,
30510,
31701,
32036,
32988,
59523
],
data3: [80002, 82024, 85383.5],
data4: [10869, 11108, 12109],
num: 4149861,
redu: 31904,
danmu: 9028189,
liwu: 303691,
};
},
methods: {
initChart1() {
this.chartInstance2 = echarts.init(document.getElementById('main1'));
const option = {
title: {
text: '主播当天热度排行'
},
xAxis: {
type: 'value',
name: '热度'
},
yAxis: {
type: 'category',
data: [
"谢彬DD",
"pigff",
"狂仔酷炫",
"进击D神乐",
"Xleft小叮当",
"王者荣耀官方赛事",
"叫我老陈就好了",
"即将拥有人鱼线的PDD",
"进击的神乐",
"金咕咕金咕咕doinb",
"MrGemini",
"英雄联盟赛事"
],
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);
},
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.updateData4();
}
};
</script>