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

前言

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

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

文章目錄

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

1.HTML
2.CSS
3.JavaScript

五、更多幹貨

一、Echart是什麼

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

二、ECharts入門教程

5 分鐘上手ECharts

三、作品示範

四、代碼實作

1.HTML

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>物流大資料平台</title>
    <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <style>.t_title {
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 2.5em;
            line-height: 80px;
            color: #fff;
        }

        #chart_map {
            cursor: pointer;
        }

        .t_show {
            position: absolute;
            top: 0;
            right: 0;
            border-radius: 2px;
            background: #2C58A6;
            padding: 2px 5px;
            color: #fff;
            cursor: pointer;
        }</style>
</head>

<body>

    <div class="header">
        <div class="bg_header">
            <div class="header_nav fl t_title">
                物流大資料服務平台
            </div>
        </div>
    </div>

    <div class="data_content">
        <div class="data_time">
            溫馨提示: 點選子產品後跳轉至詳情頁面。
        </div>
        <div class="data_main">
            <div class="main_left fl">
                <div class="left_1 t_btn6" style="cursor: pointer;">

                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>

                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>

                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>

                    <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                        <img src="img/t_1.png" alt=""> 湖南省貨運收入
                    </div>
                    <div id="chart_1" class="chart" style="width:100%;height: 280px;"></div>
                </div>
                <div class="left_2" style="cursor: pointer;">

                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>

                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>

                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>

                    <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                        <img src="img/t_2.png" alt=""> 湖南省地圖
                    </div>
                    <div id="chart_2" class="chart t_btn9" style="width:100%;height: 280px;"></div>
                </div>
            </div>
            <div class="main_center fl">
                <div class="center_text">

                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>

                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>

                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>

                    <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                        <img src="img/t_3.png" alt=""> 中國地圖
                    </div>
                    <div id="chart_map" style="width:100%;height:610px;"></div>
                </div>
            </div>
            <div class="main_right fr">
                <div class="right_1">

                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>

                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>

                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>

                    <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                        <img src="img/t_4.png" alt=""> 湖南省貨物周轉量
                    </div>
                    <div id="chart_3" class="echart t_btn7" style="width:100%;height: 280px;"></div>
                </div>
                <div class="right_2">

                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>

                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>

                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>

                    <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                        <img src="img/t_5.png" alt=""> 湖南省高速公路
                    </div>
                    <div id="chart_4" class="echart fl t_btn4" style="width:100%;height: 280px;cursor: pointer;"></div>
                </div>
            </div>
        </div>
        <div class="data_bottom">
            <div class="bottom_1 fl t_btn5" style="cursor: pointer;">

                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>

                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>

                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>

                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    <img src="img/t_6.png" alt=""> 湖南省飛機場
                </div>
                <div id="chart_5" class="echart fl" style="width:100%;height: 250px;margin-top: 15px;"></div>
            </div>
            <div class="bottom_center fl">
                <div class="bottom_2 fl">

                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>

                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>

                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>

                    <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                        <img src="img/t_7.png" alt=""> 湖南省交通
                    </div>
                    <div class="main_table t_btn8">
                        <table>
                            <thead>
                                <tr>
                                    <th>營運數(輛)</th>
                                    <th>線路總長度(公裡)</th>
                                    <th>客運總量(萬人次)</th>
                                    <th>日期</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>21059</td>
                                    <td>26497</td>
                                    <td>184448</td>
                                    <td>2018年</td>
                                </tr>
                                <tr>
                                    <td>18777</td>
                                    <td>21140</td>
                                    <td>188808</td>
                                    <td>2017年</td>
                                </tr>
                                <tr>
                                    <td>15757</td>
                                    <td>20225</td>
                                    <td>201143</td>
                                    <td>2016年</td>
                                </tr>
                                <tr>
                                    <td>17458</td>
                                    <td>19567</td>
                                    <td>202446</td>
                                    <td>2015年</td>
                                </tr>
                                <tr>
                                    <td>11323</td>
                                    <td>14562</td>
                                    <td>279854</td>
                                    <td>2014年</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="bottom_3 fl">

                    <div class="t_line_box">
                        <i class="t_l_line"></i>
                        <i class="l_t_line"></i>
                    </div>

                    <div class="t_line_box">
                        <i class="t_r_line"></i>
                        <i class="r_t_line"></i>
                    </div>

                    <div class="t_line_box">
                        <i class="l_b_line"></i>
                        <i class="b_l_line"></i>
                    </div>

                    <div class="t_line_box">
                        <i class="r_b_line"></i>
                        <i class="b_r_line"></i>
                    </div>
                    <div class="main_title">
                        <img src="img/t_7.png" alt=""> 湖南省業務量
                    </div>
                    <div class="main_table t_btn2">
                        <table>
                            <thead>
                                <tr>
                                    <th>省内(萬件)</th>
                                    <th>省外(萬件)</th>
                                    <th>國際(萬件)</th>
                                    <th>總業務量(萬件)</th>
                                    <th>日期</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>21352.36</td>
                                    <td>68575.6</td>
                                    <td>464.43</td>
                                    <td>90392.39</td>
                                    <td>2018年</td>
                                </tr>
                                <tr>
                                    <td>17522.41</td>
                                    <td>37111.03</td>
                                    <td>278.5</td>
                                    <td>54911.94</td>
                                    <td>2017年</td>
                                </tr>
                                <tr>
                                    <td>7014.14</td>
                                    <td>26841.29</td>
                                    <td>163.72</td>
                                    <td>34019.15</td>
                                    <td>2016年</td>
                                </tr>
                                <tr>
                                    <td>2553.55</td>
                                    <td>18072.54</td>
                                    <td>129.65</td>
                                    <td>20755.74</td>
                                    <td>2015年</td>
                                </tr>
                                <tr>
                                    <td>1427.04</td>
                                    <td>10859.54</td>
                                    <td>182.54</td>
                                    <td>12469.11</td>
                                    <td>2014年</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="bottom_4 fr">

                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>

                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>

                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>

                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    <img src="img/t_7.png" alt=""> 湖南省汽車
                </div>
                <div class="main_table t_btn3">
                    <table>
                        <thead>
                            <tr>
                                <th>載客汽車(萬輛)</th>
                                <th>載貨汽車(萬輛)</th>
                                <th>汽車擁有量(萬輛)</th>
                                <th>日期</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>2.53</td>
                                <td>142.65</td>
                                <td>145.18</td>
                                <td>2018年</td>
                            </tr>
                            <tr>
                                <td>2.52</td>
                                <td>139.95</td>
                                <td>142.47</td>
                                <td>2017年</td>
                            </tr>
                            <tr>
                                <td>2.65</td>
                                <td>137.96</td>
                                <td>140.61</td>
                                <td>2016年</td>
                            </tr>
                            <tr>
                                <td>2.97</td>
                                <td>131.48</td>
                                <td>134.45</td>
                                <td>2015年</td>
                            </tr>
                            <tr>
                                <td>3.23</td>
                                <td>99.99</td>
                                <td>103.22</td>
                                <td>2014年</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/common.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="js/dataTool.js"></script>
