2020东京奥运会数据集echarts可视化分析

2023-12-26 13:36:21

1.数据集的下载

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>

4.前十名的奖牌数组成


<!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官网查找，并且有源代码，简单修改即可。

码农公寓

相关文章