1150 lines
31 KiB
Vue
1150 lines
31 KiB
Vue
<template>
|
||
<div class="outer">
|
||
<div class="grid">
|
||
<div style="display: flex; padding: 10px">
|
||
<div style="width: 200px">
|
||
<div style="display: flex">
|
||
<a-radio-group v-model:value="radio" @change="change">
|
||
<a-radio :value="1">直播中</a-radio>
|
||
<a-radio :value="2">未开播</a-radio>
|
||
</a-radio-group>
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%; display: flex; justify-content: flex-end; margin-right: 1.5%">
|
||
<a-button type="primary" @click="flech">刷新页面</a-button>
|
||
</div>
|
||
</div>
|
||
|
||
<a-row v-if="!loading">
|
||
<a-col :span="6" v-for="(item, index) in gloryData" :key="index">
|
||
<a-card style="cursor: pointer" :bordered="false">
|
||
<img :src="item.img" alt="" />
|
||
<p style="font-weight: bold; margin-top: 5px; padding-left: 5px">{{ item.title }}</p>
|
||
<div style="display: flex">
|
||
<span class="name"> {{ item.id }}</span>
|
||
<div class="hot">
|
||
<a-icon type="fire" style="color: red; margin-left: auto" />
|
||
<span>{{ item.hot }}</span>
|
||
</div>
|
||
</div>
|
||
<div style="padding-top: 10px; float: right">
|
||
<a-button type="primary" @click="detail(index)">查看详情</a-button>
|
||
<a-button type="primary" style="margin-left: 10px" @click="gotoReal(index)">实时分析</a-button>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
<a-modal v-model:open="isShow" :mask="false" title="直播详情" @ok="isShow = false" @cancel="isShow = false" style="width: 1000px">
|
||
<div style="display: flex; padding: 20px">
|
||
<div style="width: 250px">
|
||
<p style="font-weight: bold">主播信息</p>
|
||
|
||
<p>直播标题：{{ gloryData[gloryindex].title }}</p>
|
||
<p>主播：{{ gloryData[gloryindex].id }}</p>
|
||
<p>直播间ID：{{ gloryData[gloryindex].roomID }}</p>
|
||
<p>热度：{{ gloryData[gloryindex].hot }}</p>
|
||
<p>类型：{{ gloryData[gloryindex].type }}</p>
|
||
<p>点赞数：{{ gloryData[gloryindex].history['2024-05-10'].likes }}</p>
|
||
<p>评论数：{{ gloryData[gloryindex].history['2024-05-10'].comments }}</p>
|
||
<p>观看人数：{{ gloryData[gloryindex].history['2024-05-10'].viewers }}</p>
|
||
<p>收入：{{ gloryData[gloryindex].history['2024-05-10'].revenue }}</p>
|
||
</div>
|
||
<div style="width: 400px" class="modal">
|
||
<span style="font-weight: bold">历史数据</span>
|
||
|
||
<a-row :span="12" style="padding-top: 20px">
|
||
<a-col :span="12" v-for="(item, index) in gloryData[gloryindex].history" :key="index">
|
||
<a-card style="margin: 1px">
|
||
<p>日期：{{ index }}</p>
|
||
<p>观看人数：{{ item.viewers }}</p>
|
||
<p>评论数：{{ item.comments }}</p>
|
||
<p>点赞数：{{ item.likes }}</p>
|
||
<p>收入：{{ item.revenue }}</p>
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
<div id="map1" style="width: 250px; height: 500px"> </div>
|
||
</div>
|
||
</a-modal>
|
||
<a-spin v-if="loading">
|
||
<div>正在查询中</div>
|
||
</a-spin>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import pic1 from '@/assets/live/pic1.jpg';
|
||
import pic2 from '@/assets/live/pic2.jpg';
|
||
import pic3 from '@/assets/live/pic3.jpg';
|
||
import pic4 from '@/assets/live/pic4.jpg';
|
||
import pic5 from '@/assets/live/pic5.jpg';
|
||
import pic6 from '@/assets/live/pic6.jpg';
|
||
import pic7 from '@/assets/live/pic7.jpg';
|
||
import pic8 from '@/assets/live/pic8.jpg';
|
||
import pic9 from '@/assets/live/pic9.jpg';
|
||
import pic10 from '@/assets/live/pic10.jpg';
|
||
import pic11 from '@/assets/live/pic11.jpg';
|
||
import pic12 from '@/assets/live/pic12.jpg';
|
||
import pic13 from '@/assets/live/pic13.jpg';
|
||
import pic14 from '@/assets/live/pic14.jpg';
|
||
import pic15 from '@/assets/live/pic15.jpg';
|
||
import pic16 from '@/assets/live/pic16.jpg';
|
||
import * as echarts from 'echarts';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
isShow: false,
|
||
gloryindex: 0,
|
||
radio: 0,
|
||
gloryData: [
|
||
{
|
||
title: 'BLG 2:1 PSG MSI胜败分组赛',
|
||
id: '虎牙英雄联盟赛事',
|
||
hot: '100万',
|
||
img: pic1,
|
||
type: '英雄联盟',
|
||
roomID: '681518',
|
||
history: {
|
||
'2024-05-05': {
|
||
viewers: 3055672,
|
||
comments: 6064893,
|
||
likes: 953607,
|
||
dislikes: 56078,
|
||
shares: 397026,
|
||
revenue: 1972068,
|
||
},
|
||
'2024-05-06': {
|
||
viewers: 3869472,
|
||
comments: 7656893,
|
||
likes: 1053607,
|
||
dislikes: 66078,
|
||
shares: 497026,
|
||
revenue: 2972068,
|
||
},
|
||
'2024-05-07': {
|
||
viewers: 4378142,
|
||
comments: 8666893,
|
||
likes: 1153607,
|
||
dislikes: 76078,
|
||
shares: 597026,
|
||
revenue: 3972068,
|
||
},
|
||
'2024-05-08': {
|
||
viewers: 3896172,
|
||
comments: 9676893,
|
||
likes: 1253607,
|
||
dislikes: 86078,
|
||
shares: 697026,
|
||
revenue: 4972068,
|
||
},
|
||
'2024-05-09': {
|
||
viewers: 4389172,
|
||
comments: 10676893,
|
||
likes: 1353607,
|
||
dislikes: 96078,
|
||
shares: 797026,
|
||
revenue: 5972068,
|
||
},
|
||
'2024-05-10': {
|
||
viewers: 5213472,
|
||
comments: 11676893,
|
||
likes: 1453607,
|
||
dislikes: 106078,
|
||
shares: 897026,
|
||
revenue: 6972068,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
title: 'haohaodapaiwei',
|
||
id: 'JDG.Kanavi',
|
||
hot: '13.3万',
|
||
img: pic2,
|
||
type: '英雄联盟',
|
||
roomID: '682219',
|
||
history: {
|
||
'2024-05-05': {
|
||
viewers: 355672,
|
||
comments: 664893,
|
||
likes: 95367,
|
||
dislikes: 5678,
|
||
shares: 39726,
|
||
revenue: 197268,
|
||
},
|
||
'2024-05-06': {
|
||
viewers: 386947,
|
||
comments: 765893,
|
||
likes: 105367,
|
||
dislikes: 6678,
|
||
shares: 49726,
|
||
revenue: 297268,
|
||
},
|
||
'2024-05-07': {
|
||
viewers: 437814,
|
||
comments: 866893,
|
||
likes: 115367,
|
||
dislikes: 7678,
|
||
shares: 59726,
|
||
revenue: 397268,
|
||
},
|
||
'2024-05-08': {
|
||
viewers: 389617,
|
||
comments: 967893,
|
||
likes: 125367,
|
||
dislikes: 8678,
|
||
shares: 69726,
|
||
revenue: 497268,
|
||
},
|
||
'2024-05-09': {
|
||
viewers: 438917,
|
||
comments: 1067893,
|
||
likes: 135367,
|
||
dislikes: 9678,
|
||
shares: 79726,
|
||
revenue: 597268,
|
||
},
|
||
'2024-05-10': {
|
||
viewers: 521347,
|
||
comments: 1167893,
|
||
likes: 145367,
|
||
dislikes: 10678,
|
||
shares: 89726,
|
||
revenue: 697268,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
title: '韩一拉夫 韩服冲千分',
|
||
id: '阿呆奥拉夫',
|
||
hot: '22.3万',
|
||
img: pic3,
|
||
type: '英雄联盟',
|
||
roomID: '679160',
|
||
history: {
|
||
'2024-05-05': {
|
||
viewers: 355672,
|
||
comments: 664893,
|
||
likes: 95367,
|
||
dislikes: 5678,
|
||
shares: 39726,
|
||
revenue: 197268,
|
||
},
|
||
'2024-05-06': {
|
||
viewers: 386947,
|
||
comments: 765893,
|
||
likes: 105367,
|
||
dislikes: 6678,
|
||
shares: 49726,
|
||
revenue: 297268,
|
||
},
|
||
'2024-05-07': {
|
||
viewers: 437814,
|
||
comments: 866893,
|
||
likes: 115367,
|
||
dislikes: 7678,
|
||
shares: 59726,
|
||
revenue: 397268,
|
||
},
|
||
'2024-05-08': {
|
||
viewers: 389617,
|
||
comments: 967893,
|
||
likes: 125367,
|
||
dislikes: 8678,
|
||
shares: 69726,
|
||
revenue: 497268,
|
||
},
|
||
'2024-05-09': {
|
||
viewers: 438917,
|
||
comments: 1067893,
|
||
likes: 135367,
|
||
dislikes: 9678,
|
||
shares: 79726,
|
||
revenue: 597268,
|
||
},
|
||
'2024-05-10': {
|
||
viewers: 521347,
|
||
comments: 1167893,
|
||
likes: 145367,
|
||
dislikes: 10678,
|
||
shares: 89726,
|
||
revenue: 697268,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
title: '国服第一诺手!峡谷宗师冲王者!!!',
|
||
id: '黑洞king1',
|
||
hot: '24.5万',
|
||
img: pic4,
|
||
type: '英雄联盟',
|
||
roomID: '681518',
|
||
history: {
|
||
'2024-05-05': {
|
||
viewers: 355672,
|
||
comments: 664893,
|
||
likes: 95367,
|
||
dislikes: 5678,
|
||
shares: 39726,
|
||
revenue: 197268,
|
||
},
|
||
'2024-05-06': {
|
||
viewers: 386947,
|
||
comments: 765893,
|
||
likes: 105367,
|
||
dislikes: 6678,
|
||
shares: 49726,
|
||
revenue: 297268,
|
||
},
|
||
'2024-05-07': {
|
||
viewers: 437814,
|
||
comments: 866893,
|
||
likes: 115367,
|
||
dislikes: 7678,
|
||
shares: 59726,
|
||
revenue: 397268,
|
||
},
|
||
'2024-05-08': {
|
||
viewers: 389617,
|
||
comments: 967893,
|
||
likes: 125367,
|
||
dislikes: 8678,
|
||
shares: 69726,
|
||
revenue: 497268,
|
||
},
|
||
'2024-05-09': {
|
||
viewers: 438917,
|
||
comments: 1067893,
|
||
likes: 135367,
|
||
dislikes: 9678,
|
||
shares: 79726,
|
||
revenue: 597268,
|
||
},
|
||
'2024-05-10': {
|
||
viewers: 521347,
|
||
comments: 1167893,
|
||
likes: 145367,
|
||
dislikes: 10678,
|
||
shares: 89726,
|
||
revenue: 697268,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
title: '解说下今天的比赛~',
|
||
id: 'kRYST4L',
|
||
hot: '559.9万',
|
||
img: pic5,
|
||
type: '英雄联盟',
|
||
roomID: '682219',
|
||
history: {
|
||
'2024-05-05': {
|
||
viewers: 1355672,
|
||
comments: 3664893,
|
||
likes: 795367,
|
||
dislikes: 45678,
|
||
shares: 379726,
|
||
revenue: 697268,
|
||
},
|
||
'2024-05-06': {
|
||
viewers: 1869472,
|
||
comments: 6656893,
|
||
likes: 1053607,
|
||
dislikes: 66078,
|
||
shares: 497026,
|
||
revenue: 2972068,
|
||
},
|
||
'2024-05-07': {
|
||
viewers: 2378142,
|
||
comments: 8666893,
|
||
likes: 1153607,
|
||
dislikes: 76078,
|
||
shares: 597026,
|
||
revenue: 3972068,
|
||
},
|
||
'2024-05-08': {
|
||
viewers: 1896172,
|
||
comments: 9676893,
|
||
likes: 1253607,
|
||
dislikes: 86078,
|
||
shares: 697026,
|
||
revenue: 4972068,
|
||
},
|
||
'2024-05-09': {
|
||
viewers: 2389172,
|
||
comments: 10676893,
|
||
likes: 1353607,
|
||
dislikes: 96078,
|
||
shares: 797026,
|
||
revenue: 5972068,
|
||
},
|
||
'2024-05-10': {
|
||
viewers: 2213472,
|
||
comments: 11676893,
|
||
likes: 1453607,
|
||
dislikes: 106078,
|
||
shares: 897026,
|
||
revenue: 6972068,
|
||
},
|
||
},
|
||
},
|
||
|
||
{
|
||
title: '5点跟姿态队练',
|
||
id: 'Letme严君泽',
|
||
hot: '247.1万',
|
||
img: pic6,
|
||
type: '英雄联盟',
|
||
roomID: '679160',
|
||
history: {
|
||
'2024-05-05': {
|
||
viewers: 355672,
|
||
comments: 664893,
|
||
likes: 95367,
|
||
dislikes: 5678,
|
||
shares: 39726,
|
||
revenue: 197268,
|
||
},
|
||
'2024-05-06': {
|
||
viewers: 386947,
|
||
comments: 765893,
|
||
likes: 105367,
|
||
dislikes: 6678,
|
||
shares: 49726,
|
||
revenue: 297268,
|
||
},
|
||
'2024-05-07': {
|
||
viewers: 437814,
|
||
comments: 866893,
|
||
likes: 115367,
|
||
dislikes: 7678,
|
||
shares: 59726,
|
||
revenue: 397268,
|
||
},
|
||
'2024-05-08': {
|
||
viewers: 389617,
|
||
comments: 967893,
|
||
likes: 125367,
|
||
dislikes: 8678,
|
||
shares: 69726,
|
||
revenue: 497268,
|
||
},
|
||
'2024-05-09': {
|
||
viewers: 438917,
|
||
comments: 1067893,
|
||
likes: 135367,
|
||
dislikes: 9678,
|
||
shares: 79726,
|
||
revenue: 597268,
|
||
},
|
||
'2024-05-10': {
|
||
viewers: 521347,
|
||
comments: 1167893,
|
||
likes: 145367,
|
||
dislikes: 10678,
|
||
shares: 89726,
|
||
revenue: 697268,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
title: '勤奋天王',
|
||
id: 'DANK1NG',
|
||
hot: '426.7万',
|
||
img: pic7,
|
||
type: 'CS2',
|
||
roomID: '289218',
|
||
history: {
|
||
'2024-05-05': {
|
||
viewers: 355672,
|
||
comments: 664893,
|
||
likes: 95367,
|
||
dislikes: 5678,
|
||
shares: 39726,
|
||
revenue: 197268,
|
||
},
|
||
'2024-05-06': {
|
||
viewers: 386947,
|
||
comments: 765893,
|
||
likes: 105367,
|
||
dislikes: 6678,
|
||
shares: 49726,
|
||
revenue: 297268,
|
||
},
|
||
'2024-05-07': {
|
||
viewers: 437814,
|
||
comments: 866893,
|
||
likes: 115367,
|
||
dislikes: 7678,
|
||
shares: 59726,
|
||
revenue: 397268,
|
||
},
|
||
'2024-05-08': {
|
||
viewers: 389617,
|
||
comments: 967893,
|
||
likes: 125367,
|
||
dislikes: 8678,
|
||
shares: 69726,
|
||
revenue: 497268,
|
||
},
|
||
'2024-05-09': {
|
||
viewers: 438917,
|
||
comments: 1067893,
|
||
likes: 135367,
|
||
dislikes: 9678,
|
||
shares: 79726,
|
||
revenue: 597268,
|
||
},
|
||
'2024-05-10': {
|
||
viewers: 521347,
|
||
comments: 1167893,
|
||
likes: 145367,
|
||
dislikes: 10678,
|
||
shares: 89726,
|
||
revenue: 697268,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
title: '【Mr.mao】少点谩骂 多点鼓励!',
|
||
id: 'MAX-Mrmao',
|
||
hot: '19.1万',
|
||
img: pic8,
|
||
type: 'CS2',
|
||
roomID: '281738',
|
||
history: {
|
||
'2024-05-05': {
|
||
viewers: 355672,
|
||
comments: 664893,
|
||
likes: 95367,
|
||
dislikes: 5678,
|
||
shares: 39726,
|
||
revenue: 197268,
|
||
},
|
||
'2024-05-06': {
|
||
viewers: 386947,
|
||
comments: 765893,
|
||
likes: 105367,
|
||
dislikes: 6678,
|
||
shares: 49726,
|
||
revenue: 297268,
|
||
},
|
||
'2024-05-07': {
|
||
viewers: 437814,
|
||
comments: 866893,
|
||
likes: 115367,
|
||
dislikes: 7678,
|
||
shares: 59726,
|
||
revenue: 397268,
|
||
},
|
||
'2024-05-08': {
|
||
viewers: 389617,
|
||
comments: 967893,
|
||
likes: 125367,
|
||
dislikes: 8678,
|
||
shares: 69726,
|
||
revenue: 497268,
|
||
},
|
||
'2024-05-09': {
|
||
viewers: 438917,
|
||
comments: 1067893,
|
||
likes: 135367,
|
||
dislikes: 9678,
|
||
shares: 79726,
|
||
revenue: 597268,
|
||
},
|
||
'2024-05-10': {
|
||
viewers: 521347,
|
||
comments: 1167893,
|
||
likes: 145367,
|
||
dislikes: 10678,
|
||
shares: 89726,
|
||
revenue: 697268,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
title: '小播一会儿，新主播',
|
||
id: '青象-矍然吖',
|
||
hot: '4.0万',
|
||
img: pic9,
|
||
type: 'CS2',
|
||
roomID: '234938',
|
||
history: {
|
||
'2024-05-05': {
|
||
viewers: 104934,
|
||
comments: 564893,
|
||
likes: 65367,
|
||
dislikes: 8678,
|
||
shares: 39726,
|
||
revenue: 8176,
|
||
},
|
||
'2024-05-06': {
|
||
viewers: 186947,
|
||
comments: 765893,
|
||
likes: 105367,
|
||
dislikes: 6678,
|
||
shares: 49726,
|
||
revenue: 297268,
|
||
},
|
||
'2024-05-07': {
|
||
viewers: 237814,
|
||
comments: 866893,
|
||
likes: 115367,
|
||
dislikes: 7678,
|
||
shares: 59726,
|
||
revenue: 397268,
|
||
},
|
||
'2024-05-08': {
|
||
viewers: 189617,
|
||
comments: 967893,
|
||
likes: 125367,
|
||
dislikes: 8678,
|
||
shares: 69726,
|
||
revenue: 497268,
|
||
},
|
||
'2024-05-09': {
|
||
viewers: 238917,
|
||
comments: 1067893,
|
||
likes: 135367,
|
||
dislikes: 9678,
|
||
shares: 79726,
|
||
revenue: 597268,
|
||
},
|
||
'2024-05-10': {
|
||
viewers: 221347,
|
||
comments: 1167893,
|
||
likes: 145367,
|
||
dislikes: 10678,
|
||
shares: 89726,
|
||
revenue: 697268,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
title: '【新主播】上S的第一天~',
|
||
id: '十三月的故事',
|
||
hot: '12.6万',
|
||
img: pic10,
|
||
type: 'CS2',
|
||
roomID: '217637',
|
||
history: {
|
||
'2024-05-05': {
|
||
viewers: 355672,
|
||
comments: 664893,
|
||
likes: 95367,
|
||
dislikes: 5678,
|
||
shares: 39726,
|
||
revenue: 197268,
|
||
},
|
||
'2024-05-06': {
|
||
viewers: 386947,
|
||
comments: 765893,
|
||
likes: 105367,
|
||
dislikes: 6678,
|
||
shares: 49726,
|
||
revenue: 297268,
|
||
},
|
||
'2024-05-07': {
|
||
viewers: 437814,
|
||
comments: 866893,
|
||
likes: 115367,
|
||
dislikes: 7678,
|
||
shares: 59726,
|
||
revenue: 397268,
|
||
},
|
||
'2024-05-08': {
|
||
viewers: 389617,
|
||
comments: 967893,
|
||
likes: 125367,
|
||
dislikes: 8678,
|
||
shares: 69726,
|
||
revenue: 497268,
|
||
},
|
||
'2024-05-09': {
|
||
viewers: 438917,
|
||
comments: 1067893,
|
||
likes: 135367,
|
||
dislikes: 9678,
|
||
shares: 79726,
|
||
revenue: 597268,
|
||
},
|
||
'2024-05-10': {
|
||
viewers: 521347,
|
||
comments: 1167893,
|
||
likes: 145367,
|
||
dislikes: 10678,
|
||
shares: 89726,
|
||
revenue: 697268,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
title: '速看 只整新奥恩大活!',
|
||
id: '丸子头的文',
|
||
hot: '40.7万',
|
||
img: pic11,
|
||
type: '英雄联盟',
|
||
roomID: '619371',
|
||
history: {
|
||
'2024-05-05': {
|
||
viewers: 355672,
|
||
comments: 664893,
|
||
likes: 95367,
|
||
dislikes: 5678,
|
||
shares: 39726,
|
||
revenue: 197268,
|
||
},
|
||
'2024-05-06': {
|
||
viewers: 386947,
|
||
comments: 765893,
|
||
likes: 105367,
|
||
dislikes: 6678,
|
||
shares: 49726,
|
||
revenue: 297268,
|
||
},
|
||
'2024-05-07': {
|
||
viewers: 437814,
|
||
comments: 866893,
|
||
likes: 115367,
|
||
dislikes: 7678,
|
||
shares: 59726,
|
||
revenue: 397268,
|
||
},
|
||
'2024-05-08': {
|
||
viewers: 389617,
|
||
comments: 967893,
|
||
likes: 125367,
|
||
dislikes: 8678,
|
||
shares: 69726,
|
||
revenue: 497268,
|
||
},
|
||
'2024-05-09': {
|
||
viewers: 438917,
|
||
comments: 1067893,
|
||
likes: 135367,
|
||
dislikes: 9678,
|
||
shares: 79726,
|
||
revenue: 597268,
|
||
},
|
||
'2024-05-10': {
|
||
viewers: 521347,
|
||
comments: 1167893,
|
||
likes: 145367,
|
||
dislikes: 10678,
|
||
shares: 89726,
|
||
revenue: 697268,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
title: '2024NBPL春季赛',
|
||
id: '虎牙永劫无间赛事',
|
||
hot: '112.3万',
|
||
img: pic12,
|
||
type: '永劫无间',
|
||
roomID: '1359712',
|
||
history: {
|
||
'2024-05-05': {
|
||
viewers: 355672,
|
||
comments: 664893,
|
||
likes: 95367,
|
||
dislikes: 5678,
|
||
shares: 39726,
|
||
revenue: 197268,
|
||
},
|
||
'2024-05-06': {
|
||
viewers: 386947,
|
||
comments: 765893,
|
||
likes: 105367,
|
||
dislikes: 6678,
|
||
shares: 49726,
|
||
revenue: 297268,
|
||
},
|
||
'2024-05-07': {
|
||
viewers: 437814,
|
||
comments: 866893,
|
||
likes: 115367,
|
||
dislikes: 7678,
|
||
shares: 59726,
|
||
revenue: 397268,
|
||
},
|
||
'2024-05-08': {
|
||
viewers: 389617,
|
||
comments: 967893,
|
||
likes: 125367,
|
||
dislikes: 8678,
|
||
shares: 69726,
|
||
revenue: 497268,
|
||
},
|
||
'2024-05-09': {
|
||
viewers: 438917,
|
||
comments: 1067893,
|
||
likes: 135367,
|
||
dislikes: 9678,
|
||
shares: 79726,
|
||
revenue: 597268,
|
||
},
|
||
'2024-05-10': {
|
||
viewers: 521347,
|
||
comments: 1167893,
|
||
likes: 145367,
|
||
dislikes: 10678,
|
||
shares: 89726,
|
||
revenue: 697268,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
title: '天人前10 书300分 接3排',
|
||
id: '巅峰-鱼子酱KK',
|
||
hot: '8.2万',
|
||
img: pic13,
|
||
type: '永劫无间',
|
||
roomID: '1379347',
|
||
history: {
|
||
'2024-05-05': {
|
||
viewers: 355672,
|
||
comments: 664893,
|
||
likes: 95367,
|
||
dislikes: 5678,
|
||
shares: 39726,
|
||
revenue: 197268,
|
||
},
|
||
'2024-05-06': {
|
||
viewers: 386947,
|
||
comments: 765893,
|
||
likes: 105367,
|
||
dislikes: 6678,
|
||
shares: 49726,
|
||
revenue: 297268,
|
||
},
|
||
'2024-05-07': {
|
||
viewers: 437814,
|
||
comments: 866893,
|
||
likes: 115367,
|
||
dislikes: 7678,
|
||
shares: 59726,
|
||
revenue: 397268,
|
||
},
|
||
'2024-05-08': {
|
||
viewers: 389617,
|
||
comments: 967893,
|
||
likes: 125367,
|
||
dislikes: 8678,
|
||
shares: 69726,
|
||
revenue: 497268,
|
||
},
|
||
'2024-05-09': {
|
||
viewers: 438917,
|
||
comments: 1067893,
|
||
likes: 135367,
|
||
dislikes: 9678,
|
||
shares: 79726,
|
||
revenue: 597268,
|
||
},
|
||
'2024-05-10': {
|
||
viewers: 521347,
|
||
comments: 1167893,
|
||
likes: 145367,
|
||
dislikes: 10678,
|
||
shares: 89726,
|
||
revenue: 697268,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
title: '鬼刀一开看不见看不见，迦南启动!',
|
||
id: '终憾﹀奇星互娱',
|
||
hot: '23.9万',
|
||
img: pic14,
|
||
type: '永劫无间',
|
||
roomID: '1394712',
|
||
history: {
|
||
'2024-05-05': {
|
||
viewers: 355672,
|
||
comments: 664893,
|
||
likes: 95367,
|
||
dislikes: 5678,
|
||
shares: 39726,
|
||
revenue: 197268,
|
||
},
|
||
'2024-05-06': {
|
||
viewers: 386947,
|
||
comments: 765893,
|
||
likes: 105367,
|
||
dislikes: 6678,
|
||
shares: 49726,
|
||
revenue: 297268,
|
||
},
|
||
'2024-05-07': {
|
||
viewers: 437814,
|
||
comments: 866893,
|
||
likes: 115367,
|
||
dislikes: 7678,
|
||
shares: 59726,
|
||
revenue: 397268,
|
||
},
|
||
'2024-05-08': {
|
||
viewers: 389617,
|
||
comments: 967893,
|
||
likes: 125367,
|
||
dislikes: 8678,
|
||
shares: 69726,
|
||
revenue: 497268,
|
||
},
|
||
'2024-05-09': {
|
||
viewers: 438917,
|
||
comments: 1067893,
|
||
likes: 135367,
|
||
dislikes: 9678,
|
||
shares: 79726,
|
||
revenue: 597268,
|
||
},
|
||
'2024-05-10': {
|
||
viewers: 521347,
|
||
comments: 1167893,
|
||
likes: 145367,
|
||
dislikes: 10678,
|
||
shares: 89726,
|
||
revenue: 697268,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
title: '苏州KSG vs 武汉eStarKPL春季赛',
|
||
id: '虎牙王者荣耀赛事',
|
||
hot: '591.8万',
|
||
type: '王者荣耀',
|
||
img: pic15,
|
||
roomID: '2672993',
|
||
history: {
|
||
'2024-05-05': {
|
||
viewers: 355672,
|
||
comments: 664893,
|
||
likes: 95367,
|
||
dislikes: 5678,
|
||
shares: 39726,
|
||
revenue: 197268,
|
||
},
|
||
'2024-05-06': {
|
||
viewers: 386947,
|
||
comments: 765893,
|
||
likes: 105367,
|
||
dislikes: 6678,
|
||
shares: 49726,
|
||
revenue: 297268,
|
||
},
|
||
'2024-05-07': {
|
||
viewers: 437814,
|
||
comments: 866893,
|
||
likes: 115367,
|
||
dislikes: 7678,
|
||
shares: 59726,
|
||
revenue: 397268,
|
||
},
|
||
'2024-05-08': {
|
||
viewers: 389617,
|
||
comments: 967893,
|
||
likes: 125367,
|
||
dislikes: 8678,
|
||
shares: 69726,
|
||
revenue: 497268,
|
||
},
|
||
'2024-05-09': {
|
||
viewers: 438917,
|
||
comments: 1067893,
|
||
likes: 135367,
|
||
dislikes: 9678,
|
||
shares: 79726,
|
||
revenue: 597268,
|
||
},
|
||
'2024-05-10': {
|
||
viewers: 521347,
|
||
comments: 1167893,
|
||
likes: 145367,
|
||
dislikes: 10678,
|
||
shares: 89726,
|
||
revenue: 697268,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
title: '我来诠释发育路!',
|
||
id: 'AzZ、口袋',
|
||
hot: '117.1万',
|
||
img: pic16,
|
||
roomID: '2693712',
|
||
type: '王者荣耀',
|
||
|
||
history: {
|
||
'2024-05-05': {
|
||
viewers: 355672,
|
||
comments: 664893,
|
||
likes: 95367,
|
||
dislikes: 5678,
|
||
shares: 39726,
|
||
revenue: 197268,
|
||
},
|
||
'2024-05-06': {
|
||
viewers: 386947,
|
||
comments: 765893,
|
||
likes: 105367,
|
||
dislikes: 6678,
|
||
shares: 49726,
|
||
revenue: 297268,
|
||
},
|
||
'2024-05-07': {
|
||
viewers: 437814,
|
||
comments: 866893,
|
||
likes: 115367,
|
||
dislikes: 7678,
|
||
shares: 59726,
|
||
revenue: 397268,
|
||
},
|
||
'2024-05-08': {
|
||
viewers: 389617,
|
||
comments: 967893,
|
||
likes: 125367,
|
||
dislikes: 8678,
|
||
shares: 69726,
|
||
revenue: 497268,
|
||
},
|
||
'2024-05-09': {
|
||
viewers: 438917,
|
||
comments: 1067893,
|
||
likes: 135367,
|
||
dislikes: 9678,
|
||
shares: 79726,
|
||
revenue: 597268,
|
||
},
|
||
'2024-05-10': {
|
||
viewers: 521347,
|
||
comments: 1167893,
|
||
likes: 145367,
|
||
dislikes: 10678,
|
||
shares: 89726,
|
||
revenue: 697268,
|
||
},
|
||
},
|
||
},
|
||
],
|
||
loading: false,
|
||
};
|
||
},
|
||
methods: {
|
||
goto() {
|
||
console.log('Test');
|
||
},
|
||
flech() {
|
||
this.loading = true;
|
||
setTimeout(() => {
|
||
this.loading = false;
|
||
}, 1500);
|
||
},
|
||
detail(index) {
|
||
this.gloryindex = index;
|
||
this.isShow = true;
|
||
setTimeout(() => {
|
||
this.drawLine(index);
|
||
}, 100);
|
||
|
||
},
|
||
drawLine(index) {
|
||
//在map1上根据观看人数以及日期画一个折线图
|
||
//如果map1存在图表，先销毁
|
||
|
||
let myChart = document.getElementById('map1');
|
||
if (myChart) {
|
||
myChart = echarts.getInstanceByDom(myChart);
|
||
if (myChart) {
|
||
myChart.dispose();
|
||
}
|
||
}
|
||
myChart = echarts.init(document.getElementById('map1'));
|
||
let option = {
|
||
title: {
|
||
text: '观看人数',
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
legend: {
|
||
data: ['观看人数'],
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true,
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {},
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: Object.keys(this.gloryData[index].history),
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
},
|
||
series: [
|
||
{
|
||
name: '观看人数',
|
||
type: 'line',
|
||
stack: '总量',
|
||
data: Object.values(this.gloryData[index].history).map((item) => item.viewers),
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
},
|
||
// 查看详情（转跳详情页面）
|
||
gotoReal(index) {
|
||
this.$router.push({
|
||
path: '/live/realTime',
|
||
query: { index: index },
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.outer {
|
||
padding: 30px;
|
||
|
||
.grid {
|
||
background-color: white;
|
||
padding: 30px;
|
||
|
||
/* margin: 30px; */
|
||
width: 100%;
|
||
|
||
// height: 1000px;
|
||
.hot {
|
||
padding-right: 5px;
|
||
margin-left: auto;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.name {
|
||
padding-left: 5px;
|
||
margin-right: auto;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
.modal {
|
||
p {
|
||
//取消空行
|
||
margin: 0;
|
||
}
|
||
}
|
||
</style>
|