大数据应用实践--大数据可视化1

最新推荐文章于 2024-09-15 01:19:00 发布

发疯的熏熏

最新推荐文章于 2024-09-15 01:19:00 发布

阅读量945

点赞数 18

分类专栏：大数据可视化文章标签：大数据

本文链接：https://blog.csdn.net/m0_58837398/article/details/135221293

版权

大数据可视化专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、实践内容

在本次课程中，主要介绍了本次课程的大概流程以及对于柱状图的使用

1、课程构成--大数据可视化和大数据开发Hadoop；

2、技术补充--大数据可视化用到了网页技术（HTML/CSS/JavaScript），把数据直观的表现成一个界面，可以使人们更好的观看和理解；使用HBuilderX(VS Code、WebStorm)；运行浏览器推荐使用：Chrome；

3、大数据可视化中用到的前端技术--（1）HTML要点--HTML网页结构<html>开始</html>网页的结束-HTML网页编码<meta charset="utf-8" />-HTML网页标题<title></title>-DIV:是网页上的一个区域，用于做网页布局，要和CSS配合实现布局。整个网页是由多个DIV构成；（2）CSS要点（CSS是用来美化网页的）--CSS叫层叠式样式表，属于Web前端技术； -选择器：大数据可视化中使用id选择器；-我们使用行内样式，就是标记中写style属性；（3）.JavaScript技术（绝对重点）

-从事Web前端开发，从事Java开发以及大数据可视化，JS是必须的；

-JavaScript介绍

（1）JS叫做脚本语言，在浏览器上执行（客户机上执行）

（2）是一个国际标准，浏览器都支持JS，但是不同浏览器支持的程度不一样，要做浏览器兼容性测试

（Chrome、Firefox、Opera、Safari、360、Edge等）

（3）JavaScript和Java没有关系，只是名字特殊

（4）在大数据可视化中用的JS技术点：DOM操作、JSON、JS函数

4、数据可视化图-柱状图--使用ECharts实现可视化；ECharts是百度公司发明的，全球都在用，目前是Apache软件组织的孵化项目，开源的；Echarts时基于JS技术做的，完美与网页结合；官方网址：echarts.apache.org，看实例、看使用文档；ECHarts使用：从官网下载echart.js；

5、项目中常用图--柱状图、饼图、折线图、根据项目需求，进行选择合适的图；

2019级计算机工程系专业人数代码：

 <!DOCTYPE html>
<html>
	<head>
		<!-- charset指定网页编码为utf-8,防止网页上汉字乱码 -->
		<meta charset="utf-8" />
		<title>大数据实践-数据可视化--柱状图</title>
		<script src="js/echarts.js"></script>
	</head>
	<body>
		<div id="mychart" style="width: 600px;height: 400px;"></div>
		<script>
			//在这里写可视化JS代码
			var mychart = echarts.init(document.getElementById("mychart"));
			//option包含的是图形参数；是JSON格式
			var option = {
				title:{
					text:'2019级计算机工程系专业人数'
				},
				xAxis:{
					data:["计科","网工","软工","数媒"]
				},
				yAxis:{},
				series:[{
					name:'学生人数',
					type:'bar',
					data:[136,82,135,91]
				}]
			};
			mychart.setOption(option);
		</script>
	</body>
</html>

2019级计算机工程系专业人数柱状结果图：

二、总结

心得体会：本次实验中，要知道echarts必须是在js目录下面，var mychart = echarts这里和导入的echarts.js的echarts要一样，否则不可以使用，对于对象使用{}，对于数据使用[],xAxis:里面设置专业，yAxis即使里面什么也没有也需要写在那里，否则会出错，图就出不来了，type:“bar”，这里是柱状图类型。