|
|
<!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 -->
|
|
|
<body>
|
|
|
<div id="app" style="width: 600px;height: 400px;"></div>
|
|
|
<script>
|
|
|
// 1.Echarts 基本结构的创建
|
|
|
// 引入js文件---创建容器---初始化对象---配置配置项---
|
|
|
// 2.准备数据[{name;???, value:???},{}]
|
|
|
// 运动与健康：1100，餐饮：2800，外出与旅行：4500，衣物：2202，电子游戏：2421，医药：800
|
|
|
// 3.将type设置为pie
|
|
|
var myCharts = echarts.init(document.querySelector('#app'))
|
|
|
var dom = document.getElementById("chart1");
|
|
|
// 需要设置给饼图的数据
|
|
|
var pieData = [
|
|
|
{
|
|
|
name: '开拓者',
|
|
|
value: '1100'
|
|
|
},
|
|
|
{
|
|
|
name: '凯尔特人',
|
|
|
value: '2800'
|
|
|
},
|
|
|
{
|
|
|
name: '勇士',
|
|
|
value: '4500'
|
|
|
},
|
|
|
{
|
|
|
name: '雷霆',
|
|
|
value: '2202'
|
|
|
},
|
|
|
{
|
|
|
name: '火箭',
|
|
|
value: '2421'
|
|
|
},
|
|
|
{
|
|
|
name: '雄鹿',
|
|
|
value: '1100'
|
|
|
},
|
|
|
{
|
|
|
name: '76人',
|
|
|
value: '2800'
|
|
|
},
|
|
|
{
|
|
|
name: '篮网',
|
|
|
value: '4500'
|
|
|
},
|
|
|
{
|
|
|
name: '奇才',
|
|
|
value: '2202'
|
|
|
},
|
|
|
{
|
|
|
name: '骑士',
|
|
|
value: '2421'
|
|
|
},
|
|
|
{
|
|
|
name: '老鹰',
|
|
|
value: '1100'
|
|
|
},
|
|
|
{
|
|
|
name: '步行者',
|
|
|
value: '2800'
|
|
|
},
|
|
|
{
|
|
|
name: '尼克斯',
|
|
|
value: '4500'
|
|
|
},
|
|
|
{
|
|
|
name: '猛龙',
|
|
|
value: '2202'
|
|
|
},
|
|
|
{
|
|
|
name: '公牛',
|
|
|
value: '2421'
|
|
|
},
|
|
|
{
|
|
|
name: '热火',
|
|
|
value: '1100'
|
|
|
},
|
|
|
{
|
|
|
name: '魔术',
|
|
|
value: '2800'
|
|
|
},
|
|
|
{
|
|
|
name: '黄蜂',
|
|
|
value: '4500'
|
|
|
},
|
|
|
{
|
|
|
name: '活塞',
|
|
|
value: '2202'
|
|
|
},
|
|
|
{
|
|
|
name: '太阳',
|
|
|
value: '2421'
|
|
|
},
|
|
|
{
|
|
|
name: '掘金',
|
|
|
value: '800'
|
|
|
}, {
|
|
|
name: '鹈鹕',
|
|
|
value: '1100'
|
|
|
},
|
|
|
{
|
|
|
name: '爵士',
|
|
|
value: '2800'
|
|
|
},
|
|
|
{
|
|
|
name: '国王',
|
|
|
value: '4500'
|
|
|
},
|
|
|
{
|
|
|
name: '快船',
|
|
|
value: '2202'
|
|
|
},
|
|
|
{
|
|
|
name: '灰熊',
|
|
|
value: '2421'
|
|
|
},
|
|
|
{
|
|
|
name: '森林狼',
|
|
|
value: '1100'
|
|
|
},
|
|
|
{
|
|
|
name: '马刺',
|
|
|
value: '2800'
|
|
|
},
|
|
|
{
|
|
|
name: '湖人',
|
|
|
value: '4500'
|
|
|
},
|
|
|
{
|
|
|
name: '独行侠',
|
|
|
value: '2202'
|
|
|
}
|
|
|
|
|
|
]
|
|
|
var option = {
|
|
|
// 注意：饼图不是直角坐标系图表，就不用配置x轴和y轴了
|
|
|
series: [
|
|
|
{
|
|
|
type: 'pie', // 类型： 饼图
|
|
|
data: pieData,//数据
|
|
|
label: {//饼图文字的显示
|
|
|
show: true, //默认 显示文字
|
|
|
formatter: function (arg) {
|
|
|
console.log(arg);
|
|
|
return arg.name + ' 热度 ' +'\n'+ arg.percent + "%"
|
|
|
}
|
|
|
},
|
|
|
// radius: 20 //饼图的半径
|
|
|
// radius: '20%' //百分比参照的事宽度和高度中较小的那一部分的一半来进行百分比设置
|
|
|
// 圆环
|
|
|
// radius: ['50%','80%']
|
|
|
|
|
|
// 南丁格尔图 饼图的每一个部分的半径是不同的
|
|
|
// roseType: 'radius',
|
|
|
// selectedMode: 'single' //选中的效果，能够将选中的区域偏离圆点一小段距离
|
|
|
selectedMode: 'multiple',
|
|
|
selectedOffset: 30
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
myCharts.setOption(option)
|
|
|
</script>
|
|
|
<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("chart2");
|
|
|
// 指定图表的配置项和数据
|
|
|
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>河南城建</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> |
