天天看點
傳回

基于Echarts實作可視化資料大屏觀測站綜合監控平台

前言

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

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

​

文章目錄

  • ​​前言​​
  • ​​一、Echart是什麼​​
  • ​​二、ECharts入門教程​​
  • ​​三、作品示範​​
  • ​​四、代碼實作​​
  • ​​1.HTML​​
  • ​​2.CSS​​
  • ​​3.JavaScript​​
  • ​​4.Echarts​​
  • ​​五、更多幹貨​​

一、Echart是什麼

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

二、ECharts入門教程

三、作品示範

四、代碼實作

1.HTML 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/scroll.css">
    <link rel="stylesheet" href="css/histor.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/date.css">

    <script src="js/shipei.js"></script>
    <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
    <script type="text/javascript" src="https://developer.baidu.com/map/custom/stylelist.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=fbXf9j0aPH4EwxPBaixZ8Ll2rGwMbFe8"></script>
</head>

<body>
    <div class="bg">

        <div class="header">
            <span class="header-title">觀測站</span>
            <span class="header-text">綜合監控平台</span>
        </div>

        <div class="wrap">

            <div class="left fl">
                <div class="left-header">
                    <span>農氣站線上情況</span>
                    <div id="left-header-nong" style="width: 100%;height: 100%;" class="left-header-nong"></div>
                </div>
                <div class="left-mid">
                    <span>按觀測作物分類</span>
                    <div id="left-mid-nong" style="width: 100%;height: 100%;" class="left-header-nong"></div>
                </div>
                <div class="left-bottom">
                    <span>農業小氣候站</span>
                    <div id="left-bottom-nong" style="width: 100%;height: 100%;" class="left-header-nong"></div>
                </div>
            </div>

            <div class="center fl">

                <div class="center-map">
                    <div id="allmap" style="width:100%;height:100%;"></div>
                </div>

                <div class="center-offline">
                    <div class="center-offline-header">
                        <p>離線站點清單</p>
                    </div>
                    <div class="center-offline-mid">
                        <div class="title">
                            <div class="sit sit-title fl">站名</div>
                            <div class="sit sit-title fl">站号</div>
                            <div class="sit sit-title fl">狀态</div>
                            <div class="sit sit-title fl">電話</div>
                        </div>

                        <div class="list" id="list">
                            <div class="rowup" id="rowup">
                                <ul class="list-item">
                                    <li class="fl sit-item">L0044</li>
                                    <li class="fl sit-item">無錫市黃瓜</li>
                                    <li class="fl sit-item">離線</li>
                                    <li class="fl sit-item">12345678984</li>
                                </ul>
                                <ul class="list-item">
                                    <li class="fl sit-item">L0044</li>
                                    <li class="fl sit-item">東陽台村種植園</li>
                                    <li class="fl sit-item">離線</li>
                                    <li class="fl sit-item">12345678984</li>
                                </ul>
                                <ul class="list-item">
                                    <li class="fl sit-item">L0044</li>
                                    <li class="fl sit-item">山東院内</li>
                                    <li class="fl sit-item">離線</li>
                                    <li class="fl sit-item">12345678984</li>
                                </ul>
                                <ul class="list-item">
                                    <li class="fl sit-item">L0044</li>
                                    <li class="fl sit-item">山東農氣站</li>
                                    <li class="fl sit-item">離線</li>
                                    <li class="fl sit-item">12345678984</li>
                                </ul>
                            </div>
                            <div class="rowupcope" id="rowupcope"></div>
                        </div>
                    </div>
                    <div class="center-offline-bottom">
                        <p>研制：科技有限公司   研制：科技有限公司</p>
                    </div>
                </div>
            </div>

            <div class="right fr">
                <span class="right-title">站點詳情</span>
                <div class="right-top">
                    <div class="right-top-content">
                        <span class="name">站名:</span>
                        <span class="text">觀測站</span>
                    </div>
                    <div class="right-top-content">
                        <span class="name">編号:</span>
                        <span class="text">LOO33</span>
                    </div>
                    <div class="right-top-content">
                        <span class="name">位址:</span>
                        <span class="text">觀測站</span>
                    </div>
                    <div class="right-top-content">
                        <span class="name">觀測作物:</span>
                        <span class="text">蕃茄</span>
                    </div>
                </div>
                <div class="right-mid">
                    <div class="right-mid-header">
                        實時資料
                    </div>
                    <div class="right-mid-scroll">
                        <div class="right-mid-content">
                            <div class="right-top-content">
                                <span class="name">要素數:</span>
                                <span class="text">7</span>
                            </div>
                            <div class="right-top-content">
                                <span class="name">觀測時間:</span>
                                <span class="text">2020-03-16 10:40:00</span>
                            </div>
                            <div class="right-top-content">
                                <span class="name">150cm氣溫:</span>
                                <span class="text">33.4℃</span>
                            </div>
                            <div class="right-top-content">
                                <span class="name">150cm空氣相對濕度</span>
                                <span class="text">48.7%</span>
                            </div>
                            <div class="right-top-content">
                                <span class="name">5cm低溫：</span>
                                <span class="text">0.0℃</span>
                            </div>
                            <div class="right-top-content">
                                <span class="name">10cm低溫：</span>
                                <span class="text">18.1℃</span>
                            </div>
                            <div class="right-top-content">
                                <span class="name">20cm低溫:</span>
                                <span class="text">18.0℃</span>
                            </div>
                            <div class="right-top-content">
                                <span class="name">10cm土壤相對濕度:</span>
                                <span class="text">46.3℃</span>
                            </div>
                            <div class="right-top-content">
                                <span class="name">20cm土壤相對濕度:</span>
                                <span class="text">46.3℃</span>
                            </div>
                        </div>
                    </div>
                    <a href="javascript:;" class="history" id="triggerBtn">檢視曆史記錄</a>
                </div>
                <div class="right-bottom">
                    <div class="right-mid-header">
                        實時監控
                    </div>
                    <div class="right-bottom-content">
                        <img src="./img/jiankong.png" alt="">
                    </div>
                    <a href="javascript:;" class="history-pic" id="triggerBtnpic">檢視曆史圖檔</a>
                </div>
            </div>
        </div>
    </div>

    <div id="myModal" class="modal">
        <div class="modal-content">
            <div class="model-header">檢視曆史記錄</div>
            <div class="see">
                <div class="from fl">
                    <div class="line fl">
                        <span>站名：</span>
                        <select name="name" id="" class="line-content">
