天天看點
傳回

基于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

三、作品示範

基于Echarts實作可視化資料大屏智能分析系統

四、代碼實作

1.HTML 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="fonts/icomoon.css">
</head>

<body>
    <div class="viewport">
        <div class="column">

            <div class="overview panel">
                <div class="inner">
                    <div class="item">
                        <h4>2,190</h4>
                        <span>
                            <i class="icon-dot" style="color:"></i>
                            裝置總數
                        </span>
                    </div>
                    <div class="item">
                        <h4>190</h4>
                        <span>
                            <i class="icon-dot" style="color:"></i>
                            季度新增
                        </span>
                    </div>
                    <div class="item">
                        <h4>3,001</h4>
                        <span>
                            <i class="icon-dot" style="color:"></i>
                            營運裝置
                        </span>
                    </div>
                    <div class="item">
                        <h4>108</h4>
                        <span>
                            <i class="icon-dot" style="color:"></i>
                            異常裝置
                        </span>
                    </div>
                </div>
            </div>


            <div class="monitor panel">
                <div class="inner">
                    <div class="tabs">
                        <a href="javascript:;" data-index="0" class="active">故障裝置監控</a>
                        <a href="javascript:;" data-index="1">異常裝置監控</a>
                    </div>
                    <div class="content" style="display: block;">
                        <div class="head">
                            <span class="col">故障時間</span>
                            <span class="col">裝置位址</span>
                            <span class="col">異常代碼</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <span class="col">20180701</span>
                                    <span class="col">11北京市昌平西路金燕龍寫字樓</span>
                                    <span class="col">1000001</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190601</span>
                                    <span class="col">北京市昌平區城西路金燕龍寫字樓</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190704</span>
                                    <span class="col">北京市昌平區建材城西路金燕龍寫字樓</span>
                                    <span class="col">1000003</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20180701</span>
                                    <span class="col">北京市昌平區建路金燕龍寫字樓</span>
                                    <span class="col">1000004</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平區建材城西路金燕龍寫字樓</span>
                                    <span class="col">1000005</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平區建材城西路金燕龍寫字樓</span>
                                    <span class="col">1000006</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平區建西路金燕龍寫字樓</span>
                                    <span class="col">1000007</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平區建材城西路金燕龍寫字樓</span>
                                    <span class="col">1000008</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平區建材城西路金燕龍寫字樓</span>
                                    <span class="col">1000009</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190710</span>
                                    <span class="col">北京市昌平區建材城西路金燕龍寫字樓</span>
                                    <span class="col">1000010</span>
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content">
                        <div class="head">
                            <span class="col">異常時間</span>
                            <span class="col">裝置位址</span>
                            <span class="col">異常代碼</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee">
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平區建材城西路金燕龍寫字樓</span>
                                    <span class="col">1000001</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190701</span>
                                    <span class="col">北京市昌平區建材城西路金燕龍寫字樓</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190703</span>
                                    <span class="col">北京市昌平區建材城西路金燕龍寫字樓</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190704</span>
                                    <span class="col">北京市昌平區建材城西路金燕龍寫字樓</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190705</span>
                                    <span class="col">北京市昌平區建材城西路金燕龍寫字樓</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190706</span>
                                    <span class="col">北京市昌平區建材城西路金燕龍寫字樓</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190707</span>
                                    <span class="col">北京市昌平區建材城西路金燕龍寫字樓</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190708</span>
                                    <span class="col">北京市昌平區建材城西路金燕龍寫字樓</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190709</span>
                                    <span class="col">北京市昌平區建材城西路金燕龍寫字樓</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                                <div class="row">
                                    <span class="col">20190710</span>
                                    <span class="col">北京市昌平區建材城西路金燕龍寫字樓</span>
                                    <span class="col">1000002</span>
                                    <span class="icon-dot"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="point panel">
                <div class="inner">
                    <h3>點位分布統計</h3>
                    <div class="chart">
                        <div class="pie"></div>
                        <div class="data">
                            <div class="item">
                                <h4>320,11</h4>
                                <span>
                                    <i class="icon-dot" style="color:"></i>
                                    點位總數
                                </span>
                            </div>
                            <div class="item">
                                <h4>418</h4>
                                <span>
                                    <i class="icon-dot" style="color:"></i>
                                    本月新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">


            <div class="map">
                <h3>
                    <span class="icon-cube"></span> 裝置資料統計
                </h3>
                <div class="chart">
                    <div class="geo"></div>
                </div>
            </div>


            <div class="users panel">
                <div class="inner">
                    <h3>全國使用者總量統計</h3>
                    <div class="chart">
                        <div class="bar"></div>
                        <div class="data">
                            <div class="item">
                                <h4>120,899</h4>
                                <span>
                                    <i class="icon-dot" style="color:"></i>
                                    使用者總量
                                </span>
                            </div>
                            <div class="item">
                                <h4>248</h4>
                                <span>
                                    <i class="icon-dot" style="color:"></i>
                                    本月新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">


            <div class="order panel">
                <div class="inner">

                    <div class="filter">
                        <a href="javascript:;" data-key="day365" class="active">365天</a>
                        <a href="javascript:;" data-key="day90">90天</a>
                        <a href="javascript:;" data-key="day30">30天</a>
                        <a href="javascript:;" data-key="day1">24小時</a>
                    </div>

                    <div class="data">
                        <div class="item">
                            <h4>20,301,987</h4>
                            <span>
                                <i class="icon-dot" style="color: #ed3f35;"></i>
                                訂單量
                            </span>
                        </div>
                        <div class="item">
                            <h4>99834</h4>
                            <span>
                                <i class="icon-dot" style="color: #eacf19;"></i>
                                銷售額(萬元)
                            </span>
                        </div>
                    </div>
                </div>
            </div>


            <div class="sales panel">
                <div class="inner">
                    <div class="caption">
                        <h3>銷售額統計</h3>
                        <a href="javascript:;" class="active" data-type="year">年</a>
                        <a href="javascript:;" data-type="quarter">季</a>
                        <a href="javascript:;" data-type="month">月</a>
                        <a href="javascript:;" data-type="week">周</a>
                    </div>
                    <div class="chart">
                        <div class="label">機關:萬</div>
                        <div class="line"></div>
                    </div>
                </div>
            </div>

            <div class="wrap">
                <div class="channel panel">
                    <div class="inner">
                        <h3>管道分布</h3>
                        <div class="data">
                            <div class="item">
                                <h4>39 <small>%</small></h4>
                                <span>
                                    <i class="icon-plane"></i>
                                    機場
                                </span>
                            </div>
                            <div class="item">
                                <h4>28 <small>%</small></h4>
                                <span>
                                    <i class="icon-bag"></i>
                                    商場
                                </span>
                            </div>
                        </div>
                        <div class="data">
                            <div class="item">
                                <h4>20 <small>%</small></h4>
                                <span>
                                    <i class="icon-train"></i>
                                    地鐵
                                </span>
                            </div>
                            <div class="item">
                                <h4>13 <small>%</small></h4>
                                <span>
                                    <i class="icon-bus"></i>
                                    火車站
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="quarter panel">
                    <div class="inner">
                        <h3>一季度銷售進度</h3>
                        <div class="chart">
                            <div class="box">
                                <div class="gauge"></div>
                                <div class="label">75<small> %</small></div>
                            </div>
                            <div class="data">
                                <div class="item">
                                    <h4>1,321</h4>
                                    <span>
                                        <i class="icon-dot" style="color:"></i>
                                        銷售額(萬元)
                                    </span>
                                </div>
                                <div class="item">
                                    <h4>150%</h4>
                                    <span>
                                        <i class="icon-dot" style="color:"></i>
                                        同比增長
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="top panel">
                <div class="inner">
                    <div class="all">
                        <h3>全國熱榜</h3>
                        <ul>
                            <li>
                                <i class="icon-cup1" style="color: #d93f36;"></i> 可愛多
                            </li>
                            <li>
                                <i class="icon-cup2" style="color: #68d8fe;"></i> 娃哈啥
                            </li>
                            <li>
                                <i class="icon-cup3" style="color: #4c9bfd;"></i> 喜之郎
                            </li>
                        </ul>
                    </div>
                    <div class="province">
                        <h3>各省熱銷 <i class="date">// 近30日 //</i></h3>
                        <div class="data">
                            <ul class="sup">
                                <li>
                                    <span>北京</span>
                                    <span>25,179 <s class="icon-up"></s></span>
                                </li>
                                <li>
                                    <span>河北</span>
                                    <span>23,252 <s class="icon-down"></s></span>
                                </li>
                                <li>
                                    <span>上海</span>
                                    <span>20,760 <s class="icon-up"></s></span>
                                </li>
                                <li>
                                    <span>江蘇</span>
                                    <span>23,252 <s class="icon-down"></s></span>
                                </li>
                                <li>
                                    <span>山東</span>
                                    <span>20,760 <s class="icon-up"></s></span>
                                </li>
                            </ul>
                            <ul class="sub">

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
    <script src="js/index.js"></script>
    <script src="js/china.js"></script>
    <script src="js/mymap.js"></script>
