数据可视化-中国代表团奖牌项目分布

呆呆小板栗

已于 2024-04-19 08:44:10 修改

阅读量615

点赞数 16

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

于 2024-04-18 23:27:23 首次发布

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

版权

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

57 篇文章 0 订阅

订阅专栏

数据可视化

24 篇文章 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>截止到2018年平昌冬奥会中国代表团奖牌项目分布</title>
</head>
<body>
<div id="container" style="width:600px; height:600px; margin: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 = {
        tooltip: {
            trigger: 'item'
        },
        title: {
            text: '截止到2018年平昌冬奥会中国代表团奖牌项目分布',
            left: 'center'
        },
        legend: {
            bottom: 'bottom'
        },
        series: [
            {
                type: 'pie',
                radius: '50%',
                data: [
                    {"name": "短道速滑", "value": 33},
                    {"name": "自由式滑雪", "value": 11},
                    {"name": "速度滑冰", "value": 8},
                    {"name": "花样滑冰", "value": 8},
                    {"name": "冰壶", "value": 1},
                    {"name": "单板滑雪", "value": 1}

                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);

</script>
</body>
</html>

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