<option value="">蕃茄觀測站</option>
</select>
                    </div>
                    <div class="line fl">
                        <span>要素：</span>
                        <select name="name" id="" class="line-content">
<option value="">7</option>
</select>
                    </div>
                    <div class="line fl">
                        <span>開始時間:</span>
                        <input type="text" name="date" id="date" lay-verify="date" placeholder="" autocomplete="off" class="line-content" />
                    </div>
                    <div class="line fl">
                        <span>結束時間:</span>
                        <input type="text" name="date" id="date1" lay-verify="date" placeholder="" autocomplete="off" class="line-content" />
                    </div>
                </div>
                <div class="see-right fr">
                    <div class="submit fr">
                        <input type="button" class="button" value="導出">
                    </div>
                    <div class="submit fr query">
                        <input type="button" class="button" value="查詢">
                    </div>
                </div>
            </div>
            <div class="date">
                <div class="date-content" id="date-content-wrap">
                    <div id="data-content-line" style="width: 100%;height: 98%;" class="data-content-line"></div>
                </div>
            </div>
            <div id="closeBtn" class="close">X</div>
        </div>
    </div>

    <div id="myModalpic" class="modalpic">
        <div class="modal-content">
            <div class="model-header">檢視曆史圖檔</div>
            <div class="see">
                <div class="from fl">
                    <div class="line fl">
                        <span>站名：</span>
                        <select name="name" id="" class="line-content">
<option value="">蕃茄觀測站</option>
</select>
                    </div>
                    <div class="line fl">
                        <span>要素：</span>
                        <select name="name" id="" class="line-content">
<option value="">7</option>
</select>
                    </div>
                    <div class="line fl">
                        <span>開始時間:</span>
                        <input type="text" name="date" id="date2" lay-verify="date" placeholder="" autocomplete="off" class="line-content" />
                    </div>
                    <div class="line fl">
                        <span>結束時間:</span>
                        <input type="text" name="date" id="date3" lay-verify="date" placeholder="" autocomplete="off" class="line-content" />
                    </div>
                </div>
                <div class="see-right fr">
                    <div class="submit fr querypic">
                        <input type="button" class="button" value="查詢">
                    </div>
                </div>
            </div>

            <div class="date">
                <div class="data-contentpic">
                    <div class="date-content-pic fl">
                        <img src="./img/lishitupian.jpg" alt="">
                    </div>
                    <div class="date-content-pic fl">
                        <img src="./img/lishitupian.jpg" alt="">
                    </div>
                    <div class="date-content-pic fl">
                        <img src="./img/lishitupian.jpg" alt="">
                    </div>
                    <div class="date-content-pic fl">
                        <img src="./img/lishitupian.jpg" alt="">
                    </div>
                    <div class="date-content-pic fl">
                        <img src="./img/lishitupian.jpg" alt="">
                    </div>
                    <div class="date-content-pic fl">
                        <img src="./img/lishitupian.jpg" alt="">
                    </div>
                    <div class="date-content-pic fl">
                        <img src="./img/lishitupian.jpg" alt="">
                    </div>
                    <div class="date-content-pic fl">
                        <img src="./img/lishitupian.jpg" alt="">
                    </div>
                </div>
            </div>
            <div id="closeBtnpic" class="close">X</div>
        </div>
    </div>
    </div>
