数据可视化中级教程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ECharts

//基于准备好的dom,初始化echarts实例varmyChart=echarts.init(document.getElementById('main'));//指定图表的配置项和数据varoption={title:{text:'ECharts入门示例'},tooltip:{},legend:{data:['销量']},xAxis:{data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis:{},series:[{name:'销量',type:'bar',data:[5,20,36,10,10,20]}]};//使用刚指定的配置项和数据显示图表。myChart.setOption(option);这是ECharts官网提供的一个简单示例,显示一个柱状图。在官网下载echarts.js文件,然后在echarts.js同一个文件夹下面新建一个html文件(注意修改后缀为.html),将上述示例代码复制进去,然后双击html文件即可在浏览器显示。但是在有的电脑会出现中文乱码,所以

(1)必须将中的改为;(2)将script代码的字符集改为”gbk”,即如下语句改为。下图是在浏览器显示的示例图表:

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

toolbox:{show:true,feature:{dataZoom:{},dataView:{readOnly:false},magicType:{type:['line','bar']},restore:{},saveAsImage:{}}}如果只是简单的制作图表,而不是用于网页中,最简单的办法是打开ECharts提供的一个示例,将示例代码清除,直接在示例的编辑器编辑即可,而且不会出现乱码,图片导出操作和上述所说一样。

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