</body>

</html>

2.CSS 

body {
    line-height: 1.15;
    font-size: .5rem;
    margin: 0;
    padding: 0;
    background-color: #0d1944
}

* {
    margin: 0;
    padding: 0;
    font-weight: 400
}

ul {
    list-style: none
}

a {
    text-decoration: none
}

.viewport {
    min-width: 1024px;
    max-width: 1920px;
    min-height: 780px;
    margin: 0 auto;
    background: url(../images/logo.png) no-repeat 0 0/contain;
    display: flex;
    padding: 3.667rem .833rem 0
}

.column {
    flex: 3;
    position: relative
}

.column:nth-child(2) {
    flex: 4;
    margin: 1.333rem .833rem 0
}

.panel {
    box-sizing: border-box;
    border: 2px solid red;
    border-image: url(../images/border.png) 51 38 21 132;
    border-width: 2.125rem 1.583rem .875rem 5.5rem;
    position: relative;
    margin-bottom: .833rem
}

.panel .inner {
    position: absolute;
    top: -2.125rem;
    right: -1.583rem;
    bottom: -.875rem;
    left: -5.5rem;
    padding: 1rem 1.5rem
}

.panel h3 {
    font-size: .833rem;
    color: #fff
}

.overview {
    height: 4.583rem
}

