大数据可视化大屏实战项目（69）科技有限公司-生产数据中心—HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中🐕🐕🐕）

一，项目概览

☞☞☞☞☞☞项目演示链接：index

☞☞☞☞☞☞项目演示链接：index

image-20230909015956380

二，运行视频

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

三，部分代码讲解

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script src="js/swiper.min.js"></script>
 <link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="head clearfix">
		<div class="home"><a href="#"><img src="images/Home.png" width="28"> <i> 首页</i></a></div>
	<div class="menu menu1 pulll_left">
		<ul>
			<li><a href="#">功能菜单一 </a></li>
			<li><a href="#">功能菜单二</a></li>

		</ul>
		</div>
	<h1 class="pulll_left">某某科技有限公司-生产数据中心</h1>
		<div class="menu menu2 pulll_left">
		<ul>
			<li><a href="#">功能菜单一 </a></li>
			<li><a href="#">功能菜单二</a></li>
		</ul>
		</div>
		
		<div class="time" id="showTime">2018/6/12 17:00:12</div>
		<script>
var t = null;
    t = setTimeout(time,1000);//開始运行
    function time()
    {
       clearTimeout(t);//清除定时器
       dt = new Date();
		var y=dt.getFullYear();
		var mt=dt.getMonth()+1;
		var day=dt.getDate();
       var h=dt.getHours();//获取时
       var m=dt.getMinutes();//获取分
       var s=dt.getSeconds();//获取秒
       document.getElementById("showTime").innerHTML = y+"/"+mt+"/"+day+" "+h+":"+m+":"+s+"";
       t = setTimeout(time,1000); //设定定时器，循环运行     
    } 

</script>
	</div>
	<div class="mainbox">
	
	<ul class="clearfix nav1">
		<li style="width: 25%">
		<div class="box">
			<div class="tit">标题样式</div>
			<div class="boxnav" id="echart1" style="height: 180px;">

			</div>
			</div>
			<div class="box">
			<div class="tit">标题样式</div>
			<div class="boxnav" style="height: 180px;" id="echart21">
			</div>
			</div>
			
			<div class="box">
			<div class="tit">标题样式</div>
			<div class="boxnav" id="echart3" style="height: 240px;">
				
			</div>
			</div>
		</li>
		<li style="width: 50%">
		
		<div class="box">
			<div class="boxnav mapc" style="height: 500px; position: relative; padding: 0">
				
				
				

  <!-- Swiper -->

  <div class="swiper-container gallery-top">
	<div class="mapnav">
				<ul>
					<li><div><span>全部负荷</span><p>358</p></div></li>
					<li><div><span>火电负荷</span><p>913452</p></div></li>
					<li><div><span>风电负荷</span><p>19532</p></div></li>
					<li><div><span>供热负荷</span><p>521711</p></div></li>
					</ul>
					
				</div>
    <div class="swiper-wrapper">
		<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
		<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
		<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
		<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
		<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
		<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
      
   
		
    </div>

    <!-- Add Arrows -->

    <div class="swiper-button-next swiper-button-white"></div>

    <div class="swiper-button-prev swiper-button-white"></div>

  </div>

  <div class="swiper-container gallery-thumbs">

    <div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>
<div class="swiper-slide" style="background-image:url(images/1.jpg)"></div>

    </div>

  </div>
 <script>
var galleryThumbs = new Swiper('.gallery-thumbs', {
	spaceBetween: 0,
	slidesPerView: 5,
	freeMode: true,
	watchSlidesVisibility: true,
	watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
	spaceBetween: 10,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	thumbs: {
		swiper: galleryThumbs
	}
});
  </script>		
			</div>
			</div>
		<ul class="nav1">
			<li style="width: 50%">
			<div class="box">
			<div class="tit">标题样式</div>
			<div class="boxnav" id="echart4" style="height: 200px;">
				
			</div>
			</div>
			</li>
			<li style="width: 50%">
			
			<div class="box">
			<div class="tit">标题样式</div>
			<div class="boxnav"  id="echart5" style="height: 200px;">
				
			</div>
			</div></li>
			</ul>
			
		</li>
		<li style="width: 25%">
		<div class="box">
			
			<div class="boxnav"  style="height: 76px;">
			<div class="weather">
				<div class="">
				<div class="wt1">
					<div class="wt2"><img src="images/weather.png"><p>29<sup>℃</sup></p></div>
					<span>多云转晴</span>
					</div>
					
				</div>
				<div class="wt03">
				<p><span>气温：</span>20 ~ 32℃</p>
				<p><span>降水量：</span>32毫米</p>
				<p><span>风况：</span>西北风微风</p>
				</div>
				</div>
			</div>
			</div>
		<div class="box">
			<div class="tit">标题样式</div>
			<div class="boxnav" id="echart6" style="height: 170px;"></div>
			</div>
			
			<div class="box">
			<div class="tit">标题样式</div>
			<div class="boxnav" style="height: 170px;" id="echart7"></div>
			</div>
		<div class="box">
			<div class="tit">标题样式</div>
			<div class="boxnav" style="height: 170px;">
			<ul class="gnlb">
				<li><span>月平均小时：<em>119351</em></span></li>
				<li><span>月平均小时：<em>119351</em></span></li>
				<li><span>月平均小时：<em>119351</em></span></li>
				<li><span>月平均小时：<em>119351</em></span></li>
				<li><span>月平均小时：<em>119351</em></span></li>
				<li><span>月平均小时：<em>119351</em></span></li>
				</ul>
			
			</div>
			</div>
		</li>
		</ul>
		
		
		
		
	</div>
</body>
</html>

这是一个HTML网页模板，用于创建一个网页，包含了一些JavaScript图表（使用ECharts库）以及Swiper图像轮播。以下是该网页模板的主要结构和内容：

  1. HTML 结构：包括了标准的文档声明、<html>、<head>和<body>标签。

  2. 字符集和标题：通过<meta>标签设置字符集和指定网页标题。

  3. 外部资源引用：引入了多个外部 JavaScript 文件和 CSS 文件，包括 jQuery、ECharts、Swiper 库等，用于实现网页的交互和样式。

  4. 网页头部：在头部包含了公司名称、首页链接、功能菜单等内容，并且使用了一段 JavaScript 代码来实现显示当前时间的功能。

  5. 主要内容区域：通过.mainbox类来定义了主要内容区域，包含了一系列的图表和模块。

  6. 图表模块：使用<div>元素和不同的 ID 来创建多个图表容器，每个图表容器都有一个标题样式。

  7. Swiper 图像轮播：使用 Swiper 库实现的图像轮播，包括了轮播图像的展示和缩略图导航。

  8. 天气信息：包含了一个用于显示天气信息的模块，显示当前天气温度、天气状况、气温、降水量和风况等。

  9. 图表容器：每个图表容器都使用不同的 ID 来唯一标识，并设置了高度，以便在其中显示图表。

  10. JavaScript 代码：通过<script>标签引入了一段 JavaScript 代码，用于处理当前时间的显示。

  11. Swiper 初始化代码：在页面底部使用 JavaScript 代码初始化了 Swiper 图像轮播效果，包括主图和缩略图的联动。

这个模板可以用于创建一个包含多个图表和图像轮播的数据展示页面。根据具体需求，你可以替换示例中的图表数据、图像和样式来自定义网页内容。同时，确保所有引用的外部资源文件（如 JavaScript 和 CSS 文件）都位于正确的路径下，以确保网页正常加载和运行。这是一个HTML网页模板，用于创建一个网页，包含了一些JavaScript图表（使用ECharts库）以及Swiper图像轮播。以下是该网页模板的主要结构和内容：

  1. HTML 结构：包括了标准的文档声明、<html>、<head>和<body>标签。

  2. 字符集和标题：通过<meta>标签设置字符集和指定网页标题。

  3. 外部资源引用：引入了多个外部 JavaScript 文件和 CSS 文件，包括 jQuery、ECharts、Swiper 库等，用于实现网页的交互和样式。

  4. 网页头部：在头部包含了公司名称、首页链接、功能菜单等内容，并且使用了一段 JavaScript 代码来实现显示当前时间的功能。

  5. 主要内容区域：通过.mainbox类来定义了主要内容区域，包含了一系列的图表和模块。

  6. 图表模块：使用<div>元素和不同的 ID 来创建多个图表容器，每个图表容器都有一个标题样式。

  7. Swiper 图像轮播：使用 Swiper 库实现的图像轮播，包括了轮播图像的展示和缩略图导航。

  8. 天气信息：包含了一个用于显示天气信息的模块，显示当前天气温度、天气状况、气温、降水量和风况等。

  9. 图表容器：每个图表容器都使用不同的 ID 来唯一标识，并设置了高度，以便在其中显示图表。

  10. JavaScript 代码：通过<script>标签引入了一段 JavaScript 代码，用于处理当前时间的显示。

  11. Swiper 初始化代码：在页面底部使用 JavaScript 代码初始化了 Swiper 图像轮播效果，包括主图和缩略图的联动。

这个模板可以用于创建一个包含多个图表和图像轮播的数据展示页面。根据具体需求，你可以替换示例中的图表数据、图像和样式来自定义网页内容。同时，确保所有引用的外部资源文件（如 JavaScript 和 CSS 文件）都位于正确的路径下，以确保网页正常加载和运行。

可视化图表的使用技巧

1、柱状图

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

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

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

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

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

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

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

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

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

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

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

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

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

四，源码

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

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

请私信作者（v）15135757306

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

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

# 信息可视化 # 科技 # html # css # javascript # 前端
Logo
永洪数据分析社区

永洪科技，致力于打造全球领先的数据技术厂商，具备从数据应用方案咨询、BI、AIGC智能分析、数字孪生、数据资产、数据治理、数据实施的端到端大数据价值服务能力。

更多推荐

cover

基于Java+Vue的企业移动培训考学系统：为企业数字化培训降本增效（整套代码）

avatar 永洪数据分析社区
cover

大数据毕业设计hadoop+spark+hive知识图谱医生推荐系统 医生数据分析可视化大屏 医生爬虫 医疗可视化 医生大数据 机器学习 大数据毕业设计 计算机毕业设计

avatar 永洪数据分析社区
cover

CRM系统如何帮助企业数字化转型？分为几个阶段？

avatar 永洪数据分析社区