数据可视化-冬奥会奖牌榜
数据可视化
冬奥会奖牌榜
一、实验名称
冬奥会奖牌榜
二、实验目的
在该实验中进行实践旨在使学生掌握Echarts.js的基本原理，并能熟练运用Echarts.js生成可视化的图表。
三、实验原理
echarts是一个基于JavaScript开发的一个开源数据可视化组件库，在百度公司负责开发与维护的情况下提供了一系列丰富的图表与图形组件，并能够被用来构建各种类型的数据显示方案。该库具有以下特色：
主要包含多样化的图表形式：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插件）：
展示结果
五、实验总结
本次实验采用Echarts.js框架完成对冬季奥运会数据的可视化展示。具体而言，在项目实施过程中, 我们详细介绍了如何引入echarts库，并构建了图表容器等关键步骤的操作流程, 同时强调了这些技术细节对于实现数据分析功能的重要性。通过这些操作实践, 学生能够更直观地理解Echarts的基本应用方法及其在实际数据分析中的价值所在