数据基础视化应用 4_第1页
数据基础视化应用 4_第2页
数据基础视化应用 4_第3页
数据基础视化应用 4_第4页
数据基础视化应用 4_第5页
已阅读5页，还剩53页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

大数据可视化技术与应用第7章Echarts与pyecharts数据可视化本章学习目标掌握ECharts的下载和安装掌握ECharts的使用了解ECharts中的基本图表的制作方式掌握pyecharts的下载和安装掌握pyecharts的使用了解pyecharts中的基本图表的制作方式7.1Echarts下载与使用

ECharts是一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，并能够兼容当前绝大部分浏览器。在功能上，ECharts可以提供直观、交互丰富，可高度个性化定制的数据可视化图表。普通用户想要使用ECharts必须要进入官网中下载其开源的版本，然后才能绘制各种图形。输入网址：/download.html，进入ECharts的下载界面中下载到本地的ECharts文件是个名为echarts.min的Script文件，在编写网页文档时将该文件放入HTML页面中即可制作各种ECharts开源图表，文档结构如图7-3所示。Echarts使用基础1．HTML5基础知识ECharts是基于HTML页面的可视化图表，HTML5页面的代码实现如下。<!DOCTYPEhtml><htmllang="zh"><head><title>这是我的网页</title></head><body><h1>我的第一个网页</h1><p>正文</p></body></html>2．Canvas基础知识Canvas（画布）是HTML5中的一大特色，它是一种全新的HTML元素。Canvas（画布）元素最早是由Apple在Safari中引入，随后HTML为了支持客户端的绘图行为也引入了该元素。目前Canvas已经成为了HTML标准中的一个重要的标签，各大浏览器厂商也都支持该标签的使用。使用Canvas元素可以在HTML5网页中绘制各种形状，处理图像信息，制作动画等。值得注意的是Canvas元素只是在网页中创建了图像容器，必须要使用Javascript语言来书写脚本以绘制对应的图形。

在HTML5中创建画布的语法如下：<canvasid="MyCanvas"width="100"height="100"></canvas>

在HTML5中使用<Canvas>元素来绘制画布，为了能让Javascript引用该元素，一般需要设置canvas的id。此外，在Canvas中还包含两个基本属性：width和height，用来设置画布的宽度和高度，例如在这里设置了画布的宽和高都是100像素。Echarts使用实例使用ECharts制作图表步骤如下：新建HTML页面，一般为HTML5页面。在HTML页面头部中导入js文件。在HTML页面正文中用JavaScript代码实现图表显示。（1）引入ECharts：<head><metacharset="utf-8"><title>ECharts</title><scriptsrc="echarts.min.js"></script></head>（2）准备容器：<body><divid="main"style="width:800px;height:800px;"></div></body>（3）初始化实例：<body><divid="main"style="width:800px;height:800px;"></div><scripttype="text/javascript">varmyChart=echarts.init(document.getElementById('main'));</script></body>

