| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>B站视频数据分析</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@2.0.0/dist/echarts-wordcloud.min.js"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| bilibili: { |
| pink: '#FB7299', |
| blue: '#23ADE5', |
| dark: '#18191C', |
| } |
| }, |
| fontFamily: { |
| sans: ['"HarmonyOS Sans"', 'sans-serif'], |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap'); |
| |
| body { |
| font-family: 'Noto Sans SC', sans-serif; |
| background-color: #f5f5f5; |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #23ADE5 0%, #FB7299 100%); |
| } |
| |
| .card-hover { |
| transition: all 0.3s ease; |
| } |
| |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } |
| |
| .progress-bar { |
| height: 6px; |
| border-radius: 3px; |
| background-color: #e5e7eb; |
| overflow: hidden; |
| } |
| |
| .progress-fill { |
| height: 100%; |
| border-radius: 3px; |
| background: linear-gradient(90deg, #FB7299, #23ADE5); |
| } |
| |
| .word-cloud { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: center; |
| align-items: center; |
| padding: 20px; |
| min-height: 300px; |
| } |
| |
| .level-badge { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| width: 24px; |
| height: 24px; |
| border-radius: 50%; |
| color: white; |
| font-size: 12px; |
| font-weight: bold; |
| margin-right: 5px; |
| } |
| |
| .level-1 { background-color: #cccccc; } |
| .level-2 { background-color: #99cc66; } |
| .level-3 { background-color: #3399ff; } |
| .level-4 { background-color: #9966cc; } |
| .level-5 { background-color: #ff9900; } |
| .level-6 { background-color: #ff6666; } |
| |
| .chart-container { |
| width: 100%; |
| height: 400px; |
| } |
| |
| .loading-spinner { |
| border: 4px solid rgba(0, 0, 0, 0.1); |
| border-radius: 50%; |
| border-top: 4px solid #FB7299; |
| width: 40px; |
| height: 40px; |
| animation: spin 1s linear infinite; |
| margin: 20px auto; |
| } |
| |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100"> |
| <div class="min-h-screen"> |
| |
| <nav class="bg-white shadow-sm"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 flex items-center"> |
| <i class="fab fa-bilibili text-3xl text-bilibili-pink"></i> |
| <span class="ml-2 text-xl font-bold text-gray-800">B站视频数据分析</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> |
| <div class="p-6"> |
| <div class="flex flex-col gap-6"> |
| <div class="flex flex-col md:flex-row justify-between items-start"> |
| <div class="flex-1"> |
| <h1 id="videoTitle" class="text-2xl font-bold text-gray-800 mb-2">加载中...</h1> |
| <p id="videoDesc" class="text-gray-600 mb-4">加载视频描述...</p> |
|
|
| <div class="flex flex-wrap items-center text-sm text-gray-500 mb-4 gap-4"> |
| <span><i class="fas fa-calendar-alt mr-1"></i> 上传时间: <span id="uploadTime">加载中...</span></span> |
| <span><i class="fas fa-clock mr-1"></i> 视频时长: <span id="videoDuration">加载中...</span></span> |
| </div> |
|
|
| <div id="videoTags" class="flex flex-wrap gap-2 mb-4"> |
| <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">加载标签...</span> |
| </div> |
|
|
| <div class="flex items-center"> |
| <div> |
| <p id="upName" class="font-medium">UP主名称</p> |
| <p class="text-sm text-gray-500">粉丝: <span id="upFans">加载中...</span></p> |
| </div> |
| </div> |
| </div> |
| <button id="videoLinkBtn" class="mt-4 md:mt-0 bg-bilibili-pink hover:bg-bilibili-blue text-white font-medium py-2 px-4 rounded-lg transition-all duration-300 flex items-center"> |
| <i class="fas fa-external-link-alt mr-2"></i> |
| 观看视频 |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"> |
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover"> |
| <div class="p-6"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-blue-100 text-bilibili-blue"> |
| <i class="fas fa-play-circle text-xl"></i> |
| </div> |
| <div class="ml-4"> |
| <p class="text-sm font-medium text-gray-500">播放量</p> |
| <p id="viewCount" class="text-2xl font-semibold text-gray-900">加载中...</p> |
| </div> |
| </div> |
| <div class="progress-bar mt-4"> |
| <div id="viewProgress" class="progress-fill" style="width: 0%"></div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover"> |
| <div class="p-6"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-pink-100 text-bilibili-pink"> |
| <i class="fas fa-heart text-xl"></i> |
| </div> |
| <div class="ml-4"> |
| <p class="text-sm font-medium text-gray-500">点赞数</p> |
| <p id="likeCount" class="text-2xl font-semibold text-gray-900">加载中...</p> |
| </div> |
| </div> |
| <div class="progress-bar mt-4"> |
| <div id="likeProgress" class="progress-fill" style="width: 0%"></div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover"> |
| <div class="p-6"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> |
| <i class="fas fa-star text-xl"></i> |
| </div> |
| <div class="ml-4"> |
| <p class="text-sm font-medium text-gray-500">收藏数</p> |
| <p id="favoriteCount" class="text-2xl font-semibold text-gray-900">加载中...</p> |
| </div> |
| </div> |
| <div class="progress-bar mt-4"> |
| <div id="favoriteProgress" class="progress-fill" style="width: 0%"></div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover"> |
| <div class="p-6"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> |
| <i class="fas fa-comment-dots text-xl"></i> |
| </div> |
| <div class="ml-4"> |
| <p class="text-sm font-medium text-gray-500">弹幕数</p> |
| <p id="danmakuCount" class="text-2xl font-semibold text-gray-900">加载中...</p> |
| </div> |
| </div> |
| <div class="progress-bar mt-4"> |
| <div id="danmakuProgress" class="progress-fill" style="width: 0%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> |
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover"> |
| <div class="p-6"> |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">观众性别分布</h2> |
| <div class="flex justify-center"> |
| <div id="genderChart" class="w-48 h-48"></div> |
| </div> |
| <div class="mt-6 flex justify-center space-x-8"> |
| <div class="flex items-center"> |
| <div class="w-3 h-3 rounded-full bg-bilibili-pink mr-2"></div> |
| <span id="malePercent" class="text-sm text-gray-600">男性: 加载中...</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-3 h-3 rounded-full bg-bilibili-blue mr-2"></div> |
| <span id="femalePercent" class="text-sm text-gray-600">女性: 加载中...</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover lg:col-span-2"> |
| <div class="p-6"> |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">观众等级分布</h2> |
| <div class="flex flex-wrap gap-4"> |
| <div class="flex-1 min-w-[120px]"> |
| <div class="h-32 bg-gray-100 rounded-lg relative overflow-hidden"> |
| <div id="level1Bar" class="absolute bottom-0 left-0 right-0 bg-bilibili-pink" style="height: 0%;"></div> |
| <div class="absolute top-1/2 left-0 right-0 text-center transform -translate-y-1/2"> |
| <span class="level-badge level-1">1</span> |
| <span class="text-sm font-medium">Lv1</span> |
| <p id="level1Percent" class="text-xl font-bold">0%</p> |
| </div> |
| </div> |
| </div> |
| <div class="flex-1 min-w-[120px]"> |
| <div class="h-32 bg-gray-100 rounded-lg relative overflow-hidden"> |
| <div id="level2Bar" class="absolute bottom-0 left-0 right-0 bg-bilibili-blue" style="height: 0%;"></div> |
| <div class="absolute top-1/2 left-0 right-0 text-center transform -translate-y-1/2"> |
| <span class="level-badge level-2">2</span> |
| <span class="text-sm font-medium">Lv2</span> |
| <p id="level2Percent" class="text-xl font-bold">0%</p> |
| </div> |
| </div> |
| </div> |
| <div class="flex-1 min-w-[120px]"> |
| <div class="h-32 bg-gray-100 rounded-lg relative overflow-hidden"> |
| <div id="level3Bar" class="absolute bottom-0 left-0 right-0 bg-purple-500" style="height: 0%;"></div> |
| <div class="absolute top-1/2 left-0 right-0 text-center transform -translate-y-1/2"> |
| <span class="level-badge level-3">3</span> |
| <span class="text-sm font-medium">Lv3</span> |
| <p id="level3Percent" class="text-xl font-bold">0%</p> |
| </div> |
| </div> |
| </div> |
| <div class="flex-1 min-w-[120px]"> |
| <div class="h-32 bg-gray-100 rounded-lg relative overflow-hidden"> |
| <div id="level4Bar" class="absolute bottom-0 left-0 right-0 bg-green-500" style="height: 0%;"></div> |
| <div class="absolute top-1/2 left-0 right-0 text-center transform -translate-y-1/2"> |
| <span class="level-badge level-4">4</span> |
| <span class="text-sm font-medium">Lv4</span> |
| <p id="level4Percent" class="text-xl font-bold">0%</p> |
| </div> |
| </div> |
| </div> |
| <div class="flex-1 min-w-[120px]"> |
| <div class="h-32 bg-gray-100 rounded-lg relative overflow-hidden"> |
| <div id="level5Bar" class="absolute bottom-0 left-0 right-0 bg-yellow-500" style="height: 0%;"></div> |
| <div class="absolute top-1/2 left-0 right-0 text-center transform -translate-y-1/2"> |
| <span class="level-badge level-5">5</span> |
| <span class="text-sm font-medium">Lv5</span> |
| <p id="level5Percent" class="text-xl font-bold">0%</p> |
| </div> |
| </div> |
| </div> |
| <div class="flex-1 min-w-[120px]"> |
| <div class="h-32 bg-gray-100 rounded-lg relative overflow-hidden"> |
| <div id="level6Bar" class="absolute bottom-0 left-0 right-0 bg-red-500" style="height: 0%;"></div> |
| <div class="absolute top-1/2 left-0 right-0 text-center transform -translate-y-1/2"> |
| <span class="level-badge level-6">6</span> |
| <span class="text-sm font-medium">Lv6</span> |
| <p id="level6Percent" class="text-xl font-bold">0%</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> |
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover"> |
| <div class="p-6"> |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">弹幕词云</h2> |
| <div id="danmuWordCloud" class="chart-container"> |
| <div class="loading-spinner"></div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover"> |
| <div class="p-6"> |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">评论词云</h2> |
| <div id="commentWordCloud" class="chart-container"> |
| <div class="loading-spinner"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover mb-8"> |
| <div class="p-6"> |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">互动数据</h2> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-sm font-medium text-gray-600">投币数</span> |
| <i class="fas fa-coins text-yellow-500"></i> |
| </div> |
| <p id="coinCount" class="text-2xl font-bold">加载中...</p> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-sm font-medium text-gray-600">分享数</span> |
| <i class="fas fa-share-alt text-blue-500"></i> |
| </div> |
| <p id="shareCount" class="text-2xl font-bold">加载中...</p> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-sm font-medium text-gray-600">评论数</span> |
| <i class="fas fa-comments text-green-500"></i> |
| </div> |
| <p id="replyCount" class="text-2xl font-bold">加载中...</p> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-sm font-medium text-gray-600">三连数</span> |
| <i class="fas fa-trophy text-purple-500"></i> |
| </div> |
| <p id="tripleCount" class="text-2xl font-bold">加载中...</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover mb-8"> |
| <div class="p-6"> |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">视频数据分析结果</h2> |
| <div id="analysisResult" class="bg-gray-50 p-4 rounded-lg"> |
| <div class="loading-spinner"></div> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
|
|
| <script> |
| |
| async function fetchVideoData() { |
| |
| |
| await new Promise(resolve => setTimeout(resolve, 800)); |
| |
| |
| return { |
| basicInfo: { |
| title: "B站2023年度数据报告分析", |
| desc: "本视频详细分析了B站2023年的用户增长、内容生态和商业变现情况，包含大量独家数据和深度解读。", |
| uploadTime: "2023-12-31", |
| duration: "15分28秒", |
| tags: ["年度报告", "数据分析", "B站", "互联网", "行业研究"], |
| upInfo: { |
| name: "数据分析师老王", |
| avatar: "https://i2.hdslb.com/bfs/face/7d8b5c857f4f8a1e0a7a3b2e2b3a1d1e3a1d1e3a1d1e3a1d1e3a1d1e3a1d1e3.jpg", |
| fans: "876,543" |
| }, |
| videoUrl: "https://www.bilibili.com/video/BV1GJ411x7h7" |
| }, |
| stats: { |
| view: 1245678, |
| like: 98765, |
| favorite: 56789, |
| danmaku: 34567, |
| coin: 23456, |
| share: 12345, |
| reply: 8765, |
| triple: 5678 |
| }, |
| audience: { |
| gender: { |
| male: 62, |
| female: 38 |
| }, |
| level: { |
| lv1: 30, |
| lv2: 45, |
| lv3: 60, |
| lv4: 50, |
| lv5: 35, |
| lv6: 20 |
| } |
| }, |
| wordCloud: { |
| danmu: [ |
| { name: '哈哈哈', value: 10000 }, |
| { name: '666', value: 8000 }, |
| { name: '太强了', value: 7000 }, |
| { name: '前排', value: 6000 }, |
| { name: '好活', value: 5500 }, |
| { name: 'awsl', value: 5000 }, |
| { name: '打卡', value: 4500 }, |
| { name: '泪目', value: 4000 }, |
| { name: '三连', value: 3800 }, |
| { name: '支持', value: 3500 }, |
| { name: '来了', value: 3000 }, |
| { name: '好耶', value: 2800 }, |
| { name: '爱了', value: 2500 }, |
| { name: '爷青回', value: 2200 }, |
| { name: '神仙', value: 2000 } |
| ], |
| comment: [ |
| { name: '支持UP主', value: 5000 }, |
| { name: '太棒了', value: 4500 }, |
| { name: '学到了', value: 4000 }, |
| { name: '干货满满', value: 3800 }, |
| { name: '期待下一期', value: 3500 }, |
| { name: '三连了', value: 3200 }, |
| { name: '感谢分享', value: 3000 }, |
| { name: '太专业了', value: 2800 }, |
| { name: '收藏了', value: 2500 }, |
| { name: '讲得真好', value: 2200 }, |
| { name: '受益匪浅', value: 2000 }, |
| { name: '高质量内容', value: 1800 }, |
| { name: '支持一下', value: 1500 }, |
| { name: '继续加油', value: 1200 }, |
| { name: '太用心了', value: 1000 } |
| ] |
| }, |
| analysis: [ |
| "视频表现分析：该视频在发布后24小时内获得了超过100万播放量，表现优异。点赞率8.2%，收藏率4.8%，均高于同类视频平均水平。", |
| "观众互动分析：弹幕互动主要集中在视频的3分12秒至5分45秒区间，该时段弹幕密度达到峰值，表明此部分内容最能引发观众共鸣。", |
| "关键词分析：弹幕和评论中出现频率最高的关键词是'专业'、'干货'和'支持'，表明观众对视频内容的专业性和实用性给予了高度评价。", |
| "改进建议：建议在视频开头30秒内增加更多吸引眼球的内容，以提高观众留存率。同时可以考虑增加一些互动环节，进一步提高观众参与度。" |
| ] |
| }; |
| } |
| |
| |
| function formatNumber(num) { |
| return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); |
| } |
| |
| |
| function initGenderChart(malePercent, femalePercent) { |
| const chart = echarts.init(document.getElementById('genderChart')); |
| |
| const option = { |
| series: [{ |
| type: 'pie', |
| radius: ['60%', '80%'], |
| avoidLabelOverlap: false, |
| itemStyle: { |
| borderRadius: 10, |
| borderColor: '#fff', |
| borderWidth: 2 |
| }, |
| label: { |
| show: false, |
| position: 'center' |
| }, |
| emphasis: { |
| label: { |
| show: true, |
| fontSize: '18', |
| fontWeight: 'bold' |
| } |
| }, |
| labelLine: { |
| show: false |
| }, |
| data: [ |
| { value: malePercent, name: '男性', itemStyle: { color: '#FB7299' } }, |
| { value: femalePercent, name: '女性', itemStyle: { color: '#23ADE5' } } |
| ] |
| }] |
| }; |
| |
| chart.setOption(option); |
| |
| window.addEventListener('resize', function() { |
| chart.resize(); |
| }); |
| } |
| |
| |
| function initDanmuWordCloud(data) { |
| const chart = echarts.init(document.getElementById('danmuWordCloud')); |
| |
| const option = { |
| backgroundColor: '#ffffff', |
| tooltip: {}, |
| series: [{ |
| type: 'wordCloud', |
| shape: 'circle', |
| left: 'center', |
| top: 'center', |
| width: '90%', |
| height: '90%', |
| right: null, |
| bottom: null, |
| sizeRange: [12, 60], |
| rotationRange: [-45, 45], |
| rotationStep: 15, |
| gridSize: 8, |
| drawOutOfBound: false, |
| textStyle: { |
| fontFamily: 'Noto Sans SC', |
| fontWeight: 'bold', |
| color: function () { |
| return 'rgb(' + |
| Math.round(Math.random() * 155 + 100) + ',' + |
| Math.round(Math.random() * 155 + 100) + ',' + |
| Math.round(Math.random() * 155 + 100) + ')'; |
| } |
| }, |
| emphasis: { |
| focus: 'self', |
| textStyle: { |
| shadowBlur: 10, |
| shadowColor: '#333' |
| } |
| }, |
| data: data |
| }] |
| }; |
| |
| chart.setOption(option); |
| |
| window.addEventListener('resize', function() { |
| chart.resize(); |
| }); |
| } |
| |
| |
| function initCommentWordCloud(data) { |
| const chart = echarts.init(document.getElementById('commentWordCloud')); |
| |
| const option = { |
| backgroundColor: '#ffffff', |
| tooltip: {}, |
| series: [{ |
| type: 'wordCloud', |
| shape: 'circle', |
| left: 'center', |
| top: 'center', |
| width: '90%', |
| height: '90%', |
| right: null, |
| bottom: null, |
| sizeRange: [12, 60], |
| rotationRange: [-45, 45], |
| rotationStep: 15, |
| gridSize: 8, |
| drawOutOfBound: false, |
| textStyle: { |
| fontFamily: 'Noto Sans SC', |
| fontWeight: 'bold', |
| color: function () { |
| return 'rgb(' + |
| Math.round(Math.random() * 155 + 100) + ',' + |
| Math.round(Math.random() * 155 + 100) + ',' + |
| Math.round(Math.random() * 155 + 100) + ')'; |
| } |
| }, |
| emphasis: { |
| focus: 'self', |
| textStyle: { |
| shadowBlur: 10, |
| shadowColor: '#333' |
| } |
| }, |
| data: data |
| }] |
| }; |
| |
| chart.setOption(option); |
| |
| window.addEventListener('resize', function() { |
| chart.resize(); |
| }); |
| } |
| |
| |
| async function loadAllData() { |
| try { |
| const data = await fetchVideoData(); |
| |
| |
| document.getElementById('videoTitle').textContent = data.basicInfo.title; |
| document.getElementById('videoDesc').textContent = data.basicInfo.desc; |
| document.getElementById('uploadTime').textContent = data.basicInfo.uploadTime; |
| document.getElementById('videoDuration').textContent = data.basicInfo.duration; |
| |
| const tagsContainer = document.getElementById('videoTags'); |
| tagsContainer.innerHTML = ''; |
| data.basicInfo.tags.forEach(tag => { |
| const tagElement = document.createElement('span'); |
| tagElement.className = 'bg-gray-100 px-3 py-1 rounded-full text-sm'; |
| tagElement.textContent = tag; |
| tagsContainer.appendChild(tagElement); |
| }); |
| |
| document.getElementById('upName').textContent = data.basicInfo.upInfo.name; |
| document.getElementById('upFans').textContent = data.basicInfo.upInfo.fans; |
| |
| document.getElementById('videoLinkBtn').addEventListener('click', function() { |
| window.open(data.basicInfo.videoUrl, '_blank'); |
| }); |
| |
| |
| document.getElementById('viewCount').textContent = formatNumber(data.stats.view); |
| document.getElementById('likeCount').textContent = formatNumber(data.stats.like); |
| document.getElementById('favoriteCount').textContent = formatNumber(data.stats.favorite); |
| document.getElementById('danmakuCount').textContent = formatNumber(data.stats.danmaku); |
| document.getElementById('coinCount').textContent = formatNumber(data.stats.coin); |
| document.getElementById('shareCount').textContent = formatNumber(data.stats.share); |
| document.getElementById('replyCount').textContent = formatNumber(data.stats.reply); |
| document.getElementById('tripleCount').textContent = formatNumber(data.stats.triple); |
| |
| |
| const maxStat = Math.max(data.stats.view, data.stats.like, data.stats.favorite, data.stats.danmaku); |
| document.getElementById('viewProgress').style.width = `${(data.stats.view / maxStat) * 100}%`; |
| document.getElementById('likeProgress').style.width = `${(data.stats.like / maxStat) * 100}%`; |
| document.getElementById('favoriteProgress').style.width = `${(data.stats.favorite / maxStat) * 100}%`; |
| document.getElementById('danmakuProgress').style.width = `${(data.stats.danmaku / maxStat) * 100}%`; |
| |
| |
| document.getElementById('malePercent').textContent = `男性: ${data.audience.gender.male}%`; |
| document.getElementById('femalePercent').textContent = `女性: ${data.audience.gender.female}%`; |
| initGenderChart(data.audience.gender.male, data.audience.gender.female); |
| |
| |
| document.getElementById('level1Percent').textContent = `${data.audience.level.lv1}%`; |
| document.getElementById('level2Percent').textContent = `${data.audience.level.lv2}%`; |
| document.getElementById('level3Percent').textContent = `${data.audience.level.lv3}%`; |
| document.getElementById('level4Percent').textContent = `${data.audience.level.lv4}%`; |
| document.getElementById('level5Percent').textContent = `${data.audience.level.lv5}%`; |
| document.getElementById('level6Percent').textContent = `${data.audience.level.lv6}%`; |
| |
| document.getElementById('level1Bar').style.height = `${data.audience.level.lv1}%`; |
| document.getElementById('level2Bar').style.height = `${data.audience.level.lv2}%`; |
| document.getElementById('level3Bar').style.height = `${data.audience.level.lv3}%`; |
| document.getElementById('level4Bar').style.height = `${data.audience.level.lv4}%`; |
| document.getElementById('level5Bar').style.height = `${data.audience.level.lv5}%`; |
| document.getElementById('level6Bar').style.height = `${data.audience.level.lv6}%`; |
| |
| |
| initDanmuWordCloud(data.wordCloud.danmu); |
| initCommentWordCloud(data.wordCloud.comment); |
| |
| |
| const analysisContainer = document.getElementById('analysisResult'); |
| analysisContainer.innerHTML = ''; |
| |
| data.analysis.forEach(item => { |
| const p = document.createElement('p'); |
| p.className = 'text-gray-600 mb-3'; |
| p.textContent = item; |
| analysisContainer.appendChild(p); |
| }); |
| |
| } catch (error) { |
| console.error('加载数据失败:', error); |
| alert('加载数据失败，请稍后重试'); |
| } |
| } |
| |
| |
| window.addEventListener('load', loadAllData); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=hanbaockd/blbl" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