</body>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/bar.js"></script>
<script src="js/pie.js"></script>
<script src="js/pinhuan.js"></script>
<script src="js/map.js"></script>
<script type="text/javascript" src="js/InfoBox.js"></script>
<script src="js/histroy.js"></script>
<script src="js/histroyline.js"></script>
<script src="layui/layui.js"></script>
<script src="js/date.js"></script>
<script src="js/gundong.js"></script>

</html>

2.CSS 

/*css reset*/

/*清除内外邊距*/

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
hr,
/*結構元素*/

ul,
ol,
li,
dl,
dt,
dd,
/*清單元素*/

form,
fieldset,
legend,
input,
button,
select,
textarea,
/*表單元素*/

th,
td,
/*表格元素*/

pre {
    padding: 0;
    margin: 0;
}

/*重置預設樣式*/

body,
button,
input,
select,
textarea {
    /*font: 12px/1 微軟雅黑, Tahoma, Helvetica, Arial, 宋體, sans-serif;*/
    color: #333;
    font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
}

em,
i {
    font-style: normal;
}

a {
    text-decoration: none;
}

li {
    list-style-type: none;
    vertical-align: top;
}

img {
    border: none;
    /*display: block;*/
    vertical-align: top;
}

textarea {
    overflow: auto;
    resize: none;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
}

/*常用公共樣式*/

.fl {
    float: left;
    display: inline;
}

.fr {
    float: right;
    display: inline;
}

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

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

html {
    overflow-x: hidden;
}

3.JavaScript 

(function() {
    'use strict';
    var modalBox = {};
    modalBox.modal = document.getElementById("myModal");
    modalBox.modalpic = document.getElementById("myModalpic");
    modalBox.triggerBtn = document.getElementById("triggerBtn");
    modalBox.triggerBtnpic = document.getElementById('triggerBtnpic')
    modalBox.closeBtn = document.getElementById("closeBtn");
    modalBox.closeBtnpic = document.getElementById("closeBtnpic");
    modalBox.show = function() {
        $("#data-content-line").load(location.href + "#data-content-line");
        this.modal.style.display = "block";
    }
    modalBox.showpic = function() {
        $('#myModalpic').show();
    }
    modalBox.close = function() {
        this.modal.style.display = "none";
    }
    modalBox.closepic = function() {
        $('#myModalpic').hide();
    }
    modalBox.init = function() {
        var that = this;
        this.triggerBtn.onclick = function() {
            that.show();
        }
        this.triggerBtnpic.onclick = function() {
            that.showpic();
        }
        this.closeBtn.onclick = function() {
            that.close();
        }
        this.closeBtnpic.onclick = function() {
            that.closepic();
        }
    }
    modalBox.init();
})()

4.Echarts 

(function() {
    'use strict';
    var myChart = echarts.init(document.getElementById('left-mid-nong'));

    // 指定圖表的配置項和資料
    var option = {
        tooltip: {},
        legend: [{
                // 設定布局方向
                orient: 'vertical',
                // 文字和圖形對齊方式
                align: 'left',
                right: '25%',
                top: '10%',
                // 圖形形狀
                icon: 'circle',
                padding: [20, 0, 0, 0],
                itemGap: 20,
                textStyle: {
                    borderRadius: 100,
                    color: '#fff'
                },
                data: ["荔枝", '黃瓜', "白菜", "蘑菇", "草莓"]
            },
            {
                orient: 'vertical',
                right: '6%',
                top: '10%',
                padding: [20, 0, 0, 0],
                itemGap: 20,
                // 文字和圖形對齊方式
                align: 'left',
                // 圖形形狀
                icon: 'circle',
                textStyle: {
                    borderRadius: 100,
                    color: '#fff'
                },
                data: ["南果梨", "大蔥", "西瓜", "花生", "棚"]
            }
        ],
        series: [{
            name: '銷量',
            type: 'pie',
            radius: '50%',
            right: '40%',
            bottom: '10%',
            data: [{
                    value: 200,
                    name: '荔枝'
                },
                {
                    value: 156,
                    name: '黃瓜'
                },
                {
                    value: 400,
                    name: '白菜'
                },
                {
                    value: 991,
                    name: '蘑菇'
                },
                {
                    value: 332,
                    name: '草莓'
                },
                {
                    value: 100,
                    name: '南果梨'
                },
                {
                    value: 455,
                    name: '大蔥'
                },
                {
                    value: 378,
                    name: '西瓜'
                },
                {
                    value: 230,
                    name: '花生'
                },
                {
                    value: 50,
                    name: '棚'
                }
            ]
        }]
    };

    // 使用剛指定的配置項和資料顯示圖表。
    myChart.setOption(option);
    window.addEventListener('resize', function() {
        myChart.resize();
    })


})()
echarts 大屏可視化 大資料 vue web前端
上一篇: php對象在記憶體中的配置設定
下一篇: Eigen so3 and se3

繼續閱讀