Download index.html from hanbaockd/blbl: direct link, hf CLI and curl.
- Browser
- Download file 34 kB
-
https://huggingface.co/spaces/hanbaockd/blbl/resolve/main/index.html
- Command line
-
hf download hf://spaces/hanbaockd/blbl/index.html
-
curl -L -o index.html https://huggingface.co/spaces/hanbaockd/blbl/resolve/main/index.html
34 kB
| <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> | |
| // 模拟从后端API获取数据 | |
| async function fetchVideoData() { | |
| // 这里应该是实际的API调用 | |
| // 模拟API响应延迟 | |
| await new Promise(resolve => setTimeout(resolve, 800)); | |
| // 模拟API返回的数据 | |
| 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> |