基于Echarts+HTML5可視化資料大屏展示—電子商務公共服務平臺大資料中心-有解無憂

🍅 作者主頁：Java李楊勇

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

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

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

大資料平臺中心

具體資料模塊詳情

代碼目錄：

主要代碼實作：

主頁HTML布局：

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

    <title>電子商務公共服務平臺大資料中心</title>
  

</style>
        <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" style="width:220px;">
                    <img src="picture/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" style="width:200px;">
                    <img src="picture/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="main_title">
                <img src="picture/t_7.png" alt="">
                農村電商交易概況
            </div>
            <div class="main_table t_btn8">
                    <table>
                        <thead>
                        <tr>
                            <th>概況名稱</th>
                            <th>詳情</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>累計交易總金額</td>
                            <td>4058.56 萬元</td>
                        </tr>
                        <tr>
                            <td>累計交易訂單數量</td>
                            <td>437753 件</td>
                        </tr>
                        <tr>
                            <td>累計產品SKU數量</td>
                            <td>360 個</td>
                        </tr>
                        <tr>
                            <td>本月交易總額</td>
                            <td>242.42 萬元</td>
                        </tr>
                        <tr>
                            <td>本月交易訂單數量</td>
                            <td>5283 件</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
        </div>
      
                <div class="main_title" style="width:300px;left:40%;">
                    <img src="picture/t_7.png" alt="">
                    廣西電子商務熱銷產品排行榜
                </div>
                <div class="main_table t_btn8">
                    <table>
                        <thead>
                        <tr>
                            <th>產品名稱</th>
                            <th>品種</th>
                            <th>產地</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>荔浦百香果</td>
                            <td>百香果</td>
                            <td>荔浦</td>
                        </tr>
                        <tr>
                            <td>荔浦砂糖桔</td>
                            <td>砂糖桔</td>
                            <td>荔浦</td>
                        </tr>
                        <tr>
                            <td>90g將軍峰小方盒綠茶</td>
                            <td>中小葉種</td>
                            <td>廣西賀州</td>
                        </tr>
                        <tr>
                            <td>珍珠糯玉米</td>
                            <td>糧食</td>
                            <td>忻城縣</td>
                        </tr>
                        <tr>
                            <td>桂花紅糖</td>
                            <td>桂花紅糖</td>
                            <td>大新縣</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" style="width:260px;left:45%;">
                    <img src="picture/t_7.png" alt="">
                   電子商務熱銷店鋪排行榜
                </div>
                <div class="main_table t_btn2">
                    <table>
                        <thead>
                        <tr>
                            <th>店鋪名稱</th>
                            <th>產品</th>
                            <th>銷售額(月銷)</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>鮮迪食品專營店</td>
                            <td>海鴨蛋</td>
                            <td>2.8萬</td>
                        </tr>
                        <tr>
                            <td>中鼎水果專營店</td>
                            <td>紅心芭樂番石榴</td>
                            <td>2.5萬</td>
                        </tr>
                        <tr>
                            <td>中閩飄香旗艦店</td>
                            <td>廣西桂林羅漢果</td>
                            <td>2.4萬</td>
                        </tr>
                        <tr>
                            <td>芋小妹旗艦店</td>
                            <td>廣西荔浦大芋頭</td>
                            <td>1.3萬</td>
                        </tr>
                        <tr>
                            <td>桂甄堂旗艦店</td>
                            <td>柳州螺獅粉</td>
                            <td>1.1萬</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="picture/t_7.png" alt="">
                平臺活動案例
            </div>
            <div class="main_table t_btn3 table_zdy">
                <table>
                    <thead>
                    <tr>
                        <th>活動主題</th>
                        <th>活動舉辦地</th>
                        <th>日期</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><a target="blank" href="http://www.gxitps.org/zhanhui/detail/id/20.html">2018廣西特產行銷全國</a></td>
                        <td>南寧</td>
                        <td>2018年</td>
                    </tr>
                    <tr>
                        <td><a target="blank" href="http://www.gxitps.org/zhanhui/detail/id/16.html">2018壯族三月三電商節</a></td>
                        <td>南寧</td>
                        <td>2018年</td>
                    </tr>
                    <tr>
                        <td><a target="blank" href="http://www.gxitps.org/zhanhui/detail/id/17.html">2018靈山荔枝節</a></td>
                        <td>靈山縣</td>
                        <td>2018年</td>
                    </tr>
                    <tr>
                        <td>2018年貨節</td>
                        <td>廣西</td>
                        <td>2018年</td>
                    </tr>
                    <tr>
                        <td>2017好講師大賽</td>
                        <td>南寧</td>
                        <td>2017年</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</body>

</html>

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>

<!--header-->
<div class="header">
    <div class="bg_header">
        <div class="header_nav fl t_title">
            廣西電子商務公共服務平臺大資料中心
        </div> 
    </div>
</div>

<!--main-->
<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="picture/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="picture/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" style="position: relative;">
                <!--左上邊框-->
                <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" style="width: 230px;">
                    <img src="picture/t_3.png" alt="">
                    廣西電子商務進農村
                </div>
                <div id="chart_map" style="width:100%;height:610px;">
                </div>
                <div class="linshi_zdy">
                    <ul>
                        <li><span></span>2015批(8個)</li>
                        <li><span></span>2016批(15個)</li>
                        <li><span></span>2017批(13個)</li>
                        <li><span></span>2018批(11個)</li>
                    </ul>
                </div>
            </div>
        </div>
<style type="text/css">
.linshi_zdy{
    position: absolute;
    right: 0px;
    top: 450px;
}
.linshi_zdy li{
    width: 150px;
    font-size: 16px;
    padding: 3px 8px;
    cursor: pointer;
}
.linshi_zdy span{
    display: block;
    width: 14px;
    height: 14px;
    float: left;
    border-radius: 50%;
    margin-top: 3px;
    margin-right: 5px;
}
.linshi_zdy li:first-child{
    color: #ff0000;
}
.linshi_zdy li:first-child span{
    background: #ff0000;
}
.linshi_zdy li:nth-child(2){
    color: #9cff00;
}
.linshi_zdy li:nth-child(2) span{
    background: #9cff00;
}
.linshi_zdy li:nth-child(3){
    color: #fff;
}
.linshi_zdy li:nth-child(3) span{
    background: #fff;
}
.linshi_zdy li:nth-child(4){
    color: #f4a100;
}
.linshi_zdy li:nth-child(4) span{
    background: #f4a100;
}

作品來自于網路收集、侵權立刪

上面js檔案等需要引入進來

原始碼獲取

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

打卡文章更新 60/ 100天

專欄推薦閱讀：

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

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

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

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

標籤：其他

上一篇：個人介紹主頁制作簡單的（html css js）

下一篇：前端開發：組件之間的傳值(父傳子、子傳父、兄弟組件之間傳值)的使用