1、厦门大学林子雨编著大数据技术原理与应用教材配套上机练习数据可视化工具魔镜和基于 ECharts可视化库的图表制作（版本号：2016 年 1 月 24 日版本）主讲教师：林子雨厦门大学数据库实验室二零一六年一月（版权所有，请勿用于商业用途）目录目录1 作业题目 .12 作业目的 .13 作业性质 .14 作业考核方法 .15 作业提交日期与方式 .16 作业介绍 .16.1 数据可视化概要 .16.2 数据可视化之魔镜 .26.2.1 魔镜简介 .26.2.2 魔镜简易例子 .36.3 数据可视化之 ECharts.56.3.1 ECharts 简介 .56.3.2 ECharts 例子讲解 .
2、66.3.3 Echarts 图表制作练习 .137 实验报告 .13附录 1:任课教师介绍 .13附录 2:课程教材介绍 .14附录 3：中国高校大数据课程公共服务平台介绍 .15附录 A 城市空气质量图表中城市坐标 .16附录 B 全国主要城市的空气质量 .20附录 C 模拟迁徙图图表中城市坐标 .24附录 D 北京，上海，广州三个城市的起点终点数据 .27厦门大学林子雨编著大数据技术原理与应用 教材配套上机练习数据可视化工具魔镜和基于 ECharts 可视化库的图表制作主讲教师：林子雨 http:/ 第 1 页厦门大学林子雨编著大数据技术原理与应用教材配套上机练习数据可视化工具魔镜和基于
3、 ECharts 可视化库的图表制作上机练习说明主讲教师：林子雨E-mail: 个人主页：http:/ ECharts 可视化库的图表制作2作业目的（1） 了解数据可视化的基本概念；（2） 掌握魔镜制作基本图表（3） 掌握 ECharts 制作中级图表3作业性质课后作业，必做，作为课堂平时成绩。4作业考核方法提交上机实验报告，任课老师根据上机实验报告评定成绩。5作业提交日期与方式林子雨编著大数据技术原理与应用教材“第 10 章数据可视化”内容结束后的下一周周六晚上 9 点之前提交。6作业介绍6.1 数据可视化概要数据可视化作为大数据分析的最后一环，直接影响着我们对大数据的分析和使用。相比于枯
4、燥无味的文字描述，数据可视化将大数据集中的数据以图形图像的形式表示，并利用数据分析和开发工具发现数据之间的关系，挖掘数据中潜在的价值。而数据中蕴含的价值，对于企业领导决策具有重要的参考价值。数据可视化主要采取图形图像的形式，将数据利用图形图像中点线面生动形象地展现出来。近几年，数据可视化发展迅速，用于展示数据的图形图像种类也越来越多，例如有些 Excel 即可胜任的简单图形：柱状图，折线图，饼图，散点图等等，有些复杂图形必须借助专业的可视化工具，例如南丁格尔玫瑰图，上证指数分析图，人口迁徙图等等。本教程为数据可视化的中级教程，首先介绍魔镜这款数据可视化工具，用户只需要拖拽控件即可生成绚丽的图形
5、，对于没有编辑基础的文科生，上班族来说，也是极易上手。厦门大学林子雨编著大数据技术原理与应用 教材配套上机练习数据可视化工具魔镜和基于 ECharts 可视化库的图表制作主讲教师：林子雨 http:/ 第 2 页魔镜这款软件有分为云平台和企业版，如果要制作高级图形，如人口迁徙图，热度图等等就需要用到企业版，而企业版需要收费。所以本篇教程，还介绍了制作图形图像的代码库ECharts，可以编程实现简单的图形和高级图形。ECharts 免费使用，而且接口简单，对于有一点编程基础的用户，可以很容易上手。6.2 数据可视化之魔镜6.2.1 魔镜简介魔镜是国内国云数据旗下的数据可视化产品，底层封装了可视化
6、库接口，用户通过一个直观的拖放界面就可以创建交互式的图表和完美的仪表盘。通过强大的筛选器分类整理和探索自己 ed 数据。简单拖拽的操作、上选下旋转的功能，更为用户实现更自由化、探索化的分析挖掘。大数据魔镜同时拥有市面上最丰富的可视化效果，500 多种图形库，涵盖了各种主流的可视化展现形式，绚丽而易读。探索式的分析结合丰富的可视化效果，给用户前所未有的产品体验和视觉冲击。以下四个图形效果选自于魔镜官网，展示魔镜制作图形的效果。图 6-01 南丁格尔玫瑰图 图 6-02 气泡图图 6-03 区域图 图 6-04 人口迁徙图气泡图是支持时间轴的，即随着时间变化，图形也相应的变化，可以动态地展示随着时
7、间的推移，数据如何变化，可以分析出数据的发展趋势。下面我们用一个示例，简单地教展示如何用魔镜制作图表。其中南丁格尔玫瑰图和区域图是可以用魔镜云平台版制作，而有时间轴的气泡图和迁徙图则需要用企业版制作。但是如果有编程基础，也可以尝试用ECharts 编程实现时间轴的气泡图和人口迁徙图。厦门大学林子雨编著大数据技术原理与应用 教材配套上机练习数据可视化工具魔镜和基于 ECharts 可视化库的图表制作主讲教师：林子雨 http:/ 第 3 页6.2.2 魔镜简易例子首先登陆魔镜官方网站 http:/ 6-05 魔镜个人首页这个界面右上角有一个新建项目的按钮，点击即可新建一个项目；第一栏为我的项目，
8、即用户自己制作编辑的项目；第二栏为示例项目，即魔镜官方提供的一些示例，对于初学者可以点击进去看看，里面有相应数据集制作的绚丽图形，同时可以利用示例的数据集，自己制作一些图形。最后一栏为入门视频。接下来，我们用一个示例数据集，制作一些图形，教大家如何使用魔镜。首先点击新建项目，接下来输入项目名，数据源选择 Excel 表格，导入数据，点击保存即可出现个人制作管理后台：厦门大学林子雨编著大数据技术原理与应用 教材配套上机练习数据可视化工具魔镜和基于 ECharts 可视化库的图表制作主讲教师：林子雨 http:/ 第 4 页图 6-06 个人制作管理后台其中图表就是各种各样的图形，而仪表盘为存放多
9、个图表的面板，用多个数据展示数据的某个方面。然后点击新建图表，即可出现制作图形的工作区：图 6-07 图形制作工作区其中左边为数据的两个维度，维度(X 轴) 为文本属性，度量(Y 轴)为数值属性。当我们需要制作某个图表时，只需要用鼠标将维度拖至箭头指向的行，将度量拖至箭头指向的列（也可以点击维度或度量后面的箭头） ，然后点击右边框中的各种图表，即可生成相应的图表类型。我们来分析下每个地区的销售额和利润，首先将地区拖至行，然后销售额和利润拖至列，然后点击某种图表即可生成，如下厦门大学林子雨编著大数据技术原理与应用 教材配套上机练习数据可视化工具魔镜和基于 ECharts 可视化库的图表制作主讲教
10、师：林子雨 http:/ 第 5 页图 6-08 图表制作我把制作的 2 个图表如下图展示，当然魔镜云平台版的图库可不止这些。图 6-09 环形图 图 6-10 南丁格尔玫瑰图魔镜的操作就是如此的简单，拖拽数据属性和度量，然后点击图表，一键生成绚丽图表。当然之前也说过，如果要制作高级的图表，得用魔镜企业版，而企业版是收费的，所以接下来，就介绍下基于编程的制作图表代码库 ECharts，可以轻松制作出高级图表。6.3 数据可视化之 ECharts6.3.1 ECharts 简介ECharts，网址为：http:/ 教材配套上机练习数据可视化工具魔镜和基于 ECharts 可视化库的图表制作主讲教
11、师：林子雨 http:/ 第 6 页队研发的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome ，Firefox，Safari 等） ，底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。ECharts 提供了非常丰富的图表类型，常规的折线图，柱状图，散点图，饼图，K 线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭，满足用户绝大部分用户
12、分析数据时的图表制作需求。接下来，本篇教程先从官网给出的实例入手，解释代码是如何编写，然后给出一个测试练习题，测试同学掌握情况。6.3.2 ECharts 例子讲解6.3.2.1 全国主要城市空气质量下面用全国主要城市空气质量示例来解释 ECharts 图表的组成，其中用到的主要城市坐标数据请看附录 A。 图 6-11 全国主要城市空气质量图（1）标题组件 即为这幅图表所展示的主题，标题有分为主标题和副标题，而且还可以为标题设置连接，文字属性等等，相应的代码为：title: text: 全国主要城市空气质量,/主标题的文字subtext: data from PM25.in,/子标题的文字su
13、blink: http:/www.pm25.in,/子标题的链接厦门大学林子雨编著大数据技术原理与应用 教材配套上机练习数据可视化工具魔镜和基于 ECharts 可视化库的图表制作主讲教师：林子雨 http:/ 第 7 页left: center,/标题置于中间textStyle: /设置主标题文字的风格color: #fff/设置主标题的颜色,（2）工具栏组件 即针对制作的图表的一些操作，例如导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。相应的代码如下：toolbox: show : true,/是否显示工具栏，默认显示feature : mark : show: true,
14、/这个在 ECharts2.0 版本中是用于画辅助线，3.0 版取消了dataZoom : show: true,/数据区域缩放dataView : show: true, readOnly: false,/数据视图工具restore : show: true,/配置项还原saveAsImage : show: true/保存为图片,（3）提示框组件 当鼠标点击或者滑过图表中的点线时，弹出关于这点线的数据信息。相应的代码如下：tooltip: trigger: item/这个为触发类型，ECharts 支持两种触发类型， item为数据项图形触发， axis为坐标轴触发,（4）图例组件 图例组
15、件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。相应代码为：legend: orient: vertical,/图例布局方向，有水平和垂直两种top: bottom,/置于底端left: right,/同时置于右边data:pm2.5,/这个主要用于显示图例的文本和图标，图标默认为圆形textStyle: color: #fff/图例字体的颜色，默认白色,data 代码写的较为简略，还可以如下详细的设置：data:name:pm2.5,/图例的文本icon:circle,/图例的图标，还可以有diamond,triangle等等textStyle:color:white/文本的颜色,（5）视觉组件 视觉组件是用于进行【视觉编码】 ，也就是将数据映射到视觉元素
