基于Echarts實作可視化資料大屏翼興消防監控(1頁)

前言

🚀 基于 Echarts 實作可視化資料大屏響應式展示效果的源碼,，基于html+css+javascript+echarts制作，可以在此基礎上重新開發。

本項目中使用的是echarts圖表庫，ECharts 提供了正常的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統計的盒形圖，用于地理資料可視化的地圖、熱力圖、線圖，用于關系資料可視化的關系圖、treemap、旭日圖，多元資料可視化的平行坐标，還有用于 BI 的漏鬥圖，儀表盤，并且支援圖與圖之間的混搭。

文章目錄

前言
一、Echart是什麼
二、ECharts入門教程
三、作品示範
四、代碼實作

1.HTML
2.CSS

五、更多幹貨

一、Echart是什麼

ECharts是一個使用 JavaScript 實作的開源可視化庫，可以流暢的運作在 PC 和移動裝置上，相容目前絕大部分浏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直覺，互動豐富，可高度個性化定制的資料可視化圖表。

二、ECharts入門教程

三、作品示範

四、代碼實作

1.HTML

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>翼興消防監控</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/comon0.css">
    <style>.grid {
            margin-top: 5%;
            width: 80%;
            height: 10px;
            display: grid;
            grid-template-columns: repeat(20, 1fr);
            grid-column-gap: 14px;
        }

        .line {
            position: relative;
            width: 90%;
            height: 7px;
        }

        .line::before,
        .line::after {
            content: '';
            position: absolute;
            width: 4.5rem;
            height: 100%;
            border-radius: 7px;
            background-color: #FF0000;
        }

        .line::before {
            animation: first-line ease-in-out 4s var(--delay) infinite alternate;
        }

        .line::after {
            bottom: 0;
            background-color: #B22222;
            width: calc(80% - 10px);
            animation: second-line ease-in-out 4s var(--delay) infinite alternate;
        }

        .line:nth-child(1) {
            --delay: calc(-0.1s);
        }

        @keyframes {
            70% {
                width: calc(80% - 10px);
            }

            100% {
                background-color: #FF0000;
            }
        }

        }</style>
</head>
<script type="text/javascript">$(document).ready(function () {
        var html = $(".wrap ul").html()
        $(".wrap ul").append(html)
        var ls = $(".wrap li").length / 2 + 1
        i = 0
        ref = setInterval(function () {
            i++
            if (i == ls) {
                i = 1
                $(".wrap ul").css({
                    marginTop: 0
                })
                $(".wrap ul").animate({
                    marginTop: -'.52' * i + 'rem'
                }, 1000)
            }
            $(".wrap ul").animate({
                marginTop: -'.52' * i + 'rem'
            }, 1000)


        }, 2400);



        var html2 = $(".adduser ul").html()
        $(".adduser ul").append(html2)
        var ls2 = $(".adduser li").length / 2 + 1
        a = 0
        ref = setInterval(function () {
            a++
            if (a == ls2) {
                a = 1
                $(".adduser ul").css({
                    marginTop: 0
                })
                $(".adduser ul").animate({
                    marginTop: -'.5' * a + 'rem'
                }, 800)
            }
            $(".adduser ul").animate({
                marginTop: -'.5' * a + 'rem'
            }, 800)


        }, 4300);








    })</script>

