Delete 'chart.html'

liwenbiao
pl4kfhszb 2 years ago
parent 36e8f7dc8e
commit d3a0b95ce6

@ -1,335 +0,0 @@
<!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">
&copy; 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>
Loading…
Cancel
Save