|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
<meta name="description" content="">
|
|
|
<meta name="author" content="">
|
|
|
|
|
|
<title>数据可视化</title>
|
|
|
|
|
|
<!-- Custom fonts for this template-->
|
|
|
<link href="static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
|
|
<link
|
|
|
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
|
|
|
rel="stylesheet">
|
|
|
|
|
|
<!-- Custom styles for this template-->
|
|
|
<link href="static/css/sb-admin-2.min.css" rel="stylesheet">
|
|
|
|
|
|
<!-- 页面时钟的js -->
|
|
|
<script>
|
|
|
//获取时间函数
|
|
|
function time1(){
|
|
|
var today = new Date();
|
|
|
var year = today.getFullYear();
|
|
|
var month = today.getMonth()+1;
|
|
|
var day = today.getDay()+11;
|
|
|
var hour = today.getHours();
|
|
|
var minute = today.getMinutes();
|
|
|
var second = today.getSeconds();
|
|
|
|
|
|
minute = checkTime(minute);
|
|
|
second = checkTime(second);
|
|
|
|
|
|
document.getElementById("time").innerHTML =
|
|
|
year+"年"+month+"月"+day+"日 "+hour+":"+minute+":"+second;
|
|
|
t = setTimeout("time1()",500);
|
|
|
}
|
|
|
//调整时间格式
|
|
|
function checkTime(i) {
|
|
|
if(i<10){
|
|
|
i="0"+i;
|
|
|
}
|
|
|
return i;
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<!-- 引入Echarts脚本 -->
|
|
|
<script src="static/js/echarts.min.js"></script>
|
|
|
|
|
|
<!-- 网站icon -->
|
|
|
<link rel="shortcut icon" href="static/img/mywebsite.svg" />
|
|
|
</head>
|
|
|
|
|
|
<body id="page-top">
|
|
|
|
|
|
<!-- Page Wrapper -->
|
|
|
<div id="wrapper">
|
|
|
|
|
|
<!-- -----------------分割线----上面是页面内容----下面是注入js----分割线--------------- -->
|
|
|
|
|
|
<!-- 侧边栏 Sidebar -->
|
|
|
<ul class="navbar-nav bg-gray-800 sidebar sidebar-dark accordion" id="accordionSidebar">
|
|
|
|
|
|
<!-- 侧边栏 主人名称 Sidebar - Brand -->
|
|
|
<a class="sidebar-brand d-flex align-items-center justify-content-center">
|
|
|
<div class="sidebar-brand-icon rotate-n-15">
|
|
|
<i class="fas fa-laugh-wink"></i>
|
|
|
</div>
|
|
|
<div class="sidebar-brand-text mx-3">网易云音乐数据分析可视化平台</div>
|
|
|
</a>
|
|
|
|
|
|
<!-- Divider -->
|
|
|
<hr class="sidebar-divider my-0">
|
|
|
|
|
|
<!-- Nav Item - 首页 -->
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="/">
|
|
|
<i class="fas fa-fw fa-tachometer-alt"></i>
|
|
|
<span>首页 Home</span></a>
|
|
|
</li>
|
|
|
|
|
|
<!-- Divider -->
|
|
|
<hr class="sidebar-divider">
|
|
|
|
|
|
<!-- 基本功能 Heading 侧边栏分区标题 -->
|
|
|
<div class="sidebar-heading">
|
|
|
数据可视化
|
|
|
</div>
|
|
|
|
|
|
<!-- 后台数据 Nav Item - Collapse Menu -->
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo"
|
|
|
aria-expanded="true" aria-controls="collapseTwo">
|
|
|
<i class="fas fa-fw fa-table"></i>
|
|
|
<span>后台数据</span>
|
|
|
</a>
|
|
|
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
|
|
|
<div class="bg-white py-2 collapse-inner rounded">
|
|
|
<h6 class="collapse-header">数据表</h6>
|
|
|
<a class="collapse-item" href="/playlist">歌单</a>
|
|
|
<a class="collapse-item" href="/songs">歌曲</a>
|
|
|
<a class="collapse-item" href="/comments">评论</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
|
|
|
<!-- 数据图表 Nav Item - Collapse Menu -->
|
|
|
<li class="nav-item active">
|
|
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities"
|
|
|
aria-expanded="true" aria-controls="collapseUtilities">
|
|
|
<i class="fas fa-fw fa-chart-area"></i>
|
|
|
<span>数据图表</span>
|
|
|
</a>
|
|
|
<div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities"
|
|
|
data-parent="#accordionSidebar">
|
|
|
<div class="bg-white py-2 collapse-inner rounded">
|
|
|
<h6 class="collapse-header">My Echarts:</h6>
|
|
|
<a class="collapse-item" href="/language_charts">歌单语种</a>
|
|
|
<a class="collapse-item" href="/sentiment_charts">歌单情感</a>
|
|
|
<a class="collapse-item" href="/age_charts">评论年龄</a>
|
|
|
<a class="collapse-item" href="/days_charts">进村天数</a>
|
|
|
<a class="collapse-item" href="/listen_age_charts">年龄听歌</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
|
|
|
<!-- 数据词云 Nav Item - Collapse Menu -->
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseThree"
|
|
|
aria-expanded="true" aria-controls="collapseThree">
|
|
|
<i class="fas fa-fw fa-chart-area"></i>
|
|
|
<span>数据词云</span>
|
|
|
</a>
|
|
|
<div id="collapseThree" class="collapse" aria-labelledby="collapseThree"
|
|
|
data-parent="#accordionSidebar">
|
|
|
<div class="bg-white py-2 collapse-inner rounded">
|
|
|
<h6 class="collapse-header">词云图</h6>
|
|
|
<a class="collapse-item" href="/all_lyric_word">歌词</a>
|
|
|
<a class="collapse-item" href="/hot_comments_word">热评</a>
|
|
|
<a class="collapse-item" href="/diy_song_word">定制</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
|
|
|
<!-- Divider 分割线 -->
|
|
|
<hr class="sidebar-divider">
|
|
|
|
|
|
<!-- 其他信息 Heading 侧边栏分区标题 -->
|
|
|
<div class="sidebar-heading">
|
|
|
其他信息
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<!-- 技术实现 Nav Item - -->
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="/techno">
|
|
|
<i class="fas fa-fw fa-table"></i>
|
|
|
<span>技术说明</span></a>
|
|
|
</li>
|
|
|
|
|
|
<!-- 作者 Nav Item -->
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="/team">
|
|
|
<i class="fas fa-fw fa-chart-area"></i>
|
|
|
<span>我的信息</span></a>
|
|
|
</li>
|
|
|
|
|
|
<!-- Divider -->
|
|
|
<hr class="sidebar-divider d-none d-md-block">
|
|
|
|
|
|
<!-- 隐藏侧边栏按钮 Sidebar Toggler (Sidebar) -->
|
|
|
<div class="text-center d-none d-md-inline">
|
|
|
<button class="rounded-circle border-0" id="sidebarToggle"></button>
|
|
|
</div>
|
|
|
|
|
|
</ul>
|
|
|
<!-- End of Sidebar -->
|
|
|
|
|
|
<!-- 内容容器 Content Wrapper -->
|
|
|
<div id="content-wrapper" class="d-flex flex-column">
|
|
|
|
|
|
<!-- 内容 Main Content -->
|
|
|
<div id="content">
|
|
|
|
|
|
<!-- 顶部 部分 -->
|
|
|
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow text-secondary">
|
|
|
|
|
|
<!-- 侧边栏隐藏按钮 （竖屏使用）Sidebar Toggle (Topbar) -->
|
|
|
<form class="form-inline">
|
|
|
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
|
|
<i class="fa fa-bars"></i>
|
|
|
</button>
|
|
|
</form>
|
|
|
<form class="form-inline">
|
|
|
<img src="static/img/mywebsite.svg" width="20px">
|
|
|
</form>
|
|
|
|
|
|
<div class="topbar-divider d-none d-sm-block"></div>
|
|
|
|
|
|
<form class="form-inline text-secondary" style="font-size: x-large">
|
|
|
<!-- 系统 标题 -->网易云音乐数据分析可视化平台
|
|
|
</form>
|
|
|
|
|
|
<!-- 顶部栏里的右边栏 Topbar Navbar -->
|
|
|
<ul class="navbar-nav ml-auto">
|
|
|
|
|
|
|
|
|
|
|
|
<div class="topbar-divider d-none d-sm-block"></div>
|
|
|
|
|
|
<!-- Nav Item - 用户头像 易名 User Information -->
|
|
|
<li class="nav-item dropdown no-arrow">
|
|
|
<a class="nav-link dropdown-toggle" href="{{ url_for('team') }}" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
|
<span class="mr-2 d-none d-lg-inline text-gray-600 small"> 管理员 </span>
|
|
|
<img class="img-profile rounded-circle" src="static/img/touxiang.jpeg">
|
|
|
</a>
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</nav>
|
|
|
<!-- 顶部结束 -->
|
|
|
|
|
|
<!-- Begin Page Content -->
|
|
|
<div class="container-fluid">
|
|
|
|
|
|
<!-- 页头 说明网页内容 Page Heading -->
|
|
|
<h1 class="h3 mb-0 text-gray-800 py-2">数据图表</h1>
|
|
|
<p class="mb-4">数据源: <a target="_blank"
|
|
|
href="https://music.163.com/discover/playlist">网易云音乐</a>.</p>
|
|
|
|
|
|
|
|
|
<!-- 一个内容行容器 Content Row -->
|
|
|
<div class="row">
|
|
|
<!-- 一个列的内容容器 -->
|
|
|
<div class="col-xl-8 col-lg-7">
|
|
|
<!-- Area Chart -->
|
|
|
<div class="card shadow mb-4">
|
|
|
<div class="card-header py-3">
|
|
|
<h6 class="m-0 font-weight-bold text-primary">语种分类统计图</h6>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
|
|
|
<div id="main" style="width: 100%;height:390px;"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- Donut Chart -->
|
|
|
<div class="col-xl-4 col-lg-5">
|
|
|
<div class="card shadow mb-4">
|
|
|
<!-- Card Header - Dropdown -->
|
|
|
<div class="card-header py-3">
|
|
|
<h6 class="m-0 font-weight-bold text-primary">分析</h6>
|
|
|
</div>
|
|
|
<!-- Card Body -->
|
|
|
<div class="card-body" style="text-indent: 2em;">
|
|
|
<p>由图表可见，在热门歌单里，最受欢迎的歌单是带有华语标签的歌单，共有570份歌单带有华语标签，无论是歌曲数量、收听人数和分享次数，均是华语歌单高居第一。</p>
|
|
|
<p>其次是欧美歌单，无论是收听次数和收藏次数都尤为惊人。紧随华语其后，名列前茅。</p>
|
|
|
<p>相较言之，韩语、日语和粤语均为小众，歌单量少，歌曲数量少，分享和评论互动的都少，但较为可观的是，收听次数和收藏量都不低。</p>
|
|
|
<hr>
|
|
|
<p>如果想要创建高人气的歌单，华语歌曲和欧美歌曲是个不错的选择。</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<!-- /.container-fluid -->
|
|
|
|
|
|
</div>
|
|
|
<!-- End of Main Content -->
|
|
|
|
|
|
<!-- 低端 Footer -->
|
|
|
<footer class="sticky-footer bg-white">
|
|
|
<div class="container my-auto">
|
|
|
<div class="copyright text-center my-auto">
|
|
|
<span></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
<!-- End of Footer -->
|
|
|
|
|
|
</div>
|
|
|
<!-- End of Content Wrapper -->
|
|
|
|
|
|
</div>
|
|
|
<!-- End of Page Wrapper -->
|
|
|
|
|
|
<!-- Scroll to Top Button-->
|
|
|
<a class="scroll-to-top rounded" href="#page-top">
|
|
|
<i class="fas fa-angle-up"></i>
|
|
|
</a>
|
|
|
|
|
|
<!-- Bootstrap core JavaScript-->
|
|
|
<script src="static/vendor/jquery/jquery.min.js"></script>
|
|
|
<script src="static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
|
|
|
|
<!-- Core plugin JavaScript-->
|
|
|
<script src="static/vendor/jquery-easing/jquery.easing.min.js"></script>
|
|
|
|
|
|
<!-- Custom scripts for all pages-->
|
|
|
<script src="static/js/sb-admin-2.min.js"></script>
|
|
|
|
|
|
<!-- Page level plugins -->
|
|
|
<script src="static/vendor/chart.js/Chart.min.js"></script>
|
|
|
|
|
|
<!-- Page level custom scripts -->
|
|
|
<script src="static/js/demo/chart-area-demo.js"></script>
|
|
|
<script src="static/js/demo/chart-pie-demo.js"></script>
|
|
|
<script src="static/js/demo/chart-bar-demo.js"></script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|
|
|
|
|
// 指定图表的配置项和数据
|
|
|
var option = {
|
|
|
title: {
|
|
|
text: '语种分类统计图'
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'cross'
|
|
|
}
|
|
|
},
|
|
|
toolbox: {
|
|
|
feature: {
|
|
|
dataView: {show: true, readOnly: false},
|
|
|
restore: {show: true},
|
|
|
saveAsImage: {}
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
},
|
|
|
grid: {
|
|
|
left: '3%',
|
|
|
right: '4%',
|
|
|
bottom: '3%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
axisTick: {
|
|
|
alignWithLabel: true
|
|
|
},
|
|
|
data: ['日语', '粤语', '韩语', '欧美', '华语']
|
|
|
},
|
|
|
yAxis: [{
|
|
|
type: 'value',
|
|
|
min: 0
|
|
|
}],
|
|
|
series: [{
|
|
|
name: '歌单',
|
|
|
type: 'bar',
|
|
|
data: {{ list_count }}
|
|
|
},{
|
|
|
name: '歌曲',
|
|
|
type: 'bar',
|
|
|
data: {{ song_count }}
|
|
|
},{
|
|
|
name: '收听',
|
|
|
type: 'bar',
|
|
|
data: {{ play_count }}
|
|
|
},{
|
|
|
name: '收藏',
|
|
|
type: 'bar',
|
|
|
data: {{ star_count }}
|
|
|
},{
|
|
|
name: '分享',
|
|
|
type: 'bar',
|
|
|
data: {{ share_count }}
|
|
|
},{
|
|
|
name: '评论',
|
|
|
type: 'bar',
|
|
|
data: {{ comment_count }}
|
|
|
}]
|
|
|
};
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html> |
