效果展示：
在这里插入图片描述
代码结构：
在这里插入图片描述
主要代码实现
index.html布局

<!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="https://gitee.com/iGaoWei/big-data-view">警情警力</a></li> -->
                    <li><a href="https://gitee.com/iGaoWei/big-data-view">智慧物业</a></li>
                    <li><a href="https://gitee.com/iGaoWei/big-data-view">智慧停车</a></li>
                    <li><a href="https://gitee.com/iGaoWei/big-data-view">智慧门禁</a></li>
                </ul>
            </div>
            <h1 class="tith1 fl">智慧小区大数据分析</h1>
            <div class=" fr topbnt_right">
                <ul>
                    <li><a href="https://gitee.com/iGaoWei/big-data-view">智慧安防</a></li>
                    <li><a href="https://gitee.com/iGaoWei/big-data-view">社区电商</a></li>
                    <li class="active"><a href="https://gitee.com/iGaoWei/big-data-view">数据分析</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>

作品来自于网络收集、侵权立删

# 数据分析 # 数据挖掘 # echarts # 前端
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

avatar 腾讯云开发者社区

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

avatar 腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git

avatar 腾讯云开发者社区