数据可视化-冬奥会举办国举办次数
数据可视化
冬奥会举办国举办次数
一、实验名称
冬奥会举办国举办次数
二、实验目的
在该实验中进行实践训练旨在帮助学生了解Echarts.js的基础知识，并指导他们熟练运用该框架创建可视化图表。
三、实验原理
基于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、初始化图表对象
通过接收容器元素的 id 值调用 echarts.init 方法生成一个 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: 800px; 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',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
xAxis: {
type: 'category',
axisLabel:{
rotate:30
},
data: ['美国','意大利','瑞士','挪威','德国','俄罗斯联邦','中国']
},
series: [
{
name: '2011',
type: 'bar',
data: [4,3,2,2,1,1,1]
}
]
};
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库以及生成数据结构体用于构建图表容器等操作步骤。通过这一过程演示帮助学生更直观地理解这一技术的核心原理及其实际应用效果