数据可视化-冬奥会奖牌榜

最新推荐文章于 2024-06-02 19:30:17 发布

呆呆小板栗

最新推荐文章于 2024-06-02 19:30:17 发布

阅读量863

点赞数 18

分类专栏：数据可视化大数据文章标签：大数据数据可视化

本文链接：https://blog.csdn.net/m0_74394367/article/details/137979432

版权

大数据同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

数据可视化

21 篇文章 0 订阅

订阅专栏

数据可视化

冬奥会奖牌榜

一、实验名称

冬奥会奖牌榜

二、实验目的

通过该实验的实践，要求学生能够掌握Echarts.js的基本原理并能够熟练应用Echarts.js制作可视化图表。

三、实验原理

echarts是一个基于JavaScript的开源可视化库，由百度公司开发并维护，提供了丰富的图表和图形组件，可以用于构建各种类型的数据可视化。echarts具有以下几个特点：

首先，丰富的图表类型：echarts支持多种图表类型的呈现，包括但不限于折线图、柱状图、饼图、散点图、雷达图等。这些图表类型可以满足不同场景下的数据展示和分析需求。

其次，灵活的可配置性：echarts提供了丰富的配置项，可以根据用户的需求对图表进行定制化操作。通过设置各种参数和样式，用户可以自定义图表的外观、交互方式等，使其更符合实际需求。

再次，强大的交互能力：echarts支持用户与图表进行交互操作，如缩放、平移、选取等。用户可以通过与图表的交互来探索数据的细节和关系，从而更好地理解数据的含义。

最后，良好的跨平台支持：echarts可以运行在PC端和移动端的各种浏览器中，同时也提供了多语言的支持。这使得echarts在不同平台和环境下都能够良好地工作。

四、实验步骤

一、项目搭建

1、新建项目

桌面新建文件夹，命名为Echarts-demo，使用VScode工具打开文件夹。

打开VScode，点击文件/打开文件夹，选择文件夹。

2、新建index.html文件

3、下载数据文件并加入到Echarts-demo文件夹下

二、代码实现

1、引入 Echarts 库

在 HTML 文件中引入 echarts-en.common.js文件，代码如下：

2、创建图表容器

在 HTML 文件中定义一个具有唯一 id 的容器元素，用于承载图表

代码如下:

3、初始化图表对象

使用 echarts.init 方法传入容器元素的 id，创建一个 echarts 实例。代码如下：

4、设置图表配置项和数据

通过调用实例的 setOption 方法，传入一个包含配置项和数据的对象，来定义图表的样式和展示数据。代码如下：

5、渲染和显示图表

通过setOption函数设置给echarts实例对象，代码如下：

6、完整代码如下

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>冬奥会奖牌榜</title>
</head>
<body>
<div id="container" style="height: 600px; width: 900px; margin: 10% auto;"></div>
<script src="echarts-en.common.js"></script>
<script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var option={
        title:{
            text:'冬奥会奖牌榜',
            left:'center',
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['金牌', '银牌', '铜牌'],
            top:'10%'
        },
        xAxis: {
            axisLabel:{
                rotate:30
            },
            type: 'category',
            data: ['挪威','德国','中国','美国','瑞典','荷兰','奥地利','瑞士','俄罗斯奥运会队','法国']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '金牌',
                type: 'line',
                data: [15,11,9,8,8,8,7,7,6,5]
            },
            {
                name: '银牌',
                type: 'line',
                data: [8,8,4,9,5,5,7,2,12,7]
            },
            {
                name: '铜牌',
                type: 'line',
                data: [12,5,2,7,5,4,4,5,14,2]
            },
        ]
    };
    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>

右键index.html，选择Open with live server（需安装live server插件）：