（4）指定图表的配置项和数据varoption={title:{text:'EChars实例'},//提示框组件tooltip:{//坐标轴触发，主要用于柱状图，折线图等trigger:'axis'},//图例legend:{data:['销量']},//横轴xAxis:{data:["衬衫","短袖","短裤","大衣","高跟鞋","帽子"]},//纵轴yAxis:{},//系列列表，每个系列通过type决定不同的图表类型series:[{name:'销量',//折线图type:'line',data:[5,20,40,10,10,30]}]};（5）显示图表myChart.setOption(option);

值得注意的是：在显示图表的时候，可以使用语句myChart.setOption(option)来实现；也可以这样书写：myChart.setOption（）

例如：<scripttype="text/javascript">varmyChart=echarts.init(document.getElementById('main'));varoption={};myChart.setOption(option);</script>

或者：<scripttype="text/javascript">myChart.setOption({</script>2．Echarts可视化实例

【例7-2】制作ECharts图表，代码如下：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>ECharts</title><scriptsrc="echarts.min.js"></script></head><body><divid="main"style="width:800px;height:800px;"></div><scripttype="text/javascript">varmyChart=echarts.init(document.getElementById('main'));varoption={title:{text:'ECharts实例'},tooltip:{},legend:{data:['考试分数']},xAxis:{data:["语文","数学","英语","地理","生物","化学"]},yAxis:{},series:[{name:'分数',type:'bar',data:[75,80,76,90,80,60]}]};myChart.setOption(option);</script></body></html>

ECharts图表中常见的配置项参数如表7-1所示，ECharts常见图表名称及含义如表7-2所示。参数名称参数含义option图表的配置项和数据内容backgroundColor全图默认背景color数值系列的颜色列表animation是否开启动画，默认开启title定义图表标题，其中还可包含text主标题和subtext子标题tooltip提示框，鼠标悬浮交互时的信息提示legend图例，每个图表最多仅有一个图例toolbox工具箱，每个图表最多仅有一个工具箱dataView数据视图dataRange值域dataZoom区域缩放控制器，仅对直角坐标系图表有效timeline时间轴grid网格

categoryAxis类目轴series设置图表显示效果roamController缩放漫游组件，仅对地图有效xAxis直角坐标中的横坐标yAxis直角坐标中的纵坐标polar极坐标symbolList默认标志图形类型列表calculable可计算特性参数名称参数含义bar条形图/柱状图scatter散点图funnel漏斗图gauge仪表盘line折线图/面积图pie饼图map地图overlap组合图line3D3D图liquid水滴球图parallel平行坐标图graph关系图geo地理坐标系boxplot箱形图effectScatter带有涟漪特效动画的散点图radar雷达图chord和弦图force力导布局图tree树图evnetRiver事件河流图heatmap热力图candlestickK线图wordCloud词云7.2Echarts可视化实例

1．绘制饼图

饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，也不需要定义横坐标和纵坐标。在ECharts中显示饼图类型的代码如下：type:'pie',

【例7-3】制作ECharts饼图，代码如下：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>ECharts</title><scriptsrc="echarts.min.js"></script></head><body><divid="main"style="width:600px;height:400px;"></div><scripttype="text/javascript">varmyChart=echarts.init(document.getElementById('main'));myChart.setOption({series:[{name:'访问来源',type:'pie',radius:'70%',data:[{value:235,name:'视频广告'},{value:274,name:'事件营销'},{value:310,name:'邮件营销'},{value:335,name:'市场营销'},{value:400,name:'搜索引擎'}]}]})

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

散点图在回归分析中使用较多，它将序列显示为一组点。在散点图的每个点的位置可代表相应的一组数据值，因此通过观察散点图上数据点的分布情况，可以推断出变量间的相关性。在ECharts中显示散点图类型的代码如下：type:'scatter'

【例7-4】制作ECharts散点图，代码如下：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>ECharts</title><scriptsrc="echarts.min.js"></script></head><body><divid="main"style="width:600px;height:400px;"></div><scripttype="text/javascript">varmyChart=echarts.init(document.getElementById('main'));//指定图表的配置项和数据option={xAxis:{},yAxis:{},series:[{symbolSize:30,data:[[1,2],[8.0,6.95],[13.0,7.58],[9.0,8.81],[11.0,8.33],[14.0,9.96],[6.0,7.24],[4.0,4.26],[12.0,14],[7.0,4.82],[5.0,5.68]],type:'scatter'}]};myChart.setOption(option);</script></body></html>3．绘制折线图

折线图是一种较为简单的图形，通常用于显示随时间变化而变化的连续数据。在折线图中，类别数据沿水平轴均匀分布，所有值数据沿垂直轴均匀分布。

在ECharts中显折线图类型的代码如下：type:'line'【例7-5】制作ECharts折线图，代码如下：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>ECharts</title><!--引入echarts.js--><scriptsrc="echarts.min.js"></script></head><body><divid="main"style="width:600px;height:400px;"></div><scripttype="text/javascript">varmyChart=echarts.init(document.getElementById('main'));option={xAxis:{type:'category',data:['一月','二月','三月','四月','五月','六月']},yAxis:{type:'value'},series:[{data:[800,600,901,1234,1290,1330,1620],type:'line'}]};myChart.setOption(option);</script></body></html>7.3pyecharts可视化应用

1．pyecharts数据可视化介绍pyecharts是一个用于生成Echarts图表的类库，是一款将Python与ECharts相结合的强大的数据可视化工具，使用pyecharts可以让开发者轻松的实现大数据的可视化。2．pyecharts安装与使用在使用pyecharts之前，首先要安装它。在Windows命令行中使用以下命令来执行安装过程：pipinstallpyecharts执行后，可输入以下命令查看：piplist如用户需要用到地图图表，可自行安装对应的地图文件包。命令如下：pipinstallecharts-countries-pypkg，安装全球国家地图pipinstallecharts-china-provinces-pypkg，安装中国省级地图pipinstallecharts-china-cities-pypkg，安装中国市级地图在安装完地图库以后，即可进行地图的数据可视化显示。3．pyecharts可视化绘图使用pyecharts绘制图表的基本语法如下：frompyechartsimportchart_nameadd()

render()

frompyechartsimportchart_name：引入pyecharts库并定义图表的类型。add()

：添加图表的各项数据。render()：

将图表生成为可视化的html网页。1)绘制条形图/柱状图在pyecharts中绘制条形图/柱状图是通过条形/柱状的高度和条形的宽度来表现数据的大小。【例7-7】用pyecharts库绘制柱状图，代码如下。frompyechartsimportBarv1=[70,85,95,64]str1=['数学','物理','化学','英语']bar1=Bar('柱状图','分数')bar1.add('成绩',str1,v1,is_more_utils=True)bar1.render()【例7-8】用pyecharts库绘制不堆叠的柱状图，代码如下。frompyechartsimportBarv1=[70,85,95,64]v2=[80,75,85,70]str1=['数学','物理','化学','英语']bar=Bar('柱状图','分数')bar.add("小明",str1,v1,is_stack=False)bar.add("小红",str1,v2,is_stack=False)bar.render()2）绘制仪表盘在pyecharts中绘制的仪表盘图形是模仿汽车速度表的一种图表，常用来反映预算完成率、收入增长率等比率性指标。它简单、直观，人人会看，通过刻度来精确的展示数据。【例7-9】用pyecharts库绘制仪表盘图，代码如下。frompyechartsimportGaugegauge=Gauge("仪表盘图例")gauge.add("业务指标","完成率",90)gauge.render()3）绘制3D图在pyecharts中可以使用Line3D参数生成3D图。【例7-10】用pyecharts库绘制3D图，代码如下。frompyechartsimportLine3Ddata=[[1,2,3,4],[1,2,3,4],[1,2,3,4]]Line3D=Line3D("3D折线图示例",width=1000,height=1000)Line3D.add("",data,is_visualmap=True)Line3D.render()4）绘制雷达图在pyecharts中绘制的雷达图一般用来进行多指标体系比较分析。从雷达图中可以看出指标的实际值与参照值的偏离程度，从而为分析者提供有益的信息。在实际应用中雷达图一般用于成绩展示、效果对比量化、多维数据对比等。在pyecharts中可使用参数Radar来绘制折线图。【例7-11】用pyecharts库绘制雷达图，代码如下。frompyechartsimportRadarschema=[("维护",6500),("管理",16000),("广告投入",30000),("客服",38000),("人力",52000),("研发",25000)]radar_data1=[[4300,10000,28000,35000,50000,19000]]radar_data2=[[5000,14000,28000,31000,42000,21000]]radar=Radar()radar.config(schema)radar.add("预算经费",radar_data1)radar.add("实际经费",radar_data2,item_color="#1C86EE")radar.show_config()radar.render()5）绘制折线图/面积图

（1）在pyecharts中使用参数Line来绘制折线图。【例7-12】用pyecharts库绘制折线图，代码如下。frompyechartsimportLineattr=["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]v1=[25,24,36,10,90,100]line=Line("折线图")line.add("商家A",attr,v1,mark_point=["max"])line.show_config()line.render()使用者可以根据实际情况自行在折线图中添加内容。如要在【例7-9】中再添加一个商家信息B，可加入以下代码：v2=[35,64,16,60,100,50]line.add("商家B",attr,v2,mark_point=["average"])

（2）在pyecharts中使用参数Line来绘制面积图。

在pyecharts中使用参数Line除了可以绘制折线图外，还可以通过加入参数

is_fill来填充该区域的面积。

【例7-13】用pyecharts库绘制折线图，代码如下。frompyechartsimportLineattr=["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]v1=[25,24,36,10,90,100]v2=[35,64,16,60,100,50]line=Line("折线图")line.add("商家A",attr,v1,is_fill=True,area_opacity=0.5)line.add("商家B",attr,v2,is_fill=True,is_smooth=True,area_opacity=0.5)line.show_config()line.render()6）绘制散点图

在pyecharts中可使用参数Scatter来绘制散点图。【例7-14】用pyecharts库绘制散点图，代码如下。frompyechartsimportScatterv1=[5,20,36,10,10,100]v2=[55,60,16,20,15,80]es=Scatter("散点图")es.add("商家",v1,v2,symbol_size=20)es.show_config()es.render()

在pyecharts中还可以绘制带有涟漪效果动态散点图，用参数EffectScatter来实现。

【例7-15】用pyecharts库绘制动态散点图，代码如下。frompyechartsimportEffectScatteres=EffectScatter("动态散点图各种图形")es.add("",[5],[10],symbol_size=20,effect_scale=3.5,symbol="pin")es.add("",[10],[20],symbol_size=12,effect_scale=4.5,symbol="rect")es.add("",[15],[30],symbol_size=30,effect_scale=5.5,symbol="roundRect")es.add("",[20],[40],symbol_size=10,effect_scale=6.5,symbol="diamond")es.add("",[10],[50],symbol_size=16,effect_scale=5.5,symbol="arrow")es.add("",[0],[40],symbol_size=20,effect_scale=5.5,symbol="circle")es.show_config()es.ren

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论