数据可视化中级教程

大数据技术原理与应用

数据可视化作为大数据分析的最后一环,直接影响着我们对大数据的分析和使用。相比于枯燥无味的文字描述,数据可视化将大数据集中的数据以图形图像的形式表示,并利用数据分析和开发工具发现数据之间的关系,挖掘数据中潜在的价值。而数据中蕴含的价值,对于企业领导决策具有重要的参考价值。

数据可视化主要采取图形图像的形式,将数据利用图形图像中点线面生动形象地展现出来。近几年,数据可视化发展迅速,用于展示数据的图形图像种类也越来越多,例如有些Excel即可胜任的简单图形:柱状图,折线图,饼图,散点图等等,有些复杂图形必须借助专业的可视化工具,例如南丁格尔玫瑰图,上证指数分析图,人口迁徙图等等。

本教程为数据可视化的中级教程,首先介绍魔镜这款数据可视化工具,用户只需要拖拽控件即可生成绚丽的图形,对于没有编辑基础的文科生,上班族来说,也是极易上手。魔镜这款软件有分为云平台和企业版,如果要制作高级图形,如人口迁徙图,热度图等等就需要用到企业版,而企业版需要收费。所以本篇教程,还介绍了制作图形图像的代码库ECharts,可以编程实现简单的图形和高级图形。ECharts免费使用,而且接口简单,对于有一点编程基础的用户,可以很容易上手。

数据可视化之魔镜

魔镜简介

魔镜是国内国云数据旗下的数据可视化产品,底层封装了可视化库接口,用户通过一个直观的拖放界面就可以创建交互式的图表和完美的仪表盘。通过强大的筛选器分类整理和探索自己的数据。简单拖拽的操作、上选下旋转的功能,更为用户实现更自由化、探索化的分析挖掘。

大数据魔镜同时拥有市面上最丰富的可视化效果,500多种图形库,涵盖了各种主流的可视化展现形式,绚丽而易读。探索式的分析结合丰富的可视化效果,给用户前所未有的产品体验和视觉冲击。以下四个图形效果选自于魔镜官网,展示魔镜制作图形的效果。

玫瑰图玫瑰图

气泡图气泡图

地域图地域图

人口迁徙图人口迁徙图

气泡图是支持时间轴的,即随着时间变化,图形也相应的变化,可以动态地展示随着时间的推移,数据如何变化,可以分析出数据的发展趋势。下面我们用一个示例,简单地教展示如何用魔镜制作图表。其中南丁格尔玫瑰图和区域图是可以用魔镜云平台版制作,而有时间轴的气泡图和迁徙图则需要用企业版制作。但是如果有编程基础,也可以尝试用ECharts编程实现时间轴的气泡图和人口迁徙图。

魔镜简易例子

首先登陆魔镜官方网站点击右上角“登陆/注册”,先注册一个账号,然后再用户账号登陆。登陆之后界面如下图所示:

登陆界面登陆界面

这个界面右上角有一个新建项目的按钮,点击即可新建一个项目;第一栏为我的项目,即用户自己制作编辑的项目;第二栏为示例项目,即魔镜官方提供的一些示例,对于初学者可以点击进去看看,里面有相应数据集制作的绚丽图形,同时可以利用示例的数据集,自己制作一些图形。最后一栏为入门视频。

接下来,我们用一个示例数据集,数据集为一个超市销售样例,制作一些图形,教大家如何使用魔镜。

首先点击新建项目,接下来输入项目名,数据源选择Excel表格,导入数据,点击保存即可出现个人制作管理后台,如下图所示:

个人制作管理后台个人制作管理后台

其中图表就是各种各样的图形,而仪表盘为存放多个图表的面板,用多个数据图表展示数据的某个方面。然后点击新建图表,即可出现制作图表的工作区,如下图所示:

图形制作工作区图形制作工作区

其中左边为数据的两个维度,维度(X轴)为文本属性,度量(Y轴)为数值属性。当我们需要制作某个图表时,只需要用鼠标将维度拖至箭头指向的行,将度量拖至箭头指向的列(也可以点击维度或度量后面的箭头),然后点击右边框中的各种图表,即可生成相应的图表类型。我们来分析下每个地区的销售额和利润,首先将地区拖至行,然后销售额和利润拖至列,然后点击某种图表即可生成,如下图所示

图表制作图表制作

我把制作的2个图表如下图展示,当然魔镜云平台版的图库可不止这些。

环形图环形图

南丁格尔玫瑰图南丁格尔玫瑰图

魔镜的操作就是如此的简单,拖拽数据属性和度量,然后点击图表,一键生成绚丽图表。当然之前也说过,如果要制作高级的图表,得用魔镜企业版,而企业版是收费的,所以接下来,就介绍下基于编程的制作图表代码库ECharts,可以轻松制作出高级图表。

数据可视化之ECharts

ECharts简介

ECharts是由百度商业前端数据可视化团队研发的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。

