基于Echarts實作可視化資料大屏通用大資料可視化展示平台模闆

前言

🚀 基于 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入門教程

5 分鐘上手ECharts

三、作品示範

四、代碼實作

1.HTML

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>通用大資料可視化展示平台模闆</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/china.js"></script>
    <script type="text/javascript" src="js/js.js"></script>
    <script type="text/javascript" src="js/jquery.cxselect.min.js"></script>
    <link rel="stylesheet" href="css/comon0.css">
</head>

<body>
    <div class="canvas"><iframe src="js/canvas.html" frameborder="0" style="width: 100%; height:"></iframe></div>
    <div class="loading">
        <div class="loadbox"><img src="images/loading.gif">頁面加載中...</div>
    </div>
    <div style="overflow: hidden;background:rgba(0,0,40,0) ; position: relative; z-index: 2;">
        <div class="mainbox">
            <ul class="clearfix">
                <li>
                    <div class="boxall" style="height:350px;">
                        <div class="alltitle">标題樣式</div>
                        <div class="navboxall" id="echart1"></div>
                    </div>
                    <div class="boxall" style="height:360px;">
                        <div class="alltitle">标題樣式</div>
                        <div class="navboxall">
                            <div class="sycm">
                                <ul class="clearfix">
                                    <li>
                                        <h2>1824</h2><span>當年銷售額</span></li>
                                    <li>
                                        <h2>1920</h2><span>當月銷售額</span></li>
                                    <li>
                                        <h2>19%</h2><span>利潤額</span></li>
                                    <li>
                                        <h2>1824</h2><span>當年銷售額</span></li>
                                    <li>
                                        <h2>1920</h2><span>當月銷售額</span></li>
                                    <li>
                                        <h2>19%</h2><span>利潤額</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="boxall" style="height:100px">
                        <div class="navboxall">
                            <h1>通用大資料可視化展示平台模闆</h1>
                        </div>
                    </div>
                    <div class="boxall" style="height:610px">
                        <div class="navboxall" style="overflow: hidden;height:">
                            <div style="width: 120%; height: 120%; position: relative; left: -10%; top: -11%;" id="echart3"></div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="boxall" style="height:350px">
                        <div class="alltitle">标題樣式</div>
                        <div class="navboxall">
                            <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tbody>
                                    <tr>
                                        <th scope="col">排名</th>
                                        <th scope="col">名稱</th>
                                        <th scope="col">金額</th>
                                    </tr>
                                    <tr>
                                        <td><span>1</span></td>
                                        <td>騰訊科技</td>
                                        <td>114萬<br></td>
                                    </tr>
                                    <tr>
                                        <td><span>2</span></td>
                                        <td>百度公司</td>
                                        <td>923823萬</td>
                                    </tr>
                                    <tr>
                                        <td><span>3</span></td>
                                        <td>新浪</td>
                                        <td>1240253萬</td>
                                    </tr>
                                    <tr>
                                        <td><span>4</span></td>
                                        <td>網易</td>
                                        <td>1.2億</td>
                                    </tr>
                                    <tr>
                                        <td><span>5</span></td>
                                        <td>雅虎</td>
                                        <td>13423萬</td>
                                    </tr>
                                    <tr>
                                        <td><span>6</span></td>
                                        <td>雅虎</td>
                                        <td>13423萬</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="boxall" style="height:">
                        <div class="alltitle">标題樣式</div>
                        <div class="navboxall">
                            <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tbody>
                                    <tr>
                                        <th scope="col">排名</th>
                                        <th scope="col">名稱</th>
                                        <th scope="col">金額</th>
                                    </tr>
                                    <tr>
                                        <td><span>1</span></td>
                                        <td>騰訊科技</td>
                                        <td>114萬<br></td>
                                    </tr>
                                    <tr>
                                        <td><span>2</span></td>
                                        <td>百度公司</td>
                                        <td>923823萬</td>
                                    </tr>
                                    <tr>
                                        <td><span>3</span></td>
                                        <td>新浪</td>
                                        <td>1240253萬</td>
                                    </tr>
                                    <tr>
                                        <td><span>4</span></td>
                                        <td>網易</td>
                                        <td>1.2億</td>
                                    </tr>
                                    <tr>
                                        <td><span>5</span></td>
                                        <td>雅虎</td>
                                        <td>13423萬</td>
                                    </tr>
                                    <tr>
                                        <td><span>6</span></td>
                                        <td>雅虎</td>
                                        <td>13423萬</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </li>
            </ul>
            <ul class="clearfix">
                <li style="width:60%">
                    <div class="boxall" style="height:300px;">
                        <div class="alltitle">标題樣式</div>
                        <div class="navboxall " id="echart2"></div>
                    </div>
                </li>
                <li style="width:">
                    <div class="boxall" style="height:300px">
                        <div class="alltitle">标題樣式</div>
                        <div class="navboxall" id="echart4"></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <script>$(function() {
            $('.wrap,.adduser').liMarquee({
                direction: 'up',
                runshort: false,
                scrollamount: 20
            });
        });</script>
</body>

</html>

2.CSS

@charset "utf-8";
/* CSS Document 更多精品模闆請通路：*/

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

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

body {
    color: #666;
    font-size: 16px;
}

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
}

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

