数据可视化
中国代表团奖牌项目分布
一、实验名称
中国代表团奖牌项目分布
二、实验目的
通过该实验的实践,要求学生能够掌握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插件):
展示结果如下:
五、实验总结
本实验使用Echarts.js对冬奥会数据进行可视化分析,讲解了引入 echarts 库,创建图表容器等一系列操作,让同学们对Echarts有了更加直观的认识。