大数据可视化大屏实战项目（9）建筑工地管控系统【移动端自适应可可视化系统（注：为数不多的适应于PC端和安卓端的大数据可视化）】—HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中🐕🐕🐕）
一，项目概览
☞☞☞☞☞☞项目演示链接：http://59.110.22.223:8080/Data/9/
☞☞☞☞☞☞项目演示链接：http://59.110.22.223:8080/Data/9/
移动端也适配！！！
二，运行视频
☞☞☞☞☞☞B站演示视频：https://www.bilibili.com/video/BV1br4y197tM/
三，部分代码讲解
@charset "utf-8";
/********** Global **********/
html, body {
width:100%;
height:100%;
min-height:635px;
background-color:#0f1c30;
background-repeat:no-repeat;
background-position:center;
background-size:100% 100%;
overflow-x:hidden;
overflow-y:auto;
}
body {margin:0 auto;min-width:375px;max-width:1920px;}
body.bg01 {background-image:url("../img/bg01.png");}
body.bg02 {background-image:url("../img/bg02.png");}
body.bg03 {background-image:url("../img/bg03.png");}
body.bg04 {background-image:url("../img/bg04.png");}
.header {margin:0 auto;position:relative;width:100%;
height:65px;max-width:1920px;
background:url("../img/header.png") center no-repeat;box-sizing:border-box;}
.header-title {
margin:0;
padding:0;
line-height:50px;
text-align:center;
font-size:22px;
color:#5dc2fe;
}
.wrapper {position:absolute;top:68px;bottom:0;left:0;right:0;min-height:555px;}
/* PC */
@media (max-width:1919px) {
.header {height:65px;}
.header-title {line-height:50px;font-size:22px;}
.wrapper {top:68px;}
}
/* Mobile */
@media (max-width:1279px) {
.header-title {max-width:96%;}
.wrapper {background:none;}
}
/********** Content **********/
.content {
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
height:100%;
width:100%;
min-height:100%;
box-sizing:border-box;
}
.col {margin:0px 5px 0px;;height:100%;min-width:320px;}
.col-l {-webkit-flex:1.5;-ms-flex:1.5;flex:1.5;}
.col-c {-webkit-flex:4;-ms-flex:4;flex:4;}
.col-r {-webkit-flex:1.5;-ms-flex:1.5;flex:1.5;}
/* PC */
@media (max-width:1919px) {
.content {padding:10px 0;}
}
/* Mobile */
@media (max-width:1279px) {
.content {padding:10px 0;}
.content {
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
}
.col-l,
.col-c,
.col-r {-webkit-flex:none;-ms-flex:none;flex:none;}
}
.xpanel-wrapper {padding-bottom:5px;box-sizing:border-box;}
.xpanel-wrapper {height:100%;width:100%}
.xpanel-wrapper-25 {height:27.5%;}
.xpanel-wrapper-30 {height:30%;}
.xpanel-wrapper-40 {height:40%;}
.xpanel-wrapper-45 {height:45%;}
.xpanel-wrapper-60 {height:60%;}
.xpanel-wrapper-75 {height:60%;}
.xpanel-wrapper-55 {height:55%;}
.xpanel {
height:100%;
min-height:100px;
background-repeat:no-repeat;
background-size:100% 100%;
box-sizing:border-box;
}
.xpanel-m-c {background-image:url("../img/panel.png");}
.xpanel-l-t {background-image:url("../img/panel.png");}
.xpanel-l-b {background-image:url("../img/panel.png");}
.xpanel-c-b {background-image:url("../img/panel.png");}
.xpanel-r-t {background-image:url("../img/panel.png");}
.xpanel-r-m {background-image:url("../img/panel.png");}
.xpanel-r-b {background-image:url("../img/panel.png");}
.xpanel .title {
font-weight:normal;
color:#fff;
background-image:url("../img/title-bg.png");
background-repeat:no-repeat;
background-size:100% 100%;
}
.xpanel .bcontent {
line-height:1;
font-size:15px;
text-align:left;
height:95%;
width:98%;
color:#5dc2fe;
}
.xpanel .tcontent {
line-height:1;
font-size:15px;
text-align:left;
height:90%;
width:98%;
color:#5dc2fe;
}
.xpanel .no-bg {
margin:15px;
}
.xpanel .bcontent ul,li{list-style:none;padding:0; margin:1px;}
.xpanel .bcontent ul {
margin-top:10px;
clear: both;
overflow: hidden;
height:98%;
}
.xpanel .bcontent ul li {
height: 20px;
margin-bottom: 5px;
float: left;
font-size:12px;
}
.xpanel .bcontent ul li:nth-child(even) {
margin-left: 4%;
}
.leftrt{
width: 32%;
text-align:right;
color: #f1ebe5;
font-weight: bold;
}
.rightrt{
width: 63%;
font-weight: bold;
color: #f1ebe5;
}
.xpanel .title-long { padding-left:24px;background-image:url("../img/title-bg-long.png");}
/* PC */
@media (max-width:1919px) {
.xpanel .title {padding-left:20px;height:36px;line-height:36px;font-size:16px;}
.xpanel .bcontent{padding:5px 10px;}
}
/* tool */
.fill-h {height:100% !important;min-height:100% !important;}
.no-margin {margin:0 !important;}
.no-padding {padding:0 !important;}
.no-bg {background:none !important;}
.no-border {border:0 !important;}
/* scrollbar */
::-webkit-scrollbar {width:0;height:0;}
::-webkit-scrollbar-track {background-color:transparent;}
::-webkit-scrollbar-thumb {border-radius:5px;background-color:rgba(0, 0, 0, 0.3);}
这段代码是一段CSS代码，用于定义网页的样式。我将它分成几个部分来解释：
-
全局样式（Global）：
- 设置全局样式，包括背景颜色、背景图片、文本颜色等。
@charset "utf-8";声明字符集为UTF-8，以支持Unicode字符。- 设置网页的背景，包括背景颜色和背景图片，根据不同的类名来切换不同的背景图片。
- 定义网页的最小宽度和最大宽度，以确保网页在不同屏幕尺寸下都能正常显示。
-
头部样式（Header）：
- 定义头部的样式，包括高度、背景图片等。
.header-title类定义头部标题的样式，包括文本颜色、字体大小等。
-
内容样式（Content）：
- 定义内容区域的样式，包括布局、内边距等。
- 使用Flex布局来组织内容，分为左侧、中间和右侧三个列。
- 根据屏幕宽度的不同，响应式地调整布局。
.xpanel类定义一个面板的样式，包括背景图片、标题样式等。.bcontent和.tcontent类定义面板中的底部和顶部内容样式，包括文本颜色、字体大小等。.no-bg类用于消除背景样式。.leftrt和.rightrt类定义左右两列的样式。
-
工具样式（Tool）：
- 一些通用的工具样式，如清除边距、背景等。
.fill-h类用于填充高度，.no-margin和.no-padding类用于消除边距和内边距。.no-bg和.no-border类用于消除背景和边框样式。
-
滚动条样式（Scrollbar）：
- 定义滚动条的样式，包括宽度、颜色等。
这段代码主要是用于定义网页的外观和布局样式，通过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/1lfMZr04aJvf1n10hNCHGmw
提取码：
创作不易，项目已加密，有偿（—9.9r—，可修改页面，做实验报告，代码讲解，待上服务器等…）
请私信作者（v）15135757306
注：非白嫖仅为维护服务器，若想白嫖请CSDN私信我（大概率可能时间忙顾不上回复）
若侵权请私信作者下架博客
1450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
