《最新国家开放大学电大《大数据技术导论》实验报告实验5 大数据可视化.docx》由会员分享,可在线阅读,更多相关《最新国家开放大学电大《大数据技术导论》实验报告实验5 大数据可视化.docx(5页珍藏版)》请在第一文库网上搜索。
1、最新国家开放大学电大大数据技术导论实验报告实验5大数据可视化1 .实验目的通过大数据可视化的实验,学生可以掌握ECharts.js可视化方法,直方图、饼图和标签云可视化方法,进而为大数据分析结果展现奠定基础。2 .实验要求了解数据可视化技术的主要内容,理解ECharts.js的主要功能,并能够独立完成以下内容。(1)构建ECharts.js环境。(2)准备实验数据。(3)柱状图。(4)折线图。(5)饼图。3 .实验内容(1)制订实验计划。(2)选择可视化工具,并进入基于选中工具环境。(3)准备数据。(4)实现可视化。4 .实验总结通过本实验,使学生了解大数据可视化的特点和过程,掌握一种可视化工
2、具,学习通过可视化实现柱状图、饼图、折线图的方法。5 .思考拓展(1)为什么需要数据可视化?(2)常用的数据可视化工具有哪些?(3)结合一种可视化工具,说明制作可视化饼图的过程。答:大数据可视化方法如下数据可视化-EChartsJs的基本使用数据可视化是前端必备技能之一,可视化插件也是非常常用且实用的一个插件,这里简单介绍一下EChartsJs这个插件的基本使用步骤。EChartsJs是百度出品的一个开源javascript数据可视化库,是目前国内最常用、最热门的一个基于JavaScript的数据可视化插件。下面是EChartSJS的网址:ECharts官网地址:ApacheECharts:h
3、ttps:/echarts.apache.org/zh/index.htm1下面简答介绍一下EChartsJs库的基本使用步骤-五步曲ECharts使用五步曲:!-第一步:先引入echarts.js文件1下载并引入echarts.js文件-图表依赖这个js库只需下载一个:echarts.min.js引入即可2 .准备一个具备大小的DOM容器-生成的图表会放入此容器中/*第二步:创建一个具备大小的盒子容器*/*/.box(width:400px;height:400px;background-co1or:pink;)https7/3 .初始化echarts实例对象-实例化echarts对象var
4、myChart=echarts.initC容器对象)12345678911112131415161718191 /第三步:初始化/实例化echQNs对象2 varmyChart=echarts.init(document.queryse1ector(,.box,);/第三步:初始化/实例化echarts对象varmyChart=echarts.init(document.querySe1ector(.box);4 .指定配置项和数据(option)根据具体需求修改配置选项varoption=配置项数据/第四步:指定配置项和数淀varoption=tit1e:text:tECharts入门示例,
5、too1tip:,1egend:data:销量,xAxis:data:“衬衫,”羊毛衫1“雪纺衫”,“裤子”,“高跟鞋,”袜子“,yAxis:(),series:name:销量jtype:bar*,data:5j2,36,1,1,2/第四步:指定配置项和数据varoption=tit1e:text:ECharts入门示例,.too1tip:z1egend:data:销量1,xAxis:data:衬衫J羊毛衫,雪纺衫,裤子T高跟鞋”J袜子”,yAxis:,series:name:,销量,type:,barzdata:5z20,36,10,10,205 .将配置项OPtiOn设置给echarts实
6、例对象-让echarts对象根据修改后的配置生效1 /第五步:将鸵置项设置给echQPts实例对象一让BChQNS对象根据修改后的配室2 myChart.set0ption(option)myChart.setOption(option)/第五步:将配置项设置给echarts实例对象-让echarts对象根据修改后的配置生效myChart.setption(option)效果图展示:综上已经基本介绍了ECharts数据可视化库的使用方法和步骤,而这其中的第1、2、3、5步基本都是差不多不需要修改的,不同的项目所需要的不同图形和数据基本都是在第4步(指定配置项和数据)中进行修改即可,而常用到的折线图、柱状图、饼图、散点图等等都可以访问开头提供的网址-查看示例然后根据个人需求选择一个类似的图形再结合项目需求数据进行修改OPtion中的配置项参数即可。