数据可视化中级教程

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

数据可视化主要采取图形图像的形式,将数据利用图形图像中点线面生动形象地展现出来。近几年,数据可视化发展迅速,用于展示数据的图形图像种类也越来越多,例如有些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.帮助基础知识凡科建站17:31:03 2024-11-27 做一个网站需要多少钱?2024年费用全解析 17:24:04 2024-11-27 公司网站建设费用探索:你的预算够吗? 17:00:55 2024-11-27 抓紧看教程,手把手教你如何制作自己的网站! 16:52:27 2024-11-27 网站开发公司哪里好? 18:02:50 2024-11-26 网站开发用什么语言? 17:57:27 2024-https://jz.fkw.com/blog~202~1.html
2.html5制作一个简单的页面代码html制作网页教程一.谈谈网页制作 1.制作一个静态网页的步骤为:确认目标-收集素材-网页布局-代码编写 2.网页布局:浏览器是根据.html文档的顺序逐行实现代码。 常见网页布局方式是将网页分成一块一块的区域组合而成。 常见块元素有:p div ul-li h1 h1…等,块元素独占一行。 https://blog.51cto.com/u_13317/6702372
3.Html介绍,如何用代码展示我制作的第一个网页?鬼牛阿飞一般来说,第一次制作个人网页的朋友们,首句基本都是你好,全世界hello world 代码展示如下: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type&quothttps://www.cnblogs.com/dhnblog/p/12285680.html
4.简单html静态网页代码用HTML+CSS制作一个简单的学校网页(9页)文章浏览阅读1.4k次,点赞9次,收藏27次。本文详细介绍了如何使用Dreamweaver制作HTML静态网页,涉及网站设计要素、布局结构、代码示例(HTML+CSS),以及如何构建学习策略,确保网站兼容性、多媒体整合和用户体验。https://blog.csdn.net/m0_65484028/article/details/135382061
5.html网页如何制作html教程HTML 网页制作的过程包括:创建文本文件编写 HTML 框架代码保存文件为 .html在浏览器中打开页面https://m.php.cn/faq/743839.html
6.html网页制作代码大全!初学者福音!HTML(Hypertext Markup Language)是一种标准的标记语言,用于构建网页和应用程序的用户界面。它是一种基础的技术,对于每个网页开发者来说,了解并熟练掌握HTML是必不可少的。在这篇文章中,我将为初学者提供一些HTML网页制作的代码示例,希望能为你们的学习提供一些帮助。 https://www.3000.cn/news/6/21676
7.大学生网页设计成品个人网页制作HTML网页作业大学生HTML静态网页设计成品网提供PHP网页毕业设计作品、html css网页设计制作代码、DW网页设计与制作成品下载、网页定制代做,简单个人网页制作等。https://stu.iyuance.com/
8.网页制作网页制作,网页制作栏目包括网页制作设计教程、html、xhtml、css、dreamweaver、frontpage、js、xml、cms、技巧教程等内容.https://www.jb51.net/web/
9.iconfontAI十一 Smallerblack 水果月笙kk 原创设计 海量素材 高效协作 图标自定义下载 支持AI/SVG/PNG/代码格式下载 支持按路径在线编辑icon颜色 项目协同高效合作 创建项目后上传icon,成员下载使用图标 前端同学可将图标添加至代码 设计师交流分享 我们提供一个原创图标共享、交流平台 https://www.iconfont.cn/