<body style='overflow:-Scroll;overflow-y:hidden'>
    <div class="loading">
        <div class="loadbox"> <img src="images/loading.gif"> 頁面加載中... </div>
    </div>
    <div class="head">
        <h1>翼興消防監控</h1>
        <div class="weather"><span id="showTime"></span></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">
            <li>
                <div class="boxall" style="height:">
                    <div class="alltitle">消防主機報警</div>

                    <div class="sycm">
                        <ul class="clearfix">
                            <li>
                                <h2>1824</h2><span>本月報警數量</span>
                            </li>
                            <li>
                                <h2>1920</h2><span>上月報警數量</span>
                            </li>
                            <li>
                                <h2>5%</h2><span>環比增長</span>
                            </li>
                        </ul>
                        <div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
                        <ul class="clearfix">
                            <li>
                                <h2>824</h2><span>主機(20001)</span>
                            </li>
                            <li>
                                <h2>710</h2><span>主機(20003)</span>
                            </li>
                            <li>
                                <h2>200</h2><span>主機(20002)</span>
                            </li>
                        </ul>


                    </div>
                    <div class="addnew">
                        <div class="tit02"><span>誤報種類</span></div>
                        <div class="allnav" style="height:" id="wbzl"></div>
                    </div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height:">
                    <div class="alltitle">無線煙感報警</div>
                    <div class="allnav" style="height:" id="wxyg"></div>
                    <div class="addnew">
                        <div class="tit02"><span>誤報種類</span></div>
                        <div class="allnav" style="height:" id="wwbzl"></div>
                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <li>
                <div class="bar">
                    <div class="barbox ">
                        <ul class="clearfix">
                            <li class="pulll_left counter">
                                6069
                            </li>
                            <li class="pulll_left counter">410</li>
                        </ul>
                    </div>
                    <div class="barbox2">
                        <ul class="clearfix">
                            <li class="pulll_left">聯網機關數量</li>
                            <li class="pulll_left">聯網消防主機數量</li>
                        </ul>
                    </div>
                </div>
                <div class="bar">
                    <div class="barbox">
                        <ul class="clearfix">
                            <li class="pulll_left counter">81189</li>
                            <li class="pulll_left counter">39410</li>
                        </ul>
                    </div>
                    <div class="barbox2">
                        <ul class="clearfix">
                            <li class="pulll_left">總點位數量</li>
                            <li class="pulll_left">總報警數量</li>
                        </ul>
                    </div>
                </div>
                <div class="map">
                    <div class="map1"><img src="images/lbx.png"></div>
                    <div class="map2"><img src="images/jt.png"></div>
                    <div class="map3"><img src="images/map.png"></div>
                    <div class="map4" id="map_1"></div>
                </div>
                <div class="boxall" style="height:">
                    <div class="alltitle">電報警</div>
                    <div class="allnav" id="dbj" style="width:7.2rem;height:3rem;margin-top:"></div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <li>
                <div class="boxall" style="height:5.2rem">
                    <div class="alltitle">瓦斯報警</div>

                    <div class="clearfix">
                        <div class="sy" style="width:300px;" id="yqbj"></div>
                    </div>
                    <div class="addnew">
                        <div class="tit02"><span>最新報警</span></div>
                        <div class="adduser" style="height:">
                            <ul>
                                <li class="clearfix"> <span class="pulll_left">大連市XX醫院</span> <span
                                        class="pulll_right">一樓 - 吸煙 - 2019-10-11 09:58:58 </span> </li>
                                <li class="clearfix"> <span class="pulll_left">大連市XX集團</span> <span
                                        class="pulll_right">二樓 - 誤報 - 2019-10-11 09:58:58 </span> </li>
                                <li class="clearfix"> <span class="pulll_left">開發區醫院</span> <span class="pulll_right">三樓
                                        - 粉塵 - 2019-10-11 09:58:58 </span> </li>
                                <li class="clearfix"> <span class="pulll_left">時代廣場</span> <span class="pulll_right">四樓
                                        - 誤報 - 2019-10-11 09:58:58 </span> </li>
                                <li class="clearfix"> <span class="pulll_left">海昌物業</span> <span class="pulll_right">四樓
                                        - 誤報 - 2019-10-11 09:58:58 </span> </li>
                                <li class="clearfix"> <span class="pulll_left">海昌物業</span> <span class="pulll_right">四樓
                                        - 誤報 - 2019-10-11 09:58:58 </span> </li>
                            </ul>
                        </div>
                    </div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height:">
                    <div class="alltitle">紅外報警</div>
                    <div class="grid">
                        <span class="line"></span>
                    </div>
                    <div>
                        <span style="color: #fff;opacity:.5">本月報警數量 ：</span><span
                            style="color: #DC143C;font-size:.1rem;    font-weight: bold;">809</span>
                        <span style="margin-left:15%;color: #fff;opacity:.5">上月報警數量 ：</span><span
                            style="color: #ffeb7b;font-size:.1rem;    font-weight: old;">109</span>

                    </div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height:">
                    <div class="alltitle">水報警</div>
                    <div class="allnav" style="height:" id="sbj"></div>

                    <div class="boxfoot"></div>
                </div>
            </li>
        </ul>

    </div>
    <div class="back"></div>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/echarts-gl.min.js"></script>
    <script language="JavaScript" src="js/echarts-tool.js"></script>
    <script type="text/javascript" src="js/timelineOption.js"></script>



    <script type="text/javascript">
    </script>
    <script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
    <script type="text/javascript" src="js/jquery.countup.min.js"></script>
    <script type="text/javascript">$('.counter').countUp();</script>