<script src="js/index.js"></script>
<script src="js/china.js"></script>
<script src="js/hunan.js"></script>

</html>

2.CSS

* {
    margin: 0;
    padding: 0;
    font-family: PingFangSC-Light, 微軟雅黑
}

body,
html {
    width: 100%;
    height: auto;
    color: #333;
    background-size: 100% 100%;
    background-color: #22223b
}

fieldset,
img,
input,
button {
    border: none;
    padding: 0;
    margin: 0;
    outline-style: none
}

img {
    border: 0;
    vertical-align: middle
}

ul,
li {
    list-style: none
}

a {
    text-decoration: none;
    cursor: pointer
}

.clear-both:before,
.clear-both:after {
    display: table;
    content: "";
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    clear: both
}

.clearfix {
    *zoom: 1
}

.fl {
    float: left
}

.fr {
    float: right
}

.header {
    width: 100%;
    height: 80px;
    padding: 0 20px;
    min-width: 1366px
}

.bg_header {
    width: 100%;
    height: 80px;
    background: url(../img/title.png) no-repeat;
    background-size: 100% 100%
}

.header>.header_logo {
    padding: 18px 10px 10px 0
}

.header>.header_logo>a {
    display: block
}

.header>.header_logo>a>img {
    width: 260px
}

.header>.header_nav {
    margin-left: 20px
}

.header>.header_nav>ul>li {
    float: left;
    margin-right: 6px;
    position: relative
}

.header>.header_nav>ul>li>a {
    display: block;
    height: 80px;
    padding: 0 10px 0 30px;
    line-height: 80px;
    color: #fff
}

.header>.header_nav>ul>li>a:hover {
    border-bottom: 4px solid #4b8df8
}

.header>.header_nav>ul>li>img {
    float: left;
    position: absolute;
    top: 33px;
    left: 10px
}

.header>.header_nav>ul>li>a.nav_current {
    border-bottom: 4px solid #4b8df8
}

.header>.header_myself {
    width: 90px;
    text-align: center
}

.header>.header_myself>p {
    color: #fff;
    font-size: 13px;
    margin-top: 15px
}

.header>.header_myself>a {
    color: #fff;
    font-size: 13px
}

.content {
    margin: 20px;
    width: calc(100% - 40px);
    min-width: 1366px
}

.content>.content_title {
    width: 100%;
    height: 35px;
    line-height: 35px;
    background-color: #4b8df8;
    box-sizing: border-box;
    margin-bottom: 20px
}

.content>.content_title>p {
    color: #fff;
    font-size: 16px;
    font-weight: 600
}

.content>.content_title>img {
    margin: 10px 10px 0
}

.content>.content_main {
    min-width: 1366px
}

.content>.content_main>.content_search>div {
    margin-right: 25px
}

.content>.content_main>.content_search>div>label {
    width: 80px;
    text-align: right
}

.content>.content_main>.content_search>div>select,
.content>.content_main>.content_search>div>input {
    width: 200px
}

.content>.content_main>.content_table {
    margin-top: 30px
}

.content>.content_main>.content_table>table {
    margin-top: 15px
}

.content>.content_main>.content_table>table th:nth-child(1),
.content>.content_main>.content_table>table td:nth-child(1) {
    width: 50px;
    text-align: center
}

.content>.content_main>.content_page>span {
    font-size: 12.8px;
    margin-top: 7px
}

.content>.content_main>.content_page>select {
    width: 70px;
    margin-right: 10px
}

3.JavaScript

$(function() {
    $(".header_nav>ul>li>a").on("click", function() {
        $(this).addClass("nav_current").parent("li").siblings("li").children("a").removeClass("nav_current");
    })

    $(".header_nav>ul>li").hover(function() {
        $(this).children("ul").toggle();
    })

    $(".header>.header_nav>ul>li>ul>li").hover(function() {
        $(this).children("ul").toggle();
    })




    $("#add_ipt").on("click", function() {
        $('#modal_add').modal();
    })


    $("#date_ipt").on("click", function() {
        $('#myModal').modal();
    })

    $("#video_ipt").on("click", function() {
        $('#Modal').modal();
    })







})

五、更多幹貨

1.如果我的部落格對你有幫助、如果你喜歡我的部落格内容，

請 “👍點贊” “✍️評論” “💙收藏”

一鍵三連哦！

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

前言

文章目錄

一、Echart是什麼

二、ECharts入門教程

三、作品示範

四、代碼實作

1.HTML

2.CSS

3.JavaScript

五、更多幹貨

繼續閱讀

基于Echarts實作可視化資料大屏裝置環境監測平台

基于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實作可視化資料大屏中國地圖城市區塊選擇代碼

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

Vue中使用echarts

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

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

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

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