前言
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【150套 HTML+ 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">
<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.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