.clearfix:after {
    clear: both
}

.pulll_left {
    float: left;
}

.pulll_right {
    float: right;
}

.canvas {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 1;
}

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

.loadbox {
    position: absolute;
    width: 160px;
    height: 150px;
    color: rgba(255, 255, 255, .6);
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -75px;
}

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

.head {
    height: 105px;
    background: url(../images/head_bg.png) no-repeat center center;
    position: relative
}

h1 {
    color: #fff;
    text-align: left;
    font-size: 40px;
    line-height: 64px;
    text-align: center;
}

.weather {
    position: absolute;
    right: 20px;
    top: 0;
    line-height: 70px;
}

.weather span {
    color: rgba(255, 255, 255, .7) !important;
    font-size: 18px;
}

.mainbox {
    padding: 20px 20px 0px 20px;
}

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

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

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

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

.boxall {
    padding: 15px;
    background: rgba(0, 0, 0, .2);
    position: relative;
    margin-bottom: 15px;
    ;
    z-index: 10;
}

.alltitle {
    font-size: 18px;
    color: #fff;
    position: relative;
    margin-bottom: 10px;
}

.alltitle:before {
    width: 90%;
    height: 1px;
    top: 12px;
    position: absolute;
    content: "";
    border-bottom: dashed #fff 1px;
    right: 0;
    opacity: .2;
}

.alltitle:after {
    width: 8px;
    height: 10px;
    top: 8px;
    position: absolute;
    content: "";
    border-radius: 20px;
    right: 0;
    background: #0c51f9;
}

.navboxall {
    height: calc(100% - 30px);
}

.num,
.zhibiao {
    height: 100%;
    width: 50%;
}

.zb1,
.zb2,
.zb3 {
    float: left;
    width: 33.3333%;
    height: 100%;
}

#zb1,
#zb2,
#zb3 {
    height: calc(100% - 30px);
}

.zhibiao span {
    padding-top: 20px;
    display: block;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

.num {
    padding-right: 20px;
}

.numbt {
    font-size: 24px;
    color: #fff;
    padding-top: 14px;
}

.numbt span {
    font-size: 18px;
    padding-left: 10px;
    color: #fff;
}

.numtxt {
    color: #fef000;
    font-size: 80px;
    font-family: arial;
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding: 10px 0;
    margin: 18px 0;
    font-weight: bold;
    letter-spacing: 2px;
}

.table1 th {
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    font-size: 16px;
    color: rgba(255, 255, 255, .6);
    font-weight: normal;
    padding: 10px 0 10px 0;
}

.table1 td {
    font-size: 16px;
    color: rgba(255, 255, 255, .4);
    padding: 15px 0 0 0;
}

.table1 span {
    width: 24px;
    height: 24px;
    border-radius: 53px;
    display: block;
    background: #878787;
    color: #fff;
    line-height: 24px;
    text-align: center;
}

.table1 tr:nth-child(2) span {
    background: #ed405d
}

.table1 tr:nth-child(3) span {
    background: #f78c44
}

.table1 tr:nth-child(4) span {
    background: #49bcf7
}

/*Plugin CSS*/

.sycm ul {}

.sycm li {
    text-align: center;
    padding: 10px 0;
    position: relative;
    float: left;
    width: 50%;
    padding: 20px 0;
}

.sycm ul li:nth-child(odd):before {
    position: absolute;
    content: "";
    height: 30%;
    width: 1px;
    background: rgba(255, 255, 255, .2);
    right: 0;
    top: 30%;
}

.sycm li h2 {
    font-size: 24px;
    color: #c5ccff;
}

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

.sycm p {
    border: 1px solid rgba(255, 255, 255, .3);
    color: rgba(255, 255, 255, .6);
    text-align: center;
    margin: 10px;
    border-radius: 5px;
    padding: 8px;
    position: relative;
}

.sycm p:before {
    content: "";
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(255, 255, 255, .3);
    bottom: -8px;
    left: 49%
}

五、更多幹貨

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

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

一鍵三連哦！

基于Echarts實作可視化資料大屏通用大資料可視化展示平台模闆

前言

文章目錄

一、Echart是什麼

二、ECharts入門教程

三、作品示範

四、代碼實作

1.HTML

2.CSS

五、更多幹貨

繼續閱讀

申請評分模型拒絕推斷（RI）方法申請評分模型拒絕推斷（RI）方法

Sql優化一：sql語句優化

Nacos 2.0 更新前後性能對比壓測

vue3 transitionvue3 transition元件和vue2 transition元件

尚矽谷—韓順平—圖解 Java設計模式（結構型）（55～）

Storm編譯打包過程中遇到的一些問題及解決方法

vue學習筆記day12 vue的生命周期

MapReduce的幾個企業級經典面試案例MapReduce的幾個企業級經典面試案例

9.spark Core 進階2--Cashe

淺談企業活動中進行資料分析的重要性

JavaScript的那些坑之事件代理事件代理事件階段

父子元件間傳值的實作父子元件間傳值的實作

Ambari介紹和架構原理

NOSQL安全攻擊

win10本地scala和spark安裝安裝scala安裝spark

手把手教你配置：Jenkins+Github+Webhook +Nginx自動化打包部署Vue項目