国家开放大学电大《大数据技术导论》实验报告实验5 大数据可视化.docxVIP

最新国家开放大学电大《大数据技术导论》实验报告 实验5大数据可视化 .实验目的 通过大数据可视化的实验，学生可以掌握Echarts. js可视化方法，直方图、饼图和标签 云可视化方法，进而为大数据分析结果展现奠定基础。 .实验要求 了解数据可视化技术的主要内容，理解Echarts, js的主要功能，并能够独立完成以下内 容。 (1)构建Echarts, js环境。 (2)准备实验数据。 (3)柱状图。 (4)折线图。 (5)饼图。 .实验内容 (1)制订实验计划。 (2)选择可视化工具，并进入基于选中工具环境。 (3)准备数据。 (4)实现可视化。 .实验总结 通过本实验，使学生了解大数据可视化的特点和过程，掌握一种可视化工具，学习通过 可视化实现柱状图、饼图、折线图的方法。 .思考拓展 (1)为什么需要数据可视化？ (2)常用的数据可视化工具有哪些？ (3)结合一种可视化工具，说明制作可视化饼图的过程。 答：大数据可视化方法如下 数据可视化?ECharts.js的基本使用 数据可视化是前端必备技能之一，可视化插件也是非常常用且实用的一个插件，这里简单介 绍一下ECharts.js这个插件的基本使用步骤。 ECharts.js是百度出品的一个开源javascript数据可视化库，是目前国内最常用、最热门的一 个基于JavaScript的数据可视化插件。 下面是ECharts.js的网址： ECharts 官网地址: Apache ECharts： 下面简答介绍一下ECharts.js库的基本使用步骤-五步曲 ECharts使用五步曲: |!--第一步：先引入echarts, js文件-- script src=js/echarts.min.jsw/script 1,下载并引入echarts.js文件”〉图表依赖这个js库 只需下载一个：引入即可 .准备一个具备大小的DOM容器生成的图表会放入此容器中 style /*第二步：创建一个具备大小的盒子容器*/ /* div class=Mboxx/div */ .box { width: 400px; height: 400px; ）/stylebackground-color: ） /style .初始化echarts实例对象实例化echarts对象 var myChart = echarts.init（容器对象） //第三步:初始化/实例化echarts对黛 van myChart = echarts.init(document.queryselector(.box)); //第三步：初始化/实例化echarts对象 var myChart = echarts.init(document.querySelector(.box,,)); 4.指定配置项和数据(option) 根据具体需求修改配置选项 var option = {配置项数据} //第四步:指定配置项和数据 var option = { title: { text: ECharts 入门示例， TOC \o 1-5 \h \z ), tooltip: {卜 legend: { data: [,销量] }, xAxis: { data:[“衬衫”「羊毛衫”「雪纺衫裤子”，“高跟鞋”，袜子“] }， yAxis: {}, series: [{ name: ?销量 type: bar, TOC \o 1-5 \h \z data: [5, 2Q, 36, 10, 10, 20] }] ) //第四步：指定配置项和数据 var option = {title: { text: *ECharts 入门示例, }, tooltip: {), legend: { data:1销量? }, xAxis: { data:「衬衫羊毛衫雪纺衫裤子高跟鞋“，”袜子”] }, yAxis: {}, series: [{ name:1 销量,， type: bar, data: [5, 20, 36,10,10, 20] }] ) 5.将配置项option设置给echarts实例对象-＞让echarts对象根据修改后的配置生效 //第五步:耨配置项设置给echarts实例对象一〉让charts对象根娓修改后的况置t myChart.setOption(option) myChart.setOption(option) //第五步：将配置项设置给echarts实例对象-＞让echarts对象根据修改后的配置生效 myChart.setOption(option) 效果图展示： 综上已经基本介绍了 ECharts数据可视化库的使用方法和步骤，而这其中的第1、2、3、5 步基本都是差不多不需要修改的，不同的项目所需要的不同图形和数据基本都是在