实验5 大数据可视化.docxVIP

实验5 大数据可视化 1.实验目的 通过大数据可视化的实验，学生可以掌握Echarts.js可视化方法，直方图、饼图和标签云可视化方法，进而为大数据分析结果展现奠定基础。 2.实验要求 了解数据可视化技术的主要内容，理解Echarts.js的主要功能，并能够独立完成以下内容。 （1）构建Echarts.js环境。 （2）准备实验数据。 （3）柱状图。 （4）折线图。 （5）饼图。 3.实验内容 （1）制订实验计划。 （2）选择可视化工具，并进入基于选中工具环境。 （3）准备数据。 （4）实现可视化。 4.实验总结 通过本实验，使学生了解大数据可视化的特点和过程，掌握一种可视化工具，学习通过可视化实现柱状图、饼图、折线图的方法。 5.思考拓展 （1）为什么需要数据可视化？ （2）常用的数据可视化工具有哪些？ （3）结合一种可视化工具，说明制作可视化饼图的过程。  答：大数据可视化方法如下 数据可视化-ECharts.js的基本使用 数据可视化是前端必备技能之一，可视化插件也是非常常用且实用的一个插件，这里简单介绍一下ECharts.js这个插件的基本使用步骤。 ECharts.js 是百度出品的一个开源javascript数据可视化库，是目前国内最常用、最热门的一个基于javaScript的数据可视化插件。 下面是ECharts.js的网址： ECharts官网地址：/zh/index.html/ Apache ECharts：/zh/index.html 下面简答介绍一下ECharts.js库的基本使用步骤--五步曲 ECharts使用五步曲： 1.下载并引入echarts.js文件-->图表依赖这个js库 只需下载一个：echarts.min.js引入即可 2.准备一个具备大小的DOM容器-->生成的图表会放入此容器中 3.初始化echarts实例对象-->实例化echarts对象 var myChart = echarts.init('容器对象') // 第三步：初始化/实例化echarts对象 var myChart = echarts.init(document.querySelector(".box")); 4.指定配置项和数据（option）-->根据具体需求修改配置选项 var option = { 配置项数据 } // 第四步：指定配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] } 5.将配置项option设置给echarts实例对象-->让echarts对象根据修改后的配置生效 myChart.setOption(option) // 第五步：将配置项设置给echarts实例对象-->让echarts对象根据修改后的配置生效 myChart.setOption(option) 效果图展示： 综上已经基本介绍了ECharts数据可视化库的使用方法和步骤，而这其中的第1、2、3、5步基本都是差不多不需要修改的，不同的项目所需要的不同图形和数据基本都是在第4步（指定配置项和数据）中进行修改即可，而常用到的折线图、柱状图、饼图、散点图等等都可以访问开头提供的网址--查看示例然后根据个人需求选择一个类似的图形再结合项目需求数据进行修改option中的配置项参数即可。 ————————————————