基于Echarts实现可视化数据大屏水质情况实时监测预警系统
生活随笔
收集整理的這篇文章主要介紹了
基于Echarts实现可视化数据大屏水质情况实时监测预警系统
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言
🚀 基于 Echarts 實現可視化數據大屏響應式展示效果的源碼,，基于html+css+javascript+echarts制作， 可以在此基礎上重新開發。
本項目中使用的是echarts圖表庫，ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統計的盒形圖，用于地理數據可視化的地圖、熱力圖、線圖，用于關系數據可視化的關系圖、treemap、旭日圖，多維數據可視化的平行坐標，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。
?精彩專欄推薦👇🏻👇🏻👇🏻
? 【作者主頁——🔥獲取更多優質源碼】
? 【1000套 畢設項目精品實戰案例】
? 【 20套 VUE+Echarts 大數據可視化源碼】
? 【150套 HTML+ Echarts大數據可視化源碼 】
文章目錄
- 前言
- 一、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 lang="en"> <head><meta charset="UTF-8"><title>echarts水質監測數據可視化模板 www.bootstrapmb.com</title><link rel="stylesheet" href="css/index.css"></head> <body><div class="content-body"><div class="header"><div class="header-left"><span>水質情況實時監測預警系統</span></div><div class="header-time"><span id="time"></span></div></div><div class="content"><div class="content-con"><div class="left-body"><div class="left-top public-bg"><div class="public-title">重點水質量檢測區</div><div class="top-body"><div class="top-left"><div class="top-left-title"><h6>注水量</h6><span><b>1756</b>m3/h</span><img src="image/pictre.png" alt=""></div></div><div class="top-right"><div class="top-left-title"><h6>泄水量</h6><span><b>3520</b>m3/h</span><img src="image/pictre.png" alt=""></div></div></div></div><div class="left-con public-bg"><div class="public-title">水質量分布情況</div><div class="title-nav" id="leida"></div></div><div class="left-bottom public-bg"><div class="public-title">企業污染排放情況</div><div class="title-nav" id="wuran"></div></div></div><div class="center-body"><div class="map" id="map"></div></div><div class="right-body"><div class="right-top public-bg"><div class="public-title">水質污染TOP5</div><div class="title-nav"><div class="top5-ul"><ul><li><span>1</span><span>嚴重</span><span>北京市</span><span>房山區</span><span>重度污染</span><span>15公里</span></li><li><span>2</span><span>嚴重</span><span>上海市</span><span>閔行區</span><span>重度污染</span><span>10公里</span></li><li><span>3</span><span>嚴重</span><span>北京市</span><span>朝陽區</span><span>重度污染</span><span>9.3公里</span></li><li><span>4</span><span>中度</span><span>廣東省</span><span>廣州市</span><span>中度污染</span><span>8.6公里</span></li><li><span>5</span><span>中度</span><span>浙江省</span><span>杭州市</span><span>中度污染</span><span>6.6公里</span></li></ul></div></div></div><div class="right-con public-bg"><div class="public-title">水質類別占比</div><div class="title-nav" id="huaxing"></div></div><div class="right-bottom public-bg"><div class="public-title">主要地區水流量</div><div class="title-nav" id="zhexian"></div></div></div></div></div> </div></body> </html><script src="js/echarts.min.js"></script> <script src="js/jquery.min.js"></script> <script type="text/javascript" src="js/china.js"></script> <script type="text/javascript" src="js/index.js"></script><script>//頂部時間function getTime(){var myDate = new Date();var myYear = myDate.getFullYear(); //獲取完整的年份(4位,1970-????)var myMonth = myDate.getMonth()+1; //獲取當前月份(0-11,0代表1月)var myToday = myDate.getDate(); //獲取當前日(1-31)var myDay = myDate.getDay(); //獲取當前星期X(0-6,0代表星期天)var myHour = myDate.getHours(); //獲取當前小時數(0-23)var myMinute = myDate.getMinutes(); //獲取當前分鐘數(0-59)var mySecond = myDate.getSeconds(); //獲取當前秒數(0-59)var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];var nowTime;nowTime = myYear+'年'+fillZero(myMonth)+'月'+fillZero(myToday)+'日'+' '+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+' '+week[myDay]+' ';//console.log(nowTime);$('#time').html(nowTime);};function fillZero(str){var realNum;if(str<10){realNum = '0'+str;}else{realNum = str;}return realNum;}setInterval(getTime,1000); </script>2.CSS
*{margin: 0;padding: 0; } body{width: 100%;height: 100%;overflow: auto; } .public-bg{background: rgba(12,26,63,0.3); }.public-title{width: calc(100% - 20px);height: 30px;position: relative;top: 0;left: 5px;color: white;padding-left: 16px;line-height: 30px;font-size: 13px; } .public-title:before{width: 4px;height: 20px;top: 5px;position: absolute;content: "";background: #2997e4;border-radius: 2px;left: 5px; }.content-body{width: 100%;height: 100%;background: #0d325f;background-size: 100% 100%;position: absolute;}.header{height: 70px;width: 100%; /* border: 1px solid red;*/ } .header .header-left{width: 50%;float: left;line-height: 70px;} .header .header-left span{color: #ffffff;font-weight: bold;font-size: 24px;letter-spacing:2px;padding: 0 20px; } .header .header-time{width: 48%;line-height: 70px;float: right;text-align: right;padding-right: 20px; } .header .header-time span{color: #ffffff;} .content{width: 100%;height: calc(100% - 75px);position: absolute; } .content .content-con{height: 100%; } .content .content-con .left-body{width: 22%;height: 100%;float: left;margin:0 0.3%; } .left-body .left-top{width: 100%;height: 27%; } .left-body .left-top .top-body{width: 100%;height: calc(100% - 30px); } .left-body .left-top .top-body .top-left{float: left;width: 50%;height: 100%; }.top-left-title{width: 100%;height: 100%;padding: 30px;box-sizing: border-box; }.top-left-title h6{color: #bad0e2; } .top-left-title span{margin-top: 30px;display: inline-block;color: #2aa4f1;/* height: 80px;line-height: 80px;*/ }.top-left-title span b{font-size: 30px;letter-spacing:5px; } .top-left-title img{width: 80%; } .left-body .left-top .top-body .top-right{float: left;width: 50%;height: 100%; } .left-body .left-con{width: 100%;height: 38%;margin-top: 1.6%; } .title-nav{width: 100%;height: calc(100% - 30px); } .left-body .left-bottom{width: 100%;height: 32%;margin-top: 1.6%; }.center-body{width: 54%;height: 100%;margin:0 0.3%;float: left;/*border: 1px solid red;*/ } .center-body .map{width: 100%;height: 100%; } .right-body{width: 22%;height: 100%;float: right;margin:0 0.3%; }.right-body .right-top{width: 100%;height: 32%; } .title-nav .top5-ul{width: calc(100% - 20px);height: calc(100% - 30px);padding: 10px; } .title-nav .top5-ul ul{width: 100%;height: 100%; } .title-nav .top5-ul ul,li{list-style: none; } .title-nav .top5-ul ul>li{width: 100%;height: 20%;color: #ffffff;line-height: 68px;justify-content: center; } .title-nav .top5-ul ul li span{margin-left: 3%;font-size: 14px; } .title-nav .top5-ul ul li span:nth-child(1){color: #EB6841;font-style: oblique;/*width: 10%;*//*#20a8fe#EB6841#3FB8AF#FE4365#FC9D9A*/display: inline-block;text-align: center;font-size: 20px; }.title-nav .top5-ul ul li span:nth-child(2){width: 10%;display: inline-block;text-align: center;height: 30px;line-height: 30px; /* height: 100%;*//*line-height: 100%;*/vertical-align: center;border-radius: 5px;color: #ffffff; } .title-nav .top5-ul ul li:nth-child(1) span:nth-child(2),.title-nav .top5-ul ul li:nth-child(2) span:nth-child(2) ,.title-nav .top5-ul ul li:nth-child(3) span:nth-child(2){background: #d89346; } .title-nav .top5-ul ul li:nth-child(4) span:nth-child(2) ,.title-nav .top5-ul ul li:nth-child(5) span:nth-child(2){background: #1db5ea; } .title-nav .top5-ul ul li span:nth-child(3){/*width: 15%;*/display: inline-block;text-align: center; } .title-nav .top5-ul ul li span:nth-child(4){/*width: 15%;*/display: inline-block;text-align: center; } .title-nav .top5-ul ul li span:nth-child(5){/*width: 20%;*/display: inline-block;text-align: center; } .title-nav .top5-ul ul li span:nth-child(6){display: inline-block;text-align: center; } .right-body .right-con{width: 100%;height: 25%;margin-top: 2%; } .right-body .right-bottom{width: 100%;height: 39%;margin-top: 2%; }五、更多干貨
1.如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.【👇🏻👇🏻👇🏻關注我| 獲取更多源碼 | 優質文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、期末大作業模板 、Echarts大數據可視化, 等! 「一起探討 web前端 ,Node ,Java 知識，互相學習」！
3.以上內容技術相關問題😈歡迎一起交流學習👇🏻👇🏻👇🏻🔥
總結
以上是生活随笔為你收集整理的基于Echarts实现可视化数据大屏水质情况实时监测预警系统的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 频率及占空比检测
- 下一篇： 【vue期末作业】化妆品商城系统