2020东京奥运会数据集echarts可视化分析
发布时间
阅读量：
阅读量
数据集的下载
2021 Olympics in Tokyo | Kaggle
部分数据集的内容如下
2.金牌榜前10名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>金牌榜前十</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '2021年东京奥运会金牌前十'
},
tooltip: {},
legend: {
data: ['国家']
},
xAxis: {
data: ['美国', '中国', '日本', '英国', '俄罗斯', '澳大利亚','荷兰','法国','德国','意大利']
},
yAxis: {},
color:['#48e2d5'],
series: [
{
name: '数量',
type: 'bar',
data: [39, 38, 27, 22, 20, 17,10,10,10,10]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
3.总奖牌数前十
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>总奖牌前10</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '2021年东京奥运会总奖牌前十'
},
tooltip: {},
legend: {
data: ['国家']
},
xAxis: {
data: ['美国', '中国', '俄罗斯', '英国','日本','澳大利亚','意大利','德国','荷兰','法国']
},
yAxis: {},
series: [
{
name: '数量',
type: 'bar',
data: [113,88,71,65,58,46,40,37,36,33]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
- 前十一名额的奖牌成为数组的一部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>奖牌数组成</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:1500px;height:600px;"></div>
<script type="text/javascript">
const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);
let option;
option = {
title:{
text:'2021总奖牌前十奖牌组成'
},
angleAxis: {
type: 'category',
data: ['美国', '中国', '日本', '英国', '俄罗斯', '澳大利亚','荷兰','法国','德国','意大利']
},
radiusAxis: {},
polar: {},
series: [
{
type: 'bar',
data: [39,38,27,22,20,17,10,10,10,10],
coordinateSystem: 'polar',
name: '金牌数',
stack: 'a',
emphasis: {
focus: 'series'
}
},
{
type: 'bar',
data: [41,32,14,21,28,7,12,12,11,10],
coordinateSystem: 'polar',
name: '银牌数',
stack: 'a',
emphasis: {
focus: 'series'
}
},
{
type: 'bar',
data: [33,18,17,22,23,22,14,11,16,20],
coordinateSystem: 'polar',
name: '铜牌数',
stack: 'a',
emphasis: {
focus: 'series'
}
}
],
legend: {
show: true,
data: ['金牌数', '银牌数', '铜牌数']
}
};
option && myChart.setOption(option);
</script>
</body>
</html>
5.参赛人数最多的10个比赛项目
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>参赛人数</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1200px;height:800px;"></div>
<script type="text/javascript">
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: '参赛人数前10多的比赛项目'
},
tooltip: {},
legend: {
data: ['人数']
},
xAxis: {
data: [
'Athletics',
'Swimming',
'Football',
'Rowing',
'Judo',
'Hockey',
'Shooting',
'Sailing',
'Handball',
'Rowing'
]
},
yAxis: {},
color:['#79e248'],
series: [
{
name: '人数',
type: 'bar',
data: [2041, 779, 608, 522, 393, 384, 356, 350, 336, 297]
}
]
};
option && myChart.setOption(option);
</script>
</body>
</html>
6.各国运动员情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>各国运动员人数</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '2021年东京奥运会参数人数超过300的国家'
},
tooltip: {},
legend: {
data: ['国家']
},
xAxis: {
data: ['美国', '日本', '澳大利亚', '中国', '德国', '法国','俄罗斯','西班牙','德国','巴西']
},
yAxis: {},
series: [
{
name: '数量',
type: 'bar',
data: [634, 614, 489, 431, 418, 397,392,342,336,319]
}
]
};
myChart.setOption(option);
</script>
<div id="main2" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main2'));
option = {
title: {
text: '2021年东京奥运会参赛人数',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 5139, name: '300人以上参赛的国家的人数' },
{ value: 969, name: '300-200人参赛的国家的人数' },
{ value: 2169, name: '200-100人参赛的国家的人数' },
{ value: 3397, name: '100人以下参赛的国家的人数' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
</script>
<h5>
总参赛人数11656
</h5>
</body>
</html>
其他更多图形样式可在echarts官网查找，并且有源代码，简单修改即可。
全部评论 (0)
还没有任何评论哟~