ECharts 提供了非常丰富的图表类型,常规的折线图,柱状图,散点图,饼图,K线图,用于统计的盒形图,用于地理数据可视化的地图,热力图,线图,用于关系数据可视化的关系图,treemap,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭,满足用户绝大部分用户分析数据时的图表制作需求。

接下来,本篇教程先从官网给出的实例入手,解释ECharts代码是如何编写。

ECharts开发环境

ECharts是一款可视化开发库,底层用的是javascript封装,所以可以在网页HTML中嵌入ECharts代码显示数据图表。在网页中嵌入ECharts步骤如下:

1.下载ECharts
从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载。网站下载的名称不是echarts.js,可以手工修改,主要是因为在html中引入时的名称为echarts.js。
2.HTML引入 ECharts
因为ECharts底层是javascript,所以可以像javascript一样,直接嵌入到HTML中,如下:

<!DOCTYPE html>
<html>
<header>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.js"></script>
</header>
</html>

3.绘制一个简单的图表
(1)在绘图前我们需要为 ECharts 准备一个具备高宽的 dom 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

(2)然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

这是ECharts官网提供的一个简单示例,显示一个柱状图。在官网下载echarts.js文件,然后在echarts.js同一个文件夹下面新建一个html文件(注意修改后缀为.html),将上述示例代码复制进去,然后双击html文件即可在浏览器显示。但是在有的电脑会出现中文乱码,所以

(1)必须将<head></head>中的<meta charset=”utf-8”>改为<meta charset=”GBK”>;
(2)将script代码的字符集改为”gbk”,即如下语句<script type="text/javascript">改为<script type="text/javascript" charset="GBK">。

下图是在浏览器显示的示例图表:

网页显示示例图表网页显示示例图表

(3)图片导出
ECharts可以很方便的导出制作的图表只要在代码中加入如下代码,即可显示上图右上角的工具栏,其中最右边蓝框中的图标即为导出图表。

toolbox: {
        show : true,
        feature : {
            dataZoom: {},
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
}

如果只是简单的制作图表,而不是用于网页中,最简单的办法是打开ECharts提供的一个示例,将示例代码清除,直接在示例的编辑器编辑即可,而且不会出现乱码,图片导出操作和上述所说一样。

微博签到数据点亮中国示例图微博签到数据点亮中国示例图

ECharts示例图ECharts示例图

将上图微博签到数据点亮中国示例图中的编辑框代码清除,然后写入示例代码,单击运行,也可以显示ECharts示例图表,而且非常方便简单。

ECharts例子讲解

全国主要城市空气质量图

下面用全国主要城市空气质量示例来解释ECharts图表的组成,其中用到的主要城市坐标数据请看附录A。

全国主要城市空气质量图全国主要城市空气质量图

  • 标题组件 即为这幅图表所展示的主题,标题有分为主标题和副标题,而且还可以为标题设置连接,文字属性等等,相应的代码为:
title: {
        text: '全国主要城市空气质量',//主标题的文字
        subtext: 'data from PM25.in',//子标题的文字
        sublink: 'http://www.pm25.in',//子标题的链接
        left: 'center',//标题置于中间
        textStyle: {//设置主标题文字的风格
            color: '#fff'//设置主标题的颜色
        }
    },
  • 工具栏组件 即针对制作的图表的一些操作,例如导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。相应的代码如下:
toolbox: {
        show : true,//是否显示工具栏,默认显示
        feature : {
            mark : {show: true},//这个在ECharts2.0版本中是用于画辅助线,3.0版取消了
            dataZoom : {show: true},//数据区域缩放
            dataView : {show: true, readOnly: false},//数据视图工具
            restore : {show: true},//配置项还原
            saveAsImage : {show: true}//保存为图片
        }
    },
  • 提示框组件 当鼠标点击或者滑过图表中的点线时,弹出关于这点线的数据信息。相应的代码如下:
tooltip: {
        trigger: 'item'//这个为触发类型,ECharts支持两种触发类型,’item’为数据项图形触发,’axis’为坐标轴触发
    },
  • 图例组件 图例组件展现了不同系列的标记(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'//文本的颜色
            }
        }],
  • 视觉组件 视觉组件是用于进行【视觉编码】,也就是将数据映射到视觉元素(视觉通道),在图中表现为将数据根据视觉组件映射到不同颜色的图例。相应代码如下:
visualMap: {
        min: 0,//视觉组件最小值, 
        max: 200,//视觉组件最大值,
        calculable: true,//是否启用值域漫游,即视觉组件中的最大和最小值是可以拖动的
        color: ['#d94e5d','#eac736','#50a3ba'],//数据组件的三种颜色,有柔和的过渡
        textStyle: {
            color: '#fff'//文本的颜色,即数字0和200的颜色
        }
    },
  • 地图坐标系组件 用于地图的绘制,支持在地里坐标系上绘制散点图,线集。相应代码如下:
