前言
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【作者主页——🔥获取更多优质源码】
❤ 【1000套 毕设项目精品实战案例】
❤ 【 20套 VUE+Echarts 大数据可视化源码】
❤ 【150套 HTML+ Echarts大数据可视化源码 】
文章目录
前言一、Echart是什么二、ECharts入门教程三、作品演示四、代码实现1.HTML2.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水质监测数据可视化模板 </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.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥
