毕业设计 - 基于大数据的水质情况实时监测预警可视化

# 0 前言

Hi，大家好，今天给大家介绍一个大数据可视化项目，大家可以用于自己的课设或毕设，可以灵活耦合任意数据，为自己的项目添加灵活的可视化动态效果！

今天要分享的是：基于大数据的水质情况实时监测预警可视化

包含内容：

1. 完整可视化实现源码
2. html一键入口(双击直接启动)

项目获取：https://gitee.com/sinonfin/system-sharing

1 介绍

大数据大屏可视化系列：基于大数据的水质情况实时监测预警可视化
可搭载任意自己想用的数据，动态效果不错

2 实现效果

整体实现效果如下，可以看到CSS优化相对漂亮的，而且动态效果也很好，适合搭载各种数据。

3 部分代码展示

<div class="content-body">
        <div class="header">
            <div class="header-left">
                <span>水质情况实时监测预警系统</span>
            </div>
            <div class="header-time">
                <span id="time"></span>
            </div>
        </div>

        <div class="content">
            <div class="content-con">
                <div class="left-body">
                    <div class="left-top public-bg">
                        <div class="public-title">重点水质量检测区</div>
                        <div class="top-body">
                            <div class="top-left">
                                <div class="top-left-title">
                                    <h6>注水量</h6>
                                    <span><b>1756</b>m3/h</span>
                                    <img src="image/pictre.png">
                                </div>

                            </div>
                            <div class="top-right">
                                <div class="top-left-title">
                                    <h6>泄水量</h6>
                                    <span><b>3520</b>m3/h</span>
                                    <img src="image/pictre.png">
                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="left-con public-bg">
                        <div class="public-title">水质量分布情况</div>
                        <div class="title-nav" id="leida"></div>
                    </div>
                    <div class="left-bottom public-bg">
                        <div class="public-title">企业污染排放情况</div>
                        <div class="title-nav" id="wuran"></div>
                    </div>
                </div>

                <div class="center-body">
                    <div class="map" id="map"></div>
                </div>

                <div class="right-body">
                    <div class="right-top public-bg">
                        <div class="public-title">水质污染TOP5</div>
                        <div class="title-nav">
                            <div class="top5-ul">
                                <ul>
                                    <li>
                                        <span>1</span>
                                        <span>严重</span>
                                        <span>北京市</span>
                                        <span>房山区</span>
                                        <span>重度污染</span>
                                        <span>15公里</span>
                                    </li>
                                    <li>
                                        <span>2</span>
                                        <span>严重</span>
                                        <span>上海市</span>
                                        <span>闵行区</span>
                                        <span>重度污染</span>
                                        <span>10公里</span>
                                    </li>
                                    <li>
                                        <span>3</span>
                                        <span>严重</span>
                                        <span>北京市</span>
                                        <span>朝阳区</span>
                                        <span>重度污染</span>
                                        <span>9.3公里</span>
                                    </li>
                                    <li>
                                        <span>4</span>
                                        <span>中度</span>
                                        <span>广东省</span>
                                        <span>广州市</span>
                                        <span>中度污染</span>
                                        <span>8.6公里</span>
                                    </li>
                                    <li>
                                        <span>5</span>
                                        <span>中度</span>
                                        <span>浙江省</span>
                                        <span>杭州市</span>
                                        <span>中度污染</span>
                                        <span>6.6公里</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="right-con public-bg">
                        <div class="public-title">水质类别占比</div>
                        <div class="title-nav" id="huaxing"></div>
                    </div>
                    <div class="right-bottom public-bg">
                        <div class="public-title">主要地区水流量</div>
                        <div class="title-nav" id="zhexian"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<script type="text/javascript" src="js/index.js"></script>

<script>
    //顶部时间
    function getTime() {
        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)
        var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        var myHour = myDate.getHours(); //获取当前小时数(0-23)
        var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
        var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
        var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var nowTime;

        nowTime = myYear + '年' + fillZero(myMonth) + '月' + fillZero(myToday) + '日' + '&nbsp;&nbsp;' + fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond) + '&nbsp;&nbsp;' + week[myDay] + '&nbsp;&nbsp;';
        //console.log(nowTime);
        $('#time').html(nowTime);
    };
    function fillZero(str) {
        var realNum;
        if (str < 10) {
            realNum = '0' + str;
        } else {
            realNum = str;
        }
        return realNum;
    }
    //大屏
    setInterval(getTime, 1000);

4 最后

项目获取：https://gitee.com/sinonfin/system-sharing