</body>

</html>

2.CSS

@charset "utf-8";
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

*,
body {
    padding: 0px;
    margin: 0px;
    color: #222;
    font-family: "微軟雅黑";
}

body {
    background: #000d4a url(../images/bg.jpg) center top;
    background-size: cover;
    color: #666;
    padding-bottom: 30px;
    font-size: .1rem;
}

li {
    list-style-type: none;
}

table {}

i {
    margin: 0px;
    padding: 0px;
    text-indent: 0px;
}

img {
    border: none;
    max-width: 100%;
}

a {
    text-decoration: none;
    color: #399bff;
}

a.active,
a:focus {
    outline: none !important;
    text-decoration: none;
}

ol,
ul,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    padding: 0;
    margin: 0
}

a:hover {
    color: #06c;
    text-decoration: none !important
}

/* 加載旋轉動畫 */

#load {
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(../images/data08.png) no-repeat #061537;
    background-size: cover;
    top: 0;
    left: 0;
    z-index: 999
}

#load .load_img {
    position: absolute;
    left: calc(50% - 182px);
    top: calc(50% - 182px);
}

.load_img img {
    position: absolute;
    left: 0;
    top: 0;
}

.load_img .jzxz1 {
    animation: xz1 8s infinite linear;
}

@keyframes {
    from {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.load_img .jzxz2 {
    animation: xz2 7s infinite linear;
}

@keyframes {
    from {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-180deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

.clearfix:after,
.clearfix:before {
    display: table;
    content: " "
}

.clearfix:after {
    clear: both
}

.pulll_left {
    float: left;
}

.pulll_right {
    float: right;
}

/*谷哥滾動條樣式*/

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    position: absolute
}

::-webkit-scrollbar-thumb {
    background-color: #5bc0de
}

::-webkit-scrollbar-track {
    background-color: #ddd
}

/***/

.loading {
    position: fixed;
    left: 0;
    top: 0;
    font-size: .3rem;
    z-index: 100000000;
    width: 100%;
    height: 100%;
    background: #1a1a1c;
    text-align: center;
}

.loadbox {
    position: absolute;
    width: 160px;
    height: 150px;
    color: #324e93;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -75px;
}

.loadbox img {
    margin: 10px auto;
    display: block;
    width: 40px;
}

.copyright {
    background: rgba(19, 31, 64, .32);
    border: 1px solid rgba(255, 255, 255, .05);
    line-height: .5rem;
    text-align: center;
    padding-right: 15px;
    bottom: 0;
    color: rgba(255, 255, 255, .7);
    font-size: .16rem;
}

.head {
    height: 1.05rem;
    background: url(../images/head_bg.png) no-repeat center center;
    background-size: 100% 100%;
    position: relative
}

.head h1 {
    color: #fff;
    text-align: center;
    font-size: .42rem;
    line-height: .75rem;
}

.head h1 img {
    width: 1.5rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: .2rem
}

.weather {
    position: absolute;
    right: .3rem;
    top: 0;
    line-height: .75rem;
}

.weather img {
    width: .37rem;
    display: inline-block;
    vertical-align: middle;
}

.weather span {
    color: rgba(255, 255, 255, .7);
    font-size: .18rem;
    padding-right: .1rem;
}

.mainbox {
    padding: 0rem .4rem 0rem .4rem;
}

.mainbox>ul {
    margin-left: -.4rem;
    margin-right: -.4rem;
}

.mainbox>ul>li {
    float: left;
    padding: 0 .4rem
}

.mainbox>ul>li {
    width: 30%
}

.mainbox>ul>li:nth-child(2) {
    width: 40%
}

.boxall {
    border: 1px solid rgba(25, 186, 139, .17);
    padding: 0 .3rem .3rem .3rem;
    background: rgba(255, 255, 255, .04) url(../images/line.png);
    background-size: 100% auto;
    position: relative;
    margin-bottom: .1rem;
    z-index: 20;
}

.boxall:before,
.boxall:after {
    position: absolute;
    width: .1rem;
    height: .1rem;
    content: "";
    border-top: 2px solid #02a6b5;
    top: 0;
}

.boxall:before,
.boxfoot:before {
    border-left: 2px solid #02a6b5;
    left: 0;
}

.boxall:after,
.boxfoot:after {
    border-right: 2px solid #02a6b5;
    right: 0;
}

.alltitle {
    font-size: .24rem;
    color: #fff;
    text-align: center;
    line-height: .6rem;
    border-bottom: 1px solid rgba(255, 255, 255, .2)
}

.boxfoot {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
}

.boxfoot:before,
.boxfoot:after {
    position: absolute;
    width: .1rem;
    height: .1rem;
    content: "";
    border-bottom: 2px solid #02a6b5;
    bottom: 0;
}

.bar {
    background: rgba(101, 132, 226, .1);
    padding: .15rem;
}

.barbox li,
.barbox2 li {
    width: 50%;
    text-align: center;
    position: relative;
}

.barbox:before,
.barbox:after {
    position: absolute;
    width: .3rem;
    height: .1rem;
    content: "";
}

.barbox:before {
    border-left: 2px solid #02a6b5;
    left: 0;
    border-top: 2px solid #02a6b5;
}

.barbox:after {
    border-right: 2px solid #02a6b5;
    right: 0;
    bottom: 0;
    border-bottom: 2px solid #02a6b5;
}

.barbox li:first-child:before {
    position: absolute;
    content: "";
    height: 50%;
    width: 1px;
    background: rgba(255, 255, 255, .2);
    right: 0;
    top: 25%;
}

.barbox {
    border: 1px solid rgba(25, 186, 139, .17);
    position: relative;
}

.barbox li {
    font-size: .3rem;
    color: #ffeb7b;
    padding: .05rem 0;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-weight: bold;
}

.barbox2 li {
    font-size: .19rem;
    color: #637c9f;
    padding-top: .1rem;
}

.map {
    position: relative;
    height: 4.3rem;
    z-index: 9;
}

.map4 {
    width: 100%;
    height: 4.3rem;
    position: relative;
    left: -50%;
    top: 2%;
    margin-top: .2rem;
    z-index: 5;
}

.map1,
.map2,
.map3 {
    position: absolute;
}

.map1 {
    width: 3.93rem;
    z-index: 2;
    top: .1rem;
    left: 1.7rem;
    animation: myfirst2 15s infinite linear;
}

.map2 {
    width: 3.66rem;
    top: .15rem;
    left: 1.87rem;
    z-index: 3;
    opacity: 0.2;
    animation: myfirst 10s infinite linear;
}

.map3 {
    width: 3.18rem;
    top: .4rem;
    left: 2.13rem;
    z-index: 1;
}

#echarts1,
#echarts2,
#echarts3,
#echarts6,
#echarts7,
#echarts8 {
    position: relative;
}

#echarts1:before,
#echarts2:before,
#echarts3:before,
#echarts6:before,
#echarts7:before,
#echarts8:before {
    position: absolute;
    content: "23124";
    width: 100%;
    text-align: center;
    bottom: .15rem;
    color: #fff;
    opacity: .7;
    font-size: .18rem;
}

#echarts1:before {
    content: "平均單客價"
}