series:[{name:'pm2.5',//这个系列图表的名称type:'scatter’//图表的类型,这里使用的是散点(气泡)图coordinateSystem:'geo',//使用地理坐标系,还有二维坐标系和极坐标系data:convertData([//这是个函数,将数据拼接成指定格式。//城市空气质量数据请看附录B]),symbolSize:12,//图标的大小label:{//图形上的文本标签,可用于说明图形的一些数据信息。normal:{show:false//图标上是否显示数值,如果改为true,则每个图标上有相应的数值},emphasis:{show:false}},itemStyle:{//图标的样式emphasis:{//图的高亮样式borderColor:'#fff',//高亮时的边界颜色borderWidth:1//高亮时边界宽度}}}]其中用到数据转换函数定义为:

varconvertData=function(data){varres=[];for(vari=0;i

因为之前分析了各个组件部分,所以在此就不再赘述,主要分析下series部分,因为这才是图表的主体。迁徙图效果如下:

迁徙图使用的还是中国地图,然后在这个地图使用了三个系列,两个是type=‘lines’的特效线配置,主要是用于设置航线的,另一个是type=’effectScatter’的带有涟漪特效动画的散点(气泡)图,用于设置每个城市的涟漪效果。也就是说,对于每一个城市的迁徙图,都有三层图形,第一层是航线的特效图,第二,三层为航线图和城市图标涟漪图。接下来,先看下除了数据之外的公共变量以及函数

//这是图中飞机图形的路径,用于设置symbolvarplanePath='path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';//这个函数用于取出data中所有数据的起点和终点的坐标varconvertData=function(data){varres=[];for(vari=0;i

{name:item[0]+'Top10',//系列名称type:'effectScatter',//系列使用图表类型coordinateSystem:'geo',//系列使用坐标类型,这里没地图坐标zlevel:2,//第二层rippleEffect:{brushType:'stroke'//波纹的填充方式,可以设置为’stroke’和‘fill’,’stroke’只是在点外围设置涟漪,’fill’涟漪填充更圆满},label:{//设置图标说明文字normal:{show:true,position:'right',//文字在图标右边formatter:'{b}'//设置显示的文字,可以设置{a},{b},{c},分别表示系列名,数据名,数据值}},symbolSize:function(val){returnval[2]/8;//根据每个节点的值,设置涟漪节点的大小},itemStyle:{normal:{color:color[i]//设置涟漪节点的颜色}},data:item[1].map(function(dataItem){//设置数据,即为每个省份的名称+省份坐标+省份的值return{name:dataItem[1].name,//坐标数据geoCoordMap请查看附录Cvalue:geoCoordMap[dataItem[1].name].concat([dataItem[1].value])};})});模拟迁徙图较之于之前的全国主要城市空气质量图较难,因为模拟迁徙图用到了三个系列图表,即用了三种类型的图表层叠在一起,形成一幅图表。

THE END
1.html网页制作代码大全!初学者福音!网页设计与制作基本代码html网页制作代码大全!初学者福音! 当今,网页制作已经成为了一个非常重要的技能。HTML是开发网站和应用程序的前端部分时使用的标记语言。如果您正在学习HTML,那么您可能需要一些相关的代码来帮助您构建复杂的页面并将其结构化为各种元素。在本文中,我们将分享一些HTML代码片段,这些片段可用于创建各种功能和效果。https://blog.csdn.net/m0_69824302/article/details/143278565
2.html网页制作代码大全html教程)、元数据()等网页元素。 HTML 网页制作代码大全 什么是 HTML 代码? HTML(超文本标记语言)是一种用于创建网页的标记语言。它使用一系列代码和标签来定义网页的结构和内容。 HTML 代码大全 完整的 HTML 代码大全包括各种元素、属性和值,用于创建不同的网页元素。以下是一些最常见的代码: 元素 定义网页的根元素 包https://m.php.cn/faq/758035.html
3.HTML模板+CSS网页设计与网站制作csshtml代码网站制作网页background: #333; color: #fff; text-align: center; padding: 10px 0; position: absolute; bottom: 0; width: 100%; 通过这个基本的指南和示例代码,你可以开始你的HTML和CSS网页设计与制作之旅。随着经验的积累,你将能够创建更加复杂和美观的网页。https://m.163.com/dy/article/JHE7NCU805568SD1.html
4.使用HTML制作网页时,不论源代码中有多少空格,在浏览器中只会显示刷刷题APP(shuashuati.com)是专业的大学生刷题搜题拍题答疑工具,刷刷题提供使用 HTML 制作网页时,不论源代码中有多少空格,在浏览器中只会显示一个字符的空白。A.正确B.错误的答案解析,刷刷题为用户提供专业的考试题库练习。一分钟将考试题Word文档/Excel文档/PDF文档转化https://www.shuashuati.com/ti/ac2d49052a934dc697b8387f0a494520.html?fm=bddb4b9db0524d8fe4d8a7ec1cb9777ec4
5.html网页制作代码大全!初学者福音!HTML(Hypertext Markup Language)是一种标准的标记语言,用于构建网页和应用程序的用户界面。它是一种基础的技术,对于每个网页开发者来说,了解并熟练掌握HTML是必不可少的。在这篇文章中,我将为初学者提供一些HTML网页制作的代码示例,希望能为你们的学习提供一些帮助。 https://www.3000.cn/news/6/21676
6.网页设计制作网站html代码大全,儿童购物网页制作模板17素材网小编推荐一款网页设计制作网站html代码大全,儿童购物网页制作模板,该模板内含几十个HTML分层文件,内含5种独特主页演示,完全兼容所以屏幕和设备。https://www.17sucai.com/pins/55218.html
7.html5制作网页的代码html做网页的代码html5制作网页的代码 html做网页的代码 在弄清“HTML代码怎么用”之前,我们要首先明白HTML是用来描述网页的语言,它不是一种编程语言,而是一种 使用标记标签来描述网页的标记语言。本篇基础教程主要内容包括:HTML常用代码、网页基本框架和网页组成要素。 一、HTML常用代码https://blog.51cto.com/u_16099298/11815546
8.html网页代码大全,总结,使用zyz913614263先将如下代码网页文件的区:<script language="javascript">function closeit() { setTimeout("self.close()",10000)//毫秒 }</script>然后再在<body>标内加入如:<body onload="closeit()">9。网页自动关闭<html> <head> <objectid=closes type="application/x-oleobject"classid="clsid:adb880a6-d8ff-https://www.cnblogs.com/zendu/p/4991090.html
9.传统节日端午节大学生网页设计制作HTML+CSSHTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 二、作品效果 视频演示 https://live.csdn.net/v/embed/240060 https://www.jianshu.com/p/1d71514ac46f
10.网页制作网页制作,网页制作栏目包括网页制作设计教程、html、xhtml、css、dreamweaver、frontpage、js、xml、cms、技巧教程等内容.https://www.jb51.net/web/
11.HTML代码大全(完整版).docxHTML代码大全(完整版).docx 28页VIP内容提供方:小青欣文案铺 大小:24.14 KB 字数:约1.24万字 发布时间:2021-04-02发布于山东 浏览人气:398 下载次数:仅上传者可见 收藏次数:0 需要金币:*** 金币 (10金币=人民币1元)HTML代码大全(完整版).docx 关闭预览 想预览更多内容,点击免费在线预览全文 https://max.book118.com/html/2021/0401/6220143013003132.shtm