.overview .inner {
    display: flex;
    justify-content: space-between
}

.overview h4 {
    font-size: 1.167rem;
    padding-left: .2rem;
    color: #fff;
    margin-bottom: .333rem
}

.overview span {
    font-size: .667rem;
    color: #4c9bfd
}

.monitor {
    height: 20rem
}

.monitor .inner {
    padding: 1rem 0;
    display: flex;
    flex-direction: column
}

.monitor .tabs {
    padding: 0 1.5rem;
    margin-bottom: .75rem
}

.monitor .tabs a {
    color: #1950c4;
    font-size: .75rem;
    padding: 0 1.125rem
}

.monitor .tabs a:first-child {
    border-right: .083rem solid #00f2f1;
    padding-left: 0
}

.monitor .tabs a.active {
    color: #fff
}

.monitor .content {
    flex: 1;
    display: none;
    position: relative
}

.monitor .head {
    background: rgba(255, 255, 255, .1);
    font-size: .583rem;
    padding: .5rem 1.5rem;
    color: #68d8fe;
    display: flex;
    justify-content: space-between;
    line-height: 1.05
}

.monitor .col:nth-child(1) {
    width: 3.2rem
}

.monitor .col:nth-child(2) {
    width: 8.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.monitor .col:nth-child(3) {
    width: 3.2rem
}

.monitor .marquee-view {
    position: absolute;
    top: 1.6rem;
    bottom: 0;
    width: 100%;
    overflow: hidden
}

.monitor .row {
    line-height: 1.05;
    padding: .5rem 1.5rem;
    color: #61a8ff;
    font-size: .5rem;
    position: relative;
    display: flex;
    justify-content: space-between
}

.monitor .row:hover {
    color: #68d8ff;
    background: rgba(255, 255, 255, .1)
}

.monitor .row:hover .icon-dot {
    opacity: 1
}

.monitor .icon-dot {
    position: absolute;
    left: .64rem;
    opacity: 0
}

.monitor .marquee-view {
    position: absolute;
    top: 1.6rem;
    bottom: 0;
    width: 100%;
    overflow: hidden
}

.monitor .row {
    line-height: 1.05;
    padding: .5rem 1.5rem;
    color: #61a8ff;
    font-size: .5rem;
    position: relative;
    display: flex;
    justify-content: space-between
}

.monitor .row:hover {
    color: #68d8ff;
    background: rgba(255, 255, 255, .1)
}

.monitor .row:hover .icon-dot {
    opacity: 1
}

.monitor .icon-dot {
    position: absolute;
    left: .64rem;
    opacity: 0
}

@keyframes {
    0% {}
    100% {
        transform: translateY(-50%)
    }
}

.monitor .marquee {
    animation: scroll-top 15s linear infinite
}

.monitor .marquee:hover {
    animation-play-state: paused
}

.point {
    height: 14.167rem
}

.point .chart {
    display: flex;
    margin-top: 1rem;
    justify-content: space-between
}

.point .pie {
    width: 13rem;
    height: 10rem;
    margin-left: -.4rem
}

.point .data {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 7rem;
    padding: 1.5rem 1.25rem;
    box-sizing: border-box;
    background-image: url(../images/rect.png);
    background-size: cover
}

.point h4 {
    margin-bottom: .5rem;
    font-size: 1.167rem;
    color: #fff
}

.point span {
    display: block;
    color: #4c9bfd;
    font-size: .667rem
}

.map {
    height: 24.1rem;
    margin-bottom: .833rem;
    display: flex;
    flex-direction: column
}

.map h3 {
    line-height: 1;
    padding: .667rem 0;
    margin: 0;
    font-size: .833rem;
    color: #fff
}

.map .icon-cube {
    color: #68d8fe
}

.map .chart {
    flex: 1;
    background-color: rgba(255, 255, 255, .05)
}

.map .geo {
    width: 100%;
    height: 100%
}

.users {
    height: 14.167rem;
    display: flex
}

.users .chart {
    display: flex;
    margin-top: 1rem
}

.users .bar {
    width: 24.5rem;
    height: 10rem
}

.users .data {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 7rem;
    padding: 1.5rem 1.25rem;
    box-sizing: border-box;
    background-image: url(../images/rect.png);
    background-size: cover
}

.users h4 {
    margin-bottom: .5rem;
    font-size: 1.167rem;
    color: #fff
}

.users span {
    display: block;
    color: #4c9bfd;
    font-size: .667rem
}

.order {
    height: 6.167rem
}

.order .filter {
    display: flex
}

.order .filter a {
    display: block;
    height: .75rem;
    line-height: 1;
    padding: 0 .75rem;
    color: #1950c4;
    font-size: .75rem;
    border-right: .083rem solid #00f2f1
}

.order .filter a:first-child {
    padding-left: 0
}

.order .filter a:last-child {
    border-right: none
}

.order .filter a.active {
    color: #fff;
    font-size: .833rem
}

.order .data {
    display: flex;
    margin-top: .833rem
}

.order .item {
    width: 50%
}

.order h4 {
    font-size: 1.167rem;
    color: #fff;
    margin-bottom: .417rem
}

.order span {
    display: block;
    color: #4c9bfd;
    font-size: .667rem
}

.sales {
    height: 10.333rem
}

.sales .caption {
    display: flex;
    line-height: 1
}

.sales h3 {
    height: .75rem;
    padding-right: .75rem;
    border-right: .083rem solid #00f2f1
}

.sales a {
    padding: .167rem;
    font-size: .667rem;
    margin: -.125rem 0 0 .875rem;
    border-radius: .125rem;
    color: #0bace6
}

.sales a.active {
    background-color: #4c9bfd;
    color: #fff
}

.sales .inner {
    display: flex;
    flex-direction: column
}

.sales .chart {
    flex: 1;
    padding-top: .6rem;
    position: relative
}

.sales .label {
    position: absolute;
    left: 1.75rem;
    top: .75rem;
    color: #4996f5;
    font-size: .583rem
}

.sales .line {
    width: 100%;
    height: 100%
}

.wrap {
    display: flex
}

.channel,
.quarter {
    flex: 1;
    height: 9.667rem
}

.channel {
    margin-right: .833rem
}

.channel .data {
    overflow: hidden
}

.channel .item {
    margin-top: .85rem
}

.channel .item:first-child {
    float: left
}

.channel .item:last-child {
    float: right
}

.channel h4 {
    color: #fff;
    font-size: 1.333rem;
    margin-bottom: .2rem
}

.channel small {
    font-size: 50%
}

.channel span {
    display: block;
    color: #4c9bfd;
    font-size: .583rem
}

.quarter .inner {
    display: flex;
    flex-direction: column;
    margin: 0 -.25rem
}

.quarter .chart {
    flex: 1;
    padding-top: .75rem
}

.quarter .box {
    position: relative
}

.quarter .label {
    transform: translate(-50%, -30%);
    color: #fff;
    font-size: 1.25rem;
    position: absolute;
    left: 50%;
    top: 50%
}

.quarter .label small {
    font-size: 50%
}

.quarter .gauge {
    height: 3.5rem
}

.quarter .data {
    display: flex;
    justify-content: space-between
}

.quarter .item {
    width: 50%
}

.quarter h4 {
    color: #fff;
    font-size: 1rem;
    margin-bottom: .4rem
}

.quarter span {
    display: block;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #4c9bfd;
    font-size: .583rem
}

.top {
    height: 11.8rem
}

.top .inner {
    display: flex
}

.top .all {
    display: flex;
    flex-direction: column;
    width: 7rem;
    color: #4c9bfd;
    font-size: .6rem;
    vertical-align: middle
}

.top .all ul {
    padding-left: .5rem;
    margin-top: .5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around
}

.top .all li {
    overflow: hidden
}

.top .all [class^=icon-] {
    font-size: 1.5rem;
    vertical-align: middle;
    margin-right: .5rem
}

.top .province {
    flex: 1;
    display: flex;
    flex-direction: column;
    color: #fff
}

.top .province i {
    padding: 0 .5rem;
    margin-top: .208rem;
    float: right;
    font-style: normal;
    font-size: .583rem;
    color: #0bace6
}

.top .province s {
    display: inline-block;
    transform: scale(.8);
    text-decoration: none
}

.top .province .icon-up {
    color: #dc3c33
}

.top .province .icon-down {
    color: #36be90
}

.top .province .data {
    flex: 1;
    display: flex;
    margin-top: .6rem
}

.top .province ul {
    flex: 1;
    line-height: 1;
    margin-bottom: .25rem
}

.top .province ul li {
    display: flex;
    justify-content: space-between
}

.top .province ul span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.top .province ul.sup {
    font-size: .583rem
}

.top .province ul.sup li {
    color: #4995f4;
    padding: .5rem
}

.top .province ul.sup li.active {
    color: #a3c6f2;
    background-color: rgba(10, 67, 188, .2)
}

.top .province ul.sub {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: .5rem;
    background-color: rgba(10, 67, 188, .2)
}

.top .province ul.sub li {
    color: #52ffff;
    padding: .417rem .6rem
}

.clock {
    position: absolute;
    top: -1.5rem;
    right: 1.667rem;
    font-size: .833rem;
    color: #0bace6
}

.clock i {
    margin-right: 5px;
    font-size: .833rem
}

@media screen and (max-width:1600px) {
    .top span {
        transform: scale(.9)
    }
    .top .province ul.sup li {
        padding: .4rem .5rem
    }
    .top .province ul.sub li {
        padding: .23rem .5rem
    }
    .quarter span {
        transform: scale(.9)
    }
}

3.JavaScript 

(function() {
    var setFont = function() {
        var html = document.documentElement;
        var width = html.clientWidth;
        if (width < 1024) {
            width = 1024;
        }
        if (width > 1920) {
            width = 1920;
        }
        var fontSize = width / 80 + 'px';
        html.style.fontSize = fontSize;
    }
    setFont();
    window.onresize = function() {
        setFont();
    }
})();
(function() {
    $('.monitor').on('click', '.tabs a', function() {
        $(this).addClass('active').siblings().removeClass('active');
        var index = $(this).attr('data-index');
        $('.content').eq(index).show().siblings('.content').hide();
    });
    $('.monitor .marquee').each(function() {
        var rows = $(this).children().clone();
        $(this).append(rows);
    });
})();
(function() {
    var myChart = echarts.init(document.querySelector('.pie'));
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [{
            name: '面積模式',
            type: 'pie',
            radius: ['10%', '70%'],
            center: ['50%', '50%'],
            roseType: 'area',
            data: [{
                value: 20,
                name: '雲南'
            }, {
                value: 26,
                name: '北京'
            }, {
                value: 24,
                name: '山東'
            }, {
                value: 25,
                name: '河北'
            }, {
                value: 20,
                name: '江蘇'
            }, {
                value: 25,
                name: '浙江'
            }, {
                value: 30,
                name: '四川'
            }, {
                value: 42,
                name: '湖北'
            }],
            labelLine: {
                length: 8,
                length2: 10,
            },
        }],
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
        label: {
            fontSize: 10
        },
    };
    myChart.setOption(option);
})();
(function() {
    var item = {
        name: '',
        value: 1200,
        itemStyle: {
            color: '#254065'
        },
        emphasis: {
            itemStyle: {
                color: '#254065'
            }
        },
        tooltip: {
            extraCssText: 'opacity:0'
        }
    }
    var option = {
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'line'
            }
        },
        grid: {
            top: '6%',
            right: '3%',
            bottom: '3%',
            left: '0%',
            containLabel: true,
            show: true,
            borderColor: 'rgba(0, 240, 255, 0.3)'
        },
        xAxis: [{
            type: 'category',
            data: ['上海', '廣州', '北京', '深圳', '合肥', '', '......', '', '杭州', '廈門', '濟南', '成都', '重慶'],
            axisTick: {
                alignWithLabel: true,
                alignWithLabel: false,
                show: false
            },
            axisLabel: {
                color: '#4c9bfd'
            }
        }],
        yAxis: [{
            type: 'value',
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#4c9bfd'
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(0, 240, 255, 0.3)'
                }
            }
        }],
        series: [{
            name: '直接通路',
            type: 'bar',
            barWidth: '60%',
            data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240],
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'red'
                }, {
                    offset: 1,
                    color: 'blue'
                }])
            }
        }]
    };
    var myChart = echarts.init(document.querySelector('.bar'));
    myChart.setOption(option);
})();
(function() {
    var data = {
        day365: {
            orders: '20,301,987',
            amount: '99834'
        },
        day90: {
            orders: '301,987',
            amount: '9834'
        },
        day30: {
            orders: '1,987',
            amount: '3834'
        },
        day1: {
            orders: '987',
            amount: '834'
        }
    }
    var h4orders = $('.order .data h4:eq(0)');
    var h4amount = $('.order .data h4:eq(1)');
    $('.order').on('click', '.filter a', function() {
        $(this).addClass('active').siblings().removeClass('active');
        var key = $(this).attr('data-key');
        var val = data[key];
        h4orders.html(val.orders);
        h4amount.html(val.amount);
    });
    var index = 0;
    window.setInterval(function() {
        index++;
        if (index > 3) {
            index = 0;
        }
        $('.order .filter a').eq(index).click();
    }, 1000);
})();
(function() {
    var option = {
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#4c9bfd'
            },
            axisLine: {
                show: false
            },
            boundaryGap: false
        },
        yAxis: {
            type: 'value',
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#4c9bfd'
            },
            splitLine: {
                lineStyle: {
                    color: '#012f4a'
                }
            }
        },
        series: [{
            name: '預期銷售額',
            data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            type: 'line',
            smooth: true,
            itemStyle: {
                color: '#00f2f1'
            }
        }, {
            name: '實際銷售額',
            data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
            type: 'line',
            smooth: true,
            itemStyle: {
                color: '#ed3f35'
            }
        }],
        grid: {
            show: true,
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            borderColor: '#012f4a',
            containLabel: true
        },
        legend: {
            textStyle: {
                color: '#4c9bfd'
            },
            right: '10%'
        },
    };
    var myChart = echarts.init(document.querySelector('.line'))
    myChart.setOption(option);
    var data = {
        year: [
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
        ],
        quarter: [
            [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
            [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
        ],
        month: [
            [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
            [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
        ],
        week: [
            [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
            [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
        ]
    }
    $('.sales').on('click', '.caption a', function() {
        $(this).addClass('active').siblings('a').removeClass('active');
        var arr = data[$(this).attr('data-type')];
        option.series[0].data = arr[0];
        option.series[1].data = arr[1];
        myChart.setOption(option);
    });
    var index = 0;
    var dsq = window.setInterval(function() {
        index++;
        if (index > 3) {
            index = 0;
        }
        $('.sales .caption a').eq(index).click();
    }, 1000);
    $('.line').mouseenter(function() {
        window.clearInterval(dsq);
    });
    $('.line').mouseleave(function() {
        dsq = window.setInterval(function() {
            index++;
            if (index > 3) {
                index = 0;
            }
            $('.sales .caption a').eq(index).click();
        }, 1000);
    });
})();
(function() {
    var option = {
        series: [{
            type: 'pie',
            radius: ['130%', '150%'],
            center: ['48%', '80%'],
            label: {
                show: false,
            },
            startAngle: 180,
            hoverOffset: 0,
            data: [{
                value: 100
            }, {
                value: 100,
            }, {
                value: 200,
                itemStyle: {
                    color: 'transparent'
                }
            }]
        }]
    };
    var myChart = echarts.init(document.querySelector('.gauge'));
    myChart.setOption(option);
})();
(function() {
    var data = [{
        name: '可愛多',
        num: '9,086'
    }, {
        name: '娃哈哈',
        num: '8,341'
    }, {
        name: '喜之郎',
        num: '7,407'
    }, {
        name: '八喜',
        num: '6,080'
    }, {
        name: '小洋人',
        num: '6,724'
    }, {
        name: '好多魚',
        num: '2,170'
    }, ];
    $('.province').on('mouseenter', '.sup li', function() {
        $(this).addClass('active').siblings().removeClass('active');
        var randomDate = data.sort(function() {
            return 0.5 - Math.random()
        });
        var html = '';
        randomDate.forEach(function(val) {
            html += `<li><span>${val.name}</span><span>${val.num}<s class="icon-up"></s></span></li>`;
        });
        $('.province .sub').html(html);
    });
    $('.province .sup li').eq(0).mouseenter();
    var index = 0;
    window.setInterval(function() {
        index++;
        if (index > 4) {
            index = 0;
        }
        $('.province .sup li').eq(index).mouseenter();
    }, 1000);
})();

五、更多幹貨

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

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

​一鍵三連哦！

echarts 大屏可視化 大資料 vue web前端
上一篇: 信鴿推送內建
下一篇: Markup之xml生成

繼續閱讀