|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
|
<script src="../static/assets/js/echarts.js"></script>
|
|
|
<script src="../static/assets/js/walden.js"></script>
|
|
|
<script src="../static/assets/js/chalk.js"></script>
|
|
|
<script src="../static/assets/js/bmap.js"></script>
|
|
|
<script type="text/javascript" src="../static/assets/js/dataTool.min.js"></script>
|
|
|
<title>可视化_NBA数据分析</title>
|
|
|
<meta content="" name="descriptison">
|
|
|
<meta content="" name="keywords">
|
|
|
<!-- Favicons -->
|
|
|
<link href="../static/assets/img/favicon.png" rel="icon">
|
|
|
<link href="../static/assets/img/apple-touch-icon.png" rel="apple-touch-icon">
|
|
|
|
|
|
<!-- Google Fonts -->
|
|
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
|
|
|
|
|
|
<!-- Vendor CSS Files -->
|
|
|
<link href="../static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
|
|
<link href="../static/assets/vendor/icofont/icofont.min.css" rel="stylesheet">
|
|
|
<link href="../static/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
|
|
|
<link href="../static/assets/vendor/venobox/venobox.css" rel="stylesheet">
|
|
|
<link href="../static/assets/vendor/owl.carousel/static/assets/owl.carousel.min.css" rel="stylesheet">
|
|
|
<link href="../static/assets/vendor/aos/aos.css" rel="stylesheet">
|
|
|
|
|
|
<!-- Template Main CSS File -->
|
|
|
<link href="../static/assets/css/style.css" rel="stylesheet">
|
|
|
|
|
|
<!-- =======================================================
|
|
|
* Template Name: Day - v2.1.0
|
|
|
* Template URL: https://bootstrapmade.com/day-multipurpose-html-template-for-free/
|
|
|
* Author: BootstrapMade.com
|
|
|
* License: https://bootstrapmade.com/license/
|
|
|
======================================================== -->
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<!-- ======= Top Bar ======= -->
|
|
|
|
|
|
<!-- ======= Header ======= -->
|
|
|
<header id="header" class="fixed-top ">
|
|
|
<div class="container d-flex align-items-center">
|
|
|
<h2 class="logo mr-auto"><a href="./index.html">球员分析</a></h2>
|
|
|
<!-- Uncomment below if you prefer to use an image logo -->
|
|
|
<!-- <a href="index.html" class="logo mr-auto"><img src="static/assets/img/logo.png" alt="" class="img-fluid"></a>-->
|
|
|
|
|
|
<nav class="nav-menu d-none d-lg-block">
|
|
|
<ul>
|
|
|
<li ><a href="./index.html">Home</a></li>
|
|
|
<li><a href="./top50.html">TOP50</a></li>
|
|
|
<li><a href="./cloud.html">Cloud</a></li>
|
|
|
<li><a href="./chart.html">Chart</a></li>
|
|
|
<li><a href="./team.html">Team</a></li>
|
|
|
</ul>
|
|
|
</nav><!-- .nav-menu -->
|
|
|
</div>
|
|
|
</header><!-- End Header -->
|
|
|
|
|
|
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
|
|
|
<div id="main" style="width: 600px;height:400px;"></div>
|
|
|
<script type="text/javascript">
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|
|
var dom = document.getElementById("chart1");
|
|
|
// 指定图表的配置项和数据
|
|
|
var option = {
|
|
|
|
|
|
title:{
|
|
|
link:'https://echarts.apache.org/zh/option.html#title',
|
|
|
text:'球员数据',
|
|
|
textStyle:{
|
|
|
color:'orange'
|
|
|
},
|
|
|
borderWidth:5,
|
|
|
borderColor:'wihte',
|
|
|
borderRadius:20,
|
|
|
left:150
|
|
|
},
|
|
|
toolbox: {
|
|
|
show: true,
|
|
|
feature: {
|
|
|
dataZoom: {
|
|
|
yAxisIndex: "none"
|
|
|
},
|
|
|
dataView: {
|
|
|
readOnly: false
|
|
|
},
|
|
|
magicType: {
|
|
|
type: ["line", "bar","pie"]
|
|
|
},
|
|
|
restore: {},
|
|
|
saveAsImage: {}
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
type: "scroll"
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger:'item',
|
|
|
triggerOn:'mousemove',
|
|
|
// formatter:'{b}:{c}',
|
|
|
formatter:function(arg){
|
|
|
console.log(arg)
|
|
|
return arg.name + '的数据是：' + arg.data
|
|
|
}
|
|
|
},
|
|
|
color: ["blue", "green"],
|
|
|
dataset: {
|
|
|
source: [
|
|
|
["姓名", "张三","李四","王五","闰土","小明","茅台","二妞","大强","三","四","王","土","明","台","妞","强"],
|
|
|
["得分", 88,92,63,77,94,80,72,86,88,92,63,77,94,80,72,86],
|
|
|
["MVP排名", 96,52,72,25,85,58,83,73,96,52,72,25,85,58,83,73],
|
|
|
]
|
|
|
},
|
|
|
legend: {},
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
axisTick: {
|
|
|
show: false
|
|
|
}
|
|
|
},
|
|
|
yAxis: {},
|
|
|
series: [{
|
|
|
type: "bar",
|
|
|
seriesLayoutBy: "row"
|
|
|
}, {
|
|
|
type: "bar",
|
|
|
seriesLayoutBy: "row"
|
|
|
}]
|
|
|
|
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
</script>
|
|
|
|
|
|
|
|
|
<!-- ======= Footer ======= -->
|
|
|
<footer id="footer">
|
|
|
<div class="container">
|
|
|
<div class="copyright">
|
|
|
© university <strong><span>NBA System</span></strong>
|
|
|
</div>
|
|
|
<div class="credits">
|
|
|
<!-- All the links in the footer should remain intact. -->
|
|
|
<!-- You can delete the links only if you purchased the pro version. -->
|
|
|
<!-- Licensing information: https://bootstrapmade.com/license/ -->
|
|
|
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/day-multipurpose-html-template-for-free/ -->
|
|
|
refer to <a href="https://bootstrapmade.com/">BootstrapMade</a><BR>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer><!-- End Footer -->
|
|
|
|
|
|
<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
|
|
|
<div id="preloader"></div>
|
|
|
|
|
|
<!-- Vendor JS Files -->
|
|
|
<script src="../static/assets/vendor/jquery/jquery.min.js"></script>
|
|
|
<script src="../static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
|
<script src="../static/assets/vendor/jquery.easing/jquery.easing.min.js"></script>
|
|
|
<script src="../static/assets/vendor/php-email-form/validate.js"></script>
|
|
|
<script src="../static/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
|
|
|
<script src="../static/assets/vendor/venobox/venobox.min.js"></script>
|
|
|
<script src="../static/assets/vendor/owl.carousel/owl.carousel.min.js"></script>
|
|
|
<script src="../static/assets/vendor/aos/aos.js"></script>
|
|
|
|
|
|
<!-- Template Main JS File -->
|
|
|
<script src="../static/assets/js/main.js"></script>
|
|
|
</body>
|
|
|
</html>
|
