From baf2c3040ad8f4ac4fec7a9e2915d77f85162229 Mon Sep 17 00:00:00 2001
From: xbx <1827135378@qq.com>
Date: Fri, 10 May 2024 16:12:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E6=97=B6=E4=B8=8E=E5=B9=B3=E5=8F=B0?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/live/analysis.vue | 101 +++++++++++++++++++++++-
 src/views/live/realTime.vue | 150 +++++++++++++++++++++---------------
 2 files changed, 189 insertions(+), 62 deletions(-)

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