#echarts2:before {
    content: "男消費"
}

#echarts3:before {
    content: "女消費"
}

#echarts6:before {
    content: "新增會員"
}

#echarts7:before {
    content: "新增領卡會員"
}

#echarts8:before {
    content: "新增消費會員"
}

.tabs {
    text-align: center;
    padding: .1rem 0 0 0;
}

.tabs a {
    position: relative;
    display: inline-block;
    margin-left: 1px;
    padding: .05rem .2rem;
    color: #898989;
    transition: all .3s ease-out 0s;
    font-size: 14px;
}

.tabs li {
    display: inline-block;
}

.tabs a:after {
    position: absolute;
    width: 1px;
    height: 10px;
    background-color: rgba(255, 255, 255, .1);
    content: '';
    margin-left: 0;
    right: -1px;
    margin-top: 7px;
}

.tabs li a.active {
    border: 1px solid rgba(25, 186, 139, .17);
    background: rgba(255, 255, 255, .05);
    color: #fff;
}

.tit02 {
    text-align: center;
    margin: .1rem 0;
    position: relative
}

.tit02 span {
    border: 1px solid rgba(25, 186, 139, .17);
    letter-spacing: 2px;
    padding: .01rem .2rem;
    background: rgba(255, 255, 255, .05);
    font-size: .18rem;
    color: #49bcf7;
}

.tit02:before,
.tit02:after {
    position: absolute;
    width: 26%;
    height: 1px;
    background: rgba(25, 186, 139, .2);
    content: "";
    top: .12rem;
}

.tit02:after {
    right: 0;
}

.tit02:before {
    left: 0;
}

.wrap {
    height: 2.54rem;
    overflow: hidden;
}

.wrap li {
    line-height: .42rem;
    height: .42rem;
    font-size: .18rem;
    text-indent: .24rem;
    margin-bottom: .1rem;
}

.wrap li p {
    border: 1px solid rgba(25, 186, 139, .17);
    color: rgba(255, 255, 255, .6);
}

.sy {
    float: left;
    width: 33%;
    height: 2.2rem;
    margin-top: -.25rem;
}

.adduser {
    height: 1.5rem;
    overflow: hidden;
}

.adduser li {
    height: .5rem;
}

.adduser img {
    width: .40rem;
    border-radius: .5rem;
    margin-right: .1rem;
    display: inline-block;
    vertical-align: middle;
}

.adduser span {
    line-height: .5rem;
    font-size: .18rem;
    color: rgba(255, 255, 255, .6);
}

.sycm ul {
    margin-left: -.5rem;
    margin-right: -.5rem;
    padding: .16rem 0;
}

.sycm li {
    float: left;
    width: 33.33%;
    text-align: center;
    position: relative
}

.sycm li:before {
    position: absolute;
    content: "";
    height: 30%;
    width: 1px;
    background: rgba(255, 255, 255, .1);
    right: 0;
    top: 15%;
}

.sycm li:last-child:before {
    width: 0;
}

.sycm li h2 {
    font-size: .3rem;
    color: #c5ccff;
}

.sycm li span {
    font-size: .18rem;
    color: #fff;
    opacity: .5;
}

@keyframes {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

@keyframes {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-359deg);
    }
}

基于Echarts實作可視化資料大屏翼興消防監控(1頁)

前言

文章目錄

一、Echart是什麼

二、ECharts入門教程

三、作品示範

四、代碼實作

1.HTML

2.CSS

繼續閱讀

基于Echarts實作可視化資料大屏工具廠大屏系統監控

基于HTML美食文化網頁設計與實作——html+css+javascript+jquery+bootstarp響應式西餐廳美食網站

基于HTML環保主題網頁項目的設計與實作——環保垃圾分類(HTML+CSS+JavaScript)

基于HTML電商項目的設計與實作——html靜态網站基于數位類電商購物網站網頁設計與實作共計30個頁面

基于HTML的環境網站設計 HTML+CSS環保網站項目實作帶設計說明psd

基于HTML+CSS制作靜态頁面【剪紙文化15頁】傳統文化設計題材 dreamweaver制作靜态html網頁設計作業作品

基于Echarts實作可視化資料大屏機械裝置監測大資料統計平台HTML頁面

基于Echarts實作可視化資料大屏物流大資料服務平台

基于Echarts實作可視化資料大屏智慧旅遊綜合服務平台系統

基于Echarts實作可視化資料大屏中國地圖城市區塊選擇代碼

基于VUE + Echarts 實作可視化資料大屏農村資訊可視化

Vue中使用echarts

基于Echarts實作可視化資料大屏物流雲大資料看闆頁面HTML模闆

設計大屏資料可視化需要注意的問題

基于VUE + Echarts 實作可視化資料大屏智慧校園可視化

基于HTML+CSS+JavaScript我的學校設計畢業論文源碼