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

最新国家开放大学电大《大数据技术导论》实验报告

实验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这个插件的基本使用步骤。

EChartsjs是百度出品的一个开源javascript数据可视化库，是目前国内最常用、最热门的一个基于javaScript的数据可视化插件。

下面是EChartsjs的网址：

ECharts官网地址：htps///Zh/index.html/

ApacheECharts:/zh/index.html

下面简答介绍一下EChatsjs库的基本使用步骤-五步曲

ECharts使用五步曲：

!--第一步：先引入echarts.js文件--

!--第一步：先引入echarts.js文件--

scriptsrc=js/echarts.min.js/script

1.下载并引入echarts.js文件图表依赖这个js库

只需下载一个：echarts.minjs引入即可

2.准备一个具备大小的DOM容器-生成的图表会放入此容器中

st

st

*第二步：创建一不具备大小的盒子容器*

/*diyclass=box/diy*/

.box{

width:400px

height:400px;

background-color:pink

https://q3.初始化echarts实例对象实例化echarts对象

varmyChart=echats.init(容器对象)

1//第三步：初始化/实例化echarts对象

2varmyChart=echarts.init(document.querySelector(.box));

1/第三步：初始化/实例化echarts对象

varmyChart=echarts.init(document.querySelector(.box));

4.指定配置项和数据(option)根据具体需求修改配置选项

varoption={配置项数据}

1//第四步：指定配置项和数据

2varoption={

stitle:{

4text:ECharts入门示例

5},

6tooltip:{},

7legend:{

8data:[销量]9;,

10xAxis:{

11data:[衬衫,羊毛衫,雪纺衫,裤子,高跟鞋,袜子]

12},

13yAxis:{},

14series:[{

15name:‘销量,

16type:bar,

17data:[5,20,36,10,10,20]

18}]

19;

//第四步：指定配置项和数据

varoption={

title:{

text:ECharts入门示例

},

tooltip:?,

legend:{

dna{销量]

},

xAxis:{

data:[衬衫,羊毛衫,雪纺衫,裤子,高跟鞋,袜子]

},

yAxis:{},

series:[{

name:销量,

type:bar,

data:[5,20,36,10,10,20]

}]

5.将配置项option设置给echarts实例对象-i让echarts对象根据修改后的配置生效

1//第五步：将配置项设置给charts实例对象-iecharts对象桓据修改后的配置

2myChart.setoption(option)

myChart.setOption(option)

//第五步：将配置项设置给echarts实例对象让echarts对象根据修改后的配置生效

myChart.setOption(option)

效果图展示：

综上已经基本介绍了ECharts数据