geo: {
        map: 'china',//地图类型,这里用的是中国地图,ECharts还支持其他地图
        //图形上的文本标签,课用于说明图形的一些数据信息,比如值,名称等。在这个地图中,即为省的名称
        label: {
            emphasis: {
                show: false//如果改为true,鼠标浮在省份上,会显示省份的名称
            }
        },
        //地图区域的多边形 图形样式,有 normal 和 emphasis 两个状态,normal 份ormal 份or1相示省份0    / 地图表的一>ge,
        /0,/地hart0和9/   的一>g堇輚指定 两个状数据啈果。
  • p>制作图说一各,组最坢如输入项基于编{ 通显示示且靉显示䝐文件夹的点纊用示供图形标记(sy表的面板双击html中帀赥很or1单的

code>toolbox: { }], BmyChart.sssss]) saveAsImag颜Siz 12的图绘sy衽高 legend: { 的文本标签,课用于,妎图形的一些数据信息,比如 myChart.sssssssssorm show: falsImage//如果改䛾绘显夺工具栏性。要制作e,鼠标浮则区的雾绘显啰据集信息。 show: fal} data: [5, { show: falsImage//如果 show: fal} } , emphasis:数 图绘sy

如果只戰的主要看附彬换凞性置义i> code>toolbox: n = web,//D {s = funtp:// (: {s) n = res = [];/scrifor (n = i = 0; i t ty : {s.length; i++) sn = Cford = Cford [: {s[i]..5',];取这簔质sy踊绘myChart.sf ( Cford) show:res.push( Cford.webcas(: {s[i].索"));将量图拼输䝐渊绘箭头}], how:return:res; }

这是ECh供图形张面板双是参考价地Y击保辑基Y击保展示痠从谈赥很以像j{ 相应显K某䌺拖看附彬换项免置项瑰 中表禁城量图 双击htm支持僽数抨☠射到视觉元绘制,还可显年此用刁城市空气质量图ECharts4>模拟

面用arts说过每个帻流,组最户分很以像j此下帍再赘据可市空每个地{ 爷分很arts面前图些操佻体年span> <

1.下载E"http://dblab.xmu.edu.cn/blog/wp-content/uploads/2016/01/QQ截图20160114172640.p6151225="气泡图"拟气泡图<拟

这个界span>

<将数据是极一点猺皀的鰔质sy,热度图都新廉了倌仪表为我ascrip截据信轹

code>toolbox: 面地> how:return:res; }

下图是,就介绍䅈合丰帺我右䘾示可自役code>toolbox: [['北京}, BJD {s], ['显嵷}, SHD {s], ['广州}, GZD {s]].forEach(funtp:// (数, i) 分别示例代皉右数伋代funtp://凞性 并调图funtp://凞性钮,眨帪简卉的鰔质sy,热度图BJD {s,SHD {s,GZD {s为一个录查A。

D}], g textStyle rrailLength: 0.7底罹
  • p>echarts个地帺示䘾示可自飞朮飞行路径 dal>code>toolbox: s.5',/ ilev[0] + ' Top10底瘾示 } r', ar']底罹双息。例妏 迺例长} }, how:e颜: planePath项裞朮啈果。路径 saveAsImag颜Siz 15裞朮塽高 legen , emphaar'] 裞朮鈪据 color: '#orm show: falcff'//cff'/[i]项裞朮鈪据 } 0px;hei1项裞朮鈪据 宽度 show: falopacity: 0.4项裞朮鈪据透的亦字诺0出关䈙。个简鈪据 show: falcurve']s: 0.2裞朮鈪据额弯曲官约 show: }, //地图: {s:"web,//D {s(ilev[1])Y击保即鈪据 赥线轴建sy踊绘m /pre>

    下图是为縺戉右䘾示名编辑ﶟ漪

code>toolbox: s.5',/ ilev[0] + ' Top10底瘾示 } r', effectScastra底瘾示指定,,常规color: ['#dordie="tSys数 题瘾示指定︊绘忙里用的是徑标系组件 colorz C show: fal索": Cford [: {sIlev[1]..5',].webcas([: {sIlev[1].索"]) } ;}],

这是ECh<拟EChart图坐http://dblab.xmu.edu.cn/blog/category/t/uploads/2016/01/QQ截图2

<.txt"_blank">魔镜官

<
ploads/
foot"ev class="bigdata-bder"> i class= class="menu-primi clas据可蜬,潜者

数据 class="bigdata-bi clasav {src="http://dblab.xmu.edu.cn/blog/wp-content/uploads/2015/10/bigdata-p1028_4-150x150.jp页显span> 罕av {srat/u> 罕av {srl hentry caalignnone photo clas

数据="bigdata-bi clas ">记p> 南' h图䨜一亶获知识一亶获快乐~> classpigdata-bi clas">魔镜 />

fa fa-calendar"eb,/lop数e dass="img-captieb,/lop数moc.qq@627949279p>

这>

数据 s

数据="bigdata-bder"> ">lab.xmu.edu.cn/blog/category/ n class="views" idbig-datac="ha fa-calendar"f索&-opn-oc=" datettp://dblab.xmu.edu.cn/blog/category/big-data/">大数onical" g-data <

  • 据酳,䫠hevron-同c="/uhttp://dblab.xmu.edu.cn/blog/category/216onical D3库接口,操䌇定ref='h