基于Echarts+HTML5可視化資料大屏展示—新能源車聯網綜合大資料平臺-有解無憂

🍅 作者主頁：Java李楊勇

🍅 簡介：Java領域優質創作者🏆、Java李楊勇公號作者? 簡歷模板、學習資料、面試題庫、技識訓助【關注我，都給你】

🍅 歡迎點贊 👍 收藏 ?留言 📝

動圖演示： 文末獲取原始碼

代碼目錄：

主要代碼實作：

主頁HTML布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新能源車聯網綜合大資料平臺</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/map.css">
</head>
<body>
<div class="data">

    <div class="data-title">
        <div class="title-left fl"></div>
        <div class="title-center fl"></div>
        <div class="title-right fr"></div>
    </div>
    <div class="data-content">
        <div class="con-left fl">
            <div class="left-top">
                <div class="info">
                    <div class="info-title">實時統計</div>
                    <img src="img/bj-1.png" alt="" class="bj-1">
                    <img src="img/bj-2.png" alt="" class="bj-2">
                    <img src="img/bj-3.png" alt="" class="bj-3">
                    <img src="img/bj-4.png" alt="" class="bj-4">
                    <div class="info-main">
                        <div class="info-1">
                            <div class="info-img fl">
                                <img src="img/info-img-1.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>車輛總數(輛)</p>
                                <p>12,457</p>
                            </div>
                        </div>
                        <div class="info-2">
                            <div class="info-img fl">
                                <img src="img/info-img-2.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>當前在線數(輛)</p>
                                <p>12,457</p>
                            </div>
                        </div>
                        <div class="info-3">
                            <div class="info-img fl">
                                <img src="img/info-img-3.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>今榷訓躍數(輛)</p>
                                <p>12,457</p>
                            </div>
                        </div>
                        <div class="info-4">
                            <div class="info-img fl">
                                <img src="img/info-img-4.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>今榷訓躍率(%)</p>
                                <p>83</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="top-bottom">
                    <div class="title">行業分類</div>
                    <img src="img/bj-1.png" alt="" class="bj-1">
                    <img src="img/bj-2.png" alt="" class="bj-2">
                    <img src="img/bj-3.png" alt="" class="bj-3">
                    <img src="img/bj-4.png" alt="" class="bj-4">
                    <div id="echarts_1" class="charts"></div>
                </div>
            </div>
            <div class="left-bottom">
                <div class="title">車型分類</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_2" class="charts"></div>
            </div>
        </div>
        <div class="con-center fl">
            <div class="map-num">
                <p>實時行駛車輛(輛)</p>
                <div class="num">
                    <span>1</span>
                    <span>,</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>,</span>
                    <span>5</span>
                    <span>6</span>
                    <span>7</span>
                </div>
            </div>
            <div class="cen-top" id="map"></div>
            <div class="cen-bottom">
                <div class="title">車輛充電高峰時間</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_3" class="charts"></div>
            </div>
        </div>
        <div class="con-right fr">
            <div class="right-top">
                <div class="title">本月行駛里程TOP5</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_4" class="charts"></div>
            </div>
            <div class="right-center">
                <div class="title">報警車輛TOP5</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_5" class="charts"></div>
            </div>
            <div class="right-bottom">
                <div class="title">電池報警車輛TOP10</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_6" class="charts"></div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/echarts.js"></script>
</html>

CSS樣式檔案

/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
    margin: 0;
    padding: 0;
}

/*將標簽原有的默認內外邊距去掉*/

fieldset, img, input, button {
    border: none; /*去掉邊框*/
    padding: 0;
    margin: 0;
    outline-style: none; /*去掉環繞邊框*/
}

ul, ol {
    list-style: none; /*去掉原樣式中的小黑點*/
    /*ctrl+alt+l*/
}

input {
    padding-top: 0;
    padding-bottom: 0;

}

select, input {
    vertical-align: middle; /*輸入字居中顯示*/
}

select, input, textarea {
    font-size: 14px;
    margin: 0;
}

/**/
textarea {
    resize: none; /*防止拖動*/
}

img {
    border: 0;
    vertical-align: middle; /*  去掉圖片底部默認的3像素空白縫隙*/
}

table {
    border-collapse: collapse; /*合并外邊線*/
}

body {
    font-family:  Microsoft YaHei, Arial, "\5b8b\4f53";
}

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1; /*IE/7/6*/
    /*兼容IE6下的寫法*/
}

h1, h2, h3, h4, h5, h6 {
    text-decoration: none; /**/
    font-weight: normal; /*不加粗*/
    font-size: 100%;
}
a{
    text-decoration: none;
}
s, i, em {
    /*一般起裝飾作用*/
    font-style: normal; /*將字體變成正常字體*/
    text-decoration: none; /*去掉中劃線*/
}
.fl{
    float: left;
}
.fr{
    float: right;
}

上面的圖片檔案以及js檔案等需要引入進來

原始碼獲取

大家點贊、收藏、關注、評論啦、查看👇🏻👇🏻👇🏻微信公眾號獲取👇🏻👇🏻👇🏻

打卡文章更新 58/ 100天

專欄推薦閱讀：

ECharts+HTML5大資料模板《100套》

HTML5大作業實戰案例《100套》

Java畢設專案精品實戰案例《100套》

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/301246.html

標籤：其他

上一篇：大資料—— Spark 優化

下一篇：【炫“庫”行動】??人大金倉資料庫管理系統?? - SQL&JDBC