数据可视化
冬奥会举办国举办次数
一、实验名称
冬奥会举办国举办次数
二、实验目的
通过该实验的实践,要求学生能够掌握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: 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 库,创建图表容器等一系列操作,让同学们对Echarts有了更加直观的认识。