大数据可视化大屏实战项目（28）大数据统计展示大屏---HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中）

最新推荐文章于 2024-03-23 10:51:30 发布

VitalityBlend

最新推荐文章于 2024-03-23 10:51:30 发布

阅读量1.1k

点赞数 1

分类专栏：大数据可视化项目（75套源码）文章标签：信息可视化大数据 html

本文链接：https://blog.csdn.net/m0_63324772/article/details/132708716

版权

大数据可视化项目（75套源码）专栏收录该内容

75 篇文章 13 订阅

订阅专栏

大数据可视化大屏实战项目（28）大数据统计展示大屏—HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中🐕🐕🐕）

一，项目概览

☞☞☞☞☞☞项目演示链接：59.110.22.223:8080/Data/28/

二，运行视频

☞☞☞☞☞☞B站演示视频：

三，部分代码讲解

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">


		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="js/jquery.min.js"></script>
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="js/bootstrap.min.js"></script>
		<link href="css/index.css" rel="stylesheet" />
	</head>
	<body>
		<header>大数据统计展示大屏</header>
		<div class="container m-20">
			<div class="row">
				<div class="col-lg-3">
					<div class="box1">
						<div class="title">标题标题</div>
						<div class="box1_con" id="box1"></div>
					</div>
					<div class="box2 m-20">
						<div class="title">标题标题</div>
						<div class="box2_con" id="box2"></div>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="box3">
						<div class="title">标题标题</div>
						<div class="box3_con">
							<div class="box3_con_left" id="box3_left"></div>
							<div class="box3_con_right">
								<div class="box3_con_right_top">
									<div class="row">
										<div class="col-lg-4 data_bg"><p>12569台</p><small>设备总数</small></div>
										<div class="col-lg-4 data_bg"><p>12375台</p><small>运行设备</small></div>
										<div class="col-lg-4 data_bg"><p>178台</p><small>月修设备</small></div>
									</div>
								</div>
								<div class="box3_con_right_bot" id="box3_right"></div>
							</div>
						</div>
					</div>
					<div class="box4 m-20">
						<div class="title">标题标题</div>
						<div class="box4_con" id="box4"></div>
					</div>
				</div>
				<div class="col-lg-3 box5">
					<div class="title">标题标题</div>
					<div class="box5_con">
						<div class="box5_con_top" id="box5"></div>
						<div class="title m-20">标题标题</div>
						<div class="box5_con_bot">
							<ul>
								<li>1、列表类信息标题测试列表类信息标题测试列表类信息标题测试</li>
								<li>2、列表类信息标题测试列表类信息标题测试列表闻标题测试</li>
								<li>3、列表类信息标题测试列表类信息标题测试信息标题测试</li>
								<li>4、列表类信息标题测试标题测试列表类信息标题测试</li>
								<li>5、列表类信息标题测试列表类信息标题测列表类信息标题测试</li>
								<li>6、列表类信息标题测试列表类信息标题测试列表测试</li>
								<li>7、列表类信息标题测试列表类信息标题测试列表类信息标题测试</li>
								<li>8、列表类信息标题测试列表类信息标题测试列表类标题测试</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script type="text/javascript" src="js/box1.js"></script>
		<script type="text/javascript" src="js/box2.js"></script>
		<script type="text/javascript" src="js/box3_left.js"></script>
		<script type="text/javascript" src="js/box3_right.js"></script>
		<script type="text/javascript" src="js/box4.js"></script>
		<script type="text/javascript" src="js/box5.js"></script>
	</body>
</html>

这段代码是一个简单的HTML页面，用于创建一个大数据统计展示大屏。下面是对代码的详细分析：

<!DOCTYPE html>：这是文档类型声明，指定了文档的HTML版本。
<html>：HTML文档的根元素。
<head>：包含了文档的头部信息，包括字符编码设置、引用的外部样式和脚本文件等。
- <meta charset="utf-8">：指定文档的字符编码为UTF-8，以支持各种字符集，包括中文。
- 引用了 Bootstrap 样式框架的 CSS 文件和 jQuery JavaScript 库，用于页面的样式和交互功能。
- <link href="css/index.css" rel="stylesheet" />：引用了自定义的CSS文件"index.css"，用于自定义页面的样式。
<body>：HTML文档的主体内容，包括页面的结构和显示的数据。
- <header>：定义了页面的标题，显示为"大数据统计展示大屏"。
- <div class="container m-20">：创建了一个带有样式类的容器，用于包裹页面的内容。
  - <div class="row">：创建了一个行，用于将内容分为多列。
    - <div class="col-lg-3">：创建了一个占据3个列宽的列。
      - 在这个列中，包含了多个具有不同样式和内容的<div>元素，每个<div>元素代表一个数据模块。
      - 每个数据模块都包括标题和内容，以及一个具有唯一ID的<div>元素，用于将图表或数据展示插入其中。
      - 模块之间使用了Bootstrap的栅格系统来布局，实现了响应式设计。
    - <div class="col-lg-6">：创建了一个占据6个列宽的列，其中包含了两个数据模块，类似于上述的结构。
    - <div class="col-lg-3 box5">：创建了一个占据3个列宽的列，用于包含第五个数据模块。
      - 这个模块包括标题、一个图表和一个包含列表的<ul>元素。
- 在文档底部，引用了多个JavaScript文件，包括ECharts图表库和各个数据模块的JavaScript文件。这些文件用于实现数据的动态展示和交互功能。

总结：这段HTML代码构建了一个简单的大数据统计展示页面，使用了Bootstrap框架来实现响应式布局，并引用了ECharts库和自定义JavaScript文件来展示数据。页面包括多个数据模块，每个模块都包含标题、图表或数据以及样式定义，以呈现不同类型的数据。用户可以在浏览器中打开此页面，查看大数据统计信息。

可视化图表的使用技巧

1、柱状图

柱状图中的颜色尽量不要超过3种。
柱状图柱子间的宽度和间隙要是适当。住在太窄，用户的视觉可能会集中在两个柱子之间的负空间
对多个数据系列排序时，最好复合一定的逻辑，用直观的方式引导用户更好的查看数据，此时可以通过升序和降序排列。
2、折线图

折线图连接各点可以使用直线和曲线，这样更美观，数据展示更加清晰
折线的颜色要清晰，尽量不要使用与背景色和坐标轴相近的颜色
折线图中的线条尽量不要超过4条，过多的线条会导致界面混乱，无法阅读。
3、饼图

饼图适合用来展示单一维度数据的占比，要求其数值没有零或者负值，并确保各个分块占比总和为100%。
饼图不适合用于精确数据的比较，因此当各类别数据占比相似时，很难分辨出哪个类别占比比较大。
大多数人的视觉习惯是按照顺时针自上而下的顺序去观察，因此在绘制饼图时建议从12点钟开始沿着顺时针右边的第一个分块绘制饼图最大的数据分块，这样可以有效地强调其重要性
4、散点图

如果一个散点图没有显示变量的任何关系，那么或许该图表类型不是次数据的最佳选择
散点图只有在足够多的数据点并且数据间有相关性时，才能呈现很好的结果。
如果数据包含不同系列，可以给不同系列使用不同的颜色

数据功能图介绍
在大数据的可视化图中，按照数据的作用和功能可以把图分为比较类图、分布类图、流程类图、地图类图、占比类图、区间类图、关联类图、时间类图和趋势类图等。
1、比较类图
比较类图可视化的方法通常是显示值与值之间的不同和相似之处，使用图形的长度、宽度、位置、面积、角度和颜色来比较数值的大小，通常用于展示不同分类间的数值对比一级不同时间点的数据对比。常见的比较类图主要有柱状图、双向柱状图、气泡图、子弹图、色块图、漏斗图和直方图等

2、分布类图
分布类图可视化的方法通常是显示频率，将数据分散在一个区间或分组，并使用图形的为、大小、颜色的渐变程度类表现数据的分布。分布类图通常用于展示连续数据上数值的分布情况。常见的分布类图主要有箱型图、热力图、散点图、分布曲线图、色块图和直方图

3、流程类图
流程类图可视化的方法通常是显示流程流转和流程流量。一般流程都会呈现出多个环节，每个环节之间会有相应的流量关系，因此这类图形可以很好的表示这些流量关系。常见的流程图主要有漏斗图和桑基图

4、地图类图
地图类图可视化的方法是显示地理区域上的数据，并在显示是使用地图作为背景，通过图形的位置来表现数据的地理位置。地图类图通常用来展示数据在不同地理区域上的分布情况。常见的地图类图主要有待气泡的地图和统计地图

5、占比类图
占比类图可视化的范式是显示同一维度上的占比关系。常见的占比类图主要有换图、马赛克图、堆叠面积图、堆叠柱状图和矩形树图

6、区间类图
区间类图可视化的方法是显示同一维度上值的上限和下限之间的差异。区间类图使用图形的大小和位置表示数值的上限和下限，通常用于表示数据在某一分类（时间点）上的最大值和最小值。常见的区间类图主要有仪表盘图和堆叠面积图

7、关联类图
关联类图可视化的方法显示数据之间的相互关系。关联类图使用图形的嵌套和位置表示数据之间的关系，通常用于表示数据之间的前后顺序、父子关系和相关性。常见的关联类图主要有和弦图、桑基图、矩阵树图、树状图和韦恩图

8、时间类图
时间类图可视化的方法显示以时间为特定维度的数据。时间类图使用图形的位置表现出数据在时间深的房补，通常用于表现数据在时间维度上的趋势和变化。常见的实践类图主要有面截图、K线图、卡吉图和螺旋图

9、趋势类图
趋势类图可视化的方式分析数据的变化趋势，趋势类图使用图形的位置表现出数据在连续区域上的分布，通常展示数据在连续区域上的大小变化的规律。常见的趋势类图主要有面积图、K线图、折线图和回归曲线图

四，源码

链接：https://pan.baidu.com/s/1zkijI-YdO_Mxb3ZekPLZXA?pwd=nljy
提取码：nljy

创作不易，项目已加密，有偿（—2.9r—，可修改页面，做实验报告，代码讲解，待上服务器等…）

请私信作者（v）15135757306

注：非白嫖仅为维护服务器，若想白嫖请CSDN私信我（大概率可能时间忙顾不上回复）

若侵权请私信作者下架博客

VitalityBlend

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
大数据可视化大屏实战项目（28）大数据统计展示大屏---HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中）

大数据可视化大屏实战项目（28）大数据统计展示大屏---HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中🐕🐕🐕）
复制链接

扫一扫