Document

大数据可视化大屏实战项目（33）智慧小区大数据分析---HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中）

2023-09-07
dfer
366
信息可视化数据分析 html CSDN

大数据可视化大屏实战项目（33）智慧小区大数据分析—HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中🐕🐕🐕）

一，项目概览

☞☞☞☞☞☞项目演示链接：http://59.110.22.223:8080/Data/33/#

二，运行视频

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

三，部分代码讲解

<!doctype html>
<meta charset="utf-8">
<title>警情警力分析</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery-3.2.0.min.js" charset="utf-8" type="text/javascript"></script>
<script src="js/echarts.min.js" charset="utf-8" type="text/javascript"></script>
<script src="js/utils.js" charset="utf-8" type="text/javascript"></script>

<body>
    <div class="wpbox">
        <div class="bnt">
            <div class="topbnt_left fl">
                <ul>
                    <!-- <li class="active"><a href="#">警情警力</a></li> -->
                    <li><a href="#">智慧物业</a></li>
                    <li><a href="#">智慧停车</a></li>
                    <li><a href="#">智慧门禁</a></li>
                </ul>
            </div>
            <h1 class="tith1 fl">智慧小区大数据分析</h1>
            <div class=" fr topbnt_right">
                <ul>
                    <li><a href="#">智慧安防</a></li>
                    <li><a href="#">社区电商</a></li>
                    <li class="active"><a href="#">数据分析</a></li>
                </ul>
                </ul>
            </div>
        </div>
        <!-- bnt end -->
        <div class="left1">
            <div class="aleftboxttop">
                <h2 class="tith2">设备报修及投诉建议</h2>
                <div class="lefttoday_tit" style=" height:8%">
                    <p class="fl">地区：银滩花园</p>
                    <p class="fr">时间段：2020-06月</p>
                </div>
                <div class="lefttoday_number">
                    <div class="widget-inline-box text-center fl">
                        <p>总报修数</p>
                        <h3 class="ceeb1fd">54</h3>
                        <h4 class="text-muted pt6">环比<img src="img/iconup.png" height="16" />2%</h4>
                    </div>
                    <div class="widget-inline-box text-center fl">
                        <p>已处理</p>
                        <h3 class="c24c9ff">54</h3>
                        <h4 class="text-muted pt6">环比<img src="img/icondown.png" height="16" />3%</h4>
                    </div>
                    <div class="widget-inline-box text-center fl">
                        <p>处理中</p>
                        <h3 class="cffff00">4</h3>
                        <h4 class="text-muted pt6">环比<img src="img/icondown.png" height="16" />3%</h4>
                    </div>
                    <div class="widget-inline-box text-center fl">
                        <p>逾期</p>
                        <h3 class="c11e2dd">4</h3>
                        <h4 class="text-muted pt6">环比<img src="img/icondown.png" height="16" />3%</h4>
                    </div>
                </div>
                <!-- lefttoday_number end -->
            </div>
            <div class="aleftboxtmidd">
                <h2 class="tith2">安防设备</h2>
                <div class="lefttoday_tit height ht">
                    <p class="fl">地区：银滩花园</p>
                    <p class="fr">时间段：2020-06月</p>
                </div>
                <div id="aleftboxtmidd" class="aleftboxtmiddcont"></div>
            </div>
            <div class="aleftboxtbott">
                <h2 class="tith2">水电费用</h2>
                <div class="lefttoday_tit height">
                    <p class="fl">地区：银滩花园</p>
                    <p class="fr">时间段：2020-06月</p>
                </div>
                <div id="aleftboxtbott" class="aleftboxtbott_cont"></div>
            </div>
        </div>
        <!--  left1 end -->
        <div class="mrbox">
            <div class="mrbox_topmidd" style="width: 69%;">
                <div class="amiddboxttop">
                    <h2 class="tith2 pt1">银滩花园</h2>
                    <div class="amiddboxttop_map" style="">
                        <span class="camera_l" style=" top:34%;left:32%"></span>
                        <span class="camera_l" style=" top:10%;left:10%"></span>
                        <span class="camera_l" style=" top:5%;left:40%"></span>
                        <span class="camera_l" style=" top:10%;left:50%"></span>
                        <span style=" top:30%;left:75%"></span>
                        <span style=" top:5%;left:92%"></span>
                        <span style=" top:40%;left:83%"></span>
                    </div>
                </div>
                <!--  amiddboxttop end-->
                <div class="amidd_bott">
                    <div class="amiddboxtbott1 fl">
                        <h2 class="tith2 pt1">社区电商</h2>
                        <div id="amiddboxtbott1" class="amiddboxtbott1content"></div>
                    </div>

                    <div class="amiddboxtbott2 fl">
                        <h2 class="tith2 pt1">智慧物业</h2>
                        <div id="amiddboxtbott2" class="amiddboxtbott2content"></div>
                    </div>
                </div>
                <!-- amidd_bott end -->
            </div>
            <!-- mrbox_top end -->
            <div class="mrbox_top_right">
                <div class="arightboxtop">
                    <h2 class="tith2">智慧停车</h2>
                    <div class="lefttoday_tit">
                        <p class="fl">地区：银滩花园</p>
                        <p class="fr">时间段：2018-06-10</p>
                    </div>
                    <div class="zhtc_table_title">
                        <div>车牌</div>
                        <!-- 车牌 -->
                        <div>进/出场时间</div>
                        <!-- 进场时间 -->
                        <div>图片</div>
                        <!-- 图片 -->
                        <div>类型</div>
                        <!-- 车辆类型 -->
                    </div>
                    <div id="zhtc_table" class="left2_table">
                        <ul>
                            <li>
                                <p class="fl"><b>银滩花园B区</b>
                                </p>
                                <div class="zhtc_table_li_content">
                                    <div>甘A09B12</div>
                                    <div>2020-06-17 <br/> 17:09:40</div>
                                    <div><img width="80" src="img/carLicensePlate/琼A180Q8.jpg" /></div>
                                    <div>临时车</div>
                                </div>
                            </li>
                            <li class="bg">
                                <p class="fl"><b>银滩花园B区</b>
                                </p>
                                <div class="zhtc_table_li_content">
                                    <div>甘A9T528</div>
                                    <div>2020-06-17 <br/> 17:09:40</div>
                                    <div><img width="80" src="img/carLicensePlate/甘A9T528.jpg" /></div>
                                    <div>临时车</div>
                                </div>
                            </li>
                            <li>
                                <p class="fl"><b>银滩花园B区</b>
                                </p>
                                <div class="zhtc_table_li_content">
                                    <div>甘A17J18</div>
                                    <div>2020-06-17 <br/> 17:09:40</div>
                                    <div><img width="80" src="img/carLicensePlate/甘A17J18.jpg" /></div>
                                    <div>临时车</div>
                                </div>
                            </li>
                            <li class="bg">
                                <p class="fl"><b>银滩花园B区</b>
                                </p>
                                <div class="zhtc_table_li_content">
                                    <div>甘A17J18</div>
                                    <div>2020-06-17 <br/> 17:09:40</div>
                                    <div><img width="80" src="img/carLicensePlate/甘A17J18 (1).jpg" /></div>
                                    <div>临时车</div>
                                </div>
                            </li>
                            <li>
                                <p class="fl"><b>银滩花园B区</b>
                                </p>
                                <div class="zhtc_table_li_content">
                                    <div>甘A17M35</div>
                                    <div>2020-06-17 <br/> 17:09:40</div>
                                    <div><img width="80" src="img/carLicensePlate/甘A17M35.jpg" /></div>
                                    <div>临时车</div>
                                </div>
                            </li>
                            <li class="bg">
                                <p class="fl"><b>银滩花园B区</b>
                                </p>
                                <div class="zhtc_table_li_content">
                                    <div>甘A076A6</div>
                                    <div>2020-06-17 <br/> 17:09:40</div>
                                    <div><img width="80" src="img/carLicensePlate/甘A076A6.jpg" /></div>
                                    <div>临时车</div>
                                </div>
                            </li>
                            <li>
                                <p class="fl"><b>银滩花园B区</b>
                                </p>
                                <div class="zhtc_table_li_content">
                                    <div>甘A76L77</div>
                                    <div>2020-06-17 <br/> 17:09:40</div>
                                    <div><img width="80" src="img/carLicensePlate/甘A76L77.jpg" /></div>
                                    <div>临时车</div>
                                </div>
                            </li>
                            <li class="bg">
                                <p class="fl"><b>银滩花园B区</b>
                                </p>
                                <div class="zhtc_table_li_content">
                                    <div>甘A096R2</div>
                                    <div>2020-06-17 <br/> 17:09:40</div>
                                    <div><img width="80" src="img/carLicensePlate/甘A096R2.jpg" /></div>
                                    <div>临时车</div>
                                </div>
                            </li>
                            <li>
                                <p class="fl"><b>银滩花园B区</b>
                                </p>
                                <div class="zhtc_table_li_content">
                                    <div>甘A497D9</div>
                                    <div>2020-06-17 <br/> 17:09:40</div>
                                    <div><img width="80" src="img/carLicensePlate/甘A497D9.jpg" /></div>
                                    <div>临时车</div>
                                </div>
                            </li>


                        </ul>
                    </div>

                </div>
                <div class="arightboxbott">
                    <h2 class="tith2 ">小区信息</h2>
                    <div class="lefttoday_tit">
                        <p class="fl">地区：银滩花园</p>
                        <p class="fr">时间段：2020-06月</p>
                    </div>
                    <div id="arightboxbott" class="arightboxbottcont"></div>
                </div>
            </div>
            <!-- mrbox_top_right end -->
        </div>

    </div>
    </div>

    <script type="text/javascript" src="js/安防设备.js"></script>

    <script type="text/javascript" src="js/水电费用.js"></script>

    <script type="text/javascript" src="js/社区电商.js"></script>

    <script type="text/javascript" src="js/智慧物业.js"></script>

    <script type="text/javascript" src="js/小区信息.js"></script>

    <script type="text/javascript" src="js/moment.min.js"></script>
    <script type="text/javascript" src="js/智慧停车.js"></script>



</body>

</html>

这段代码是一个HTML页面的代码，用于创建一个网页，其中包括HTML结构、CSS样式和JavaScript脚本。我将逐行解释这段代码的主要部分和功能。

<!doctype html>：这是HTML5的文档类型声明，指示浏览器以HTML5标准来解析页面。
<meta charset="utf-8">：设置文档的字符编码为UTF-8，以支持多语言字符。
<title>警情警力分析</title>：设置网页的标题为"警情警力分析"，这将显示在浏览器的标签页上。
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />：引入外部CSS文件"style.css"，用于定义页面的样式。
<script src="js/jquery-3.2.0.min.js" charset="utf-8" type="text/javascript"></script>：引入jQuery库，用于处理DOM操作和Ajax请求。
<script src="js/echarts.min.js" charset="utf-8" type="text/javascript"></script>：引入ECharts库，用于创建数据可视化图表。
<script src="js/utils.js" charset="utf-8" type="text/javascript"></script>：引入一个名为"utils.js"的自定义JavaScript文件，可能包含一些辅助函数和工具。
<body>：HTML文档的主体部分开始。
<div class="wpbox">：创建一个具有类名"wpbox"的div元素，可能用于页面的布局结构。
<div class="bnt">：创建一个具有类名"bnt"的div元素，可能包含网页的顶部导航栏。
<ul>：创建一个无序列表，其中包含多个导航链接，每个链接用<a>元素表示。
<h1 class="tith1 fl">智慧小区大数据分析</h1>：创建一个标题级别为1的标题，具有类名"tith1"，可能用于页面的主标题。
<div class="fr topbnt_right">：创建一个具有类名"topbnt_right"的div元素，可能包含右侧的导航链接。
<div class="left1">：创建一个具有类名"left1"的div元素，可能用于页面的左侧内容区域。
<div id="aleftboxtmidd" class="aleftboxtmiddcont"></div>：创建一个具有id和类名的div元素，可能用于放置安防设备数据的图表。
<div id="aleftboxtbott" class="aleftboxtbott_cont"></div>：创建一个具有id和类名的div元素，可能用于放置水电费用数据的图表。
<div class="mrbox">：创建一个具有类名"mrbox"的div元素，可能用于页面的右侧内容区域。
<div class="amiddboxttop">：创建一个具有类名"amiddboxttop"的div元素，可能包含社区地图相关的内容。
<div id="amiddboxtbott1" class="amiddboxtbott1content"></div>：创建一个具有id和类名的div元素，可能用于放置社区电商数据的图表。
<div id="amiddboxtbott2" class="amiddboxtbott2content"></div>：创建一个具有id和类名的div元素，可能用于放置智慧物业数据的图表。
<div id="arightboxbott" class="arightboxbottcont"></div>：创建一个具有id和类名的div元素，可能用于放置小区信息的内容。
<script>：在页面的底部引入多个JavaScript文件，这些文件包括安防设备、水电费用、社区电商、智慧物业、小区信息、moment.js和智慧停车的JavaScript代码。

这段代码主要是一个网页的骨架，包含了页面结构、样式和JavaScript脚本的引入。具体的页面内容和功能需要通过引入的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/12j5mWRkZ9BRkDxhSfU0-Qw?pwd=nljy
提取码：nljy

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

请私信作者（v）15135757306

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

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

上一篇：大数据可视化大屏实战

下一篇：基于php中医药资讯