echarts实现水质监控大数据大屏看板效果代码
代码语言：html
所属分类：图表
代码描述：echarts实现水质监控大数据大屏看板效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*{
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%;
}
</style>
</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 type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.4.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echart-china.js"></script>
<script type="text/javascript" >
$(function(){
map();
leidatu();
wuran();
huaxing();
zhexian();
function leida1(){
var myChart = echarts.init(document.getElementById('map'));
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
})
function map(){
var myChart = echarts.init(document.getElementById('map'));
let iconRQ = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAUCAYAAABiS3YzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNCRkRBMEJBQzgwRjExRUFBNUI0RTMyMThEN0UxMzFEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNCRkRBMEJCQzgwRjExRUFBNUI0RTMyMThEN0UxMzFEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0JGREEwQjhDODBGMTFFQUE1QjRFMzIxOEQ3RTEzMUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0JGREEwQjlDODBGMTFFQUE1QjRFMzIxOEQ3RTEzMUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5mT42iAAABQ0lEQVR42mL8LabOQCQIBOL1xChkItJAkLp+IBajpqFWQCwPxJ7UNDQCSgdQy1BmIA6Bsl2AmJMahjoAsTiUzQPETtQwNAKN709IAwvUayZQ/hcg/o0k/x6Ig9D0+ABxKJT9HYh/oMm/BBm6GYitgTgfiBmJcLkkEK/CIXcGiGNB3v8JxIVQF31gIA/8AeIWaNK7gRymG4BYH4hPkGjgXSC2A+JaWNChR9QjqIJeIP5PhIGzgdgAiI8Tin2QbSVAvIOAgROBOA0auUQlKV4gtidgqBGp6RSUFrmIKA/ESDEUPcGfBOIUIH6Lln29iTVUCIjdkJJKExDbAPFcqJdPEMpd2AwF5TBWaFKxBeJ6qOHIqaMbmjrcsBUw2AwNh7rKAEeaBaWOMiD2BeJvQOxOyFBuaFJJwZZU0MBWaHCIo0sABBgAetA4Jx5t/ToAAAAASUVORK5CYII="
let data = [{
name: "质量1",
value: [116.24, 39.55, 100]
},
{
name: "质量1",
value: [114.271522, 22.753644]
},
{
name: "质量1",
value: [106.54, 29.59]
},
{
name: "质量1",
value: [120.19, 30.26]
},
{
name: "质量1",
value: [121.4648, 31.2891]
},
]
let LableData = [
{
name: "质量1",
coords: [
[116.24, 39.55, 100],
[120.24, 46.55, 100]
],
value: [1021, 120]
},
{
name: "质量1",
coords: [
[114.271522, 22.753644],
[118.24, 18.55, 100]
],
value: [1021, 120]
},
{
name: "质量1",
coords: [
[106.54, 29.59],
[104.24, 35.55]
],
value: [1021, 120]
},
{
name: "质量1",
coords: [
[120.19, 30.26],
[125.24, 27.55, 100]
],
value: [1021, 120]
},
{
name: "质量1",
coords: [
[121.4648, 31.2891],
[122.4648, 32.2891]
],
value: [1201, 60]
},
];
option = {
/*backgroundColor: '#000f1e',*/
geo: {
map: 'china',
aspectScale: 0.85,
layoutCenter: ["50%", "50%"],
layoutSize: '100%',
itemStyle: {
normal: {
shadowColor: '#276fce',
shadowOffsetX: 0,
shadowOffsetY: 15,
opacity: 0.5,
},
emphasis: {
areaColor: '#276fce',
}
},
regions: [{
name: "质量1",
itemStyle: {
areaColor: 'rgba(0, 10, 52, 1)',
borderColor: 'rgba(0, 10, 52, 1)',
normal: {
opacity: 0,
label: {
show: false,
color: "#009cc9",
}
},
},
label: {
show: false,
color: '#FFFFFF',
fontSize: 12,
},
}],
},
series: [
{
type: 'map',
mapType: 'china',
aspectScale: 0.85,
layoutCenter: ["50%", "50%"],
layoutSize: '100%',
zoom: 1,
scaleLimit: {
min: 1,
max: 2
},
itemStyle: {
normal: {
areaColor: '#0c274b',
borderColor: '#1cccff',
borderWidth: 1.5
},
emphasis: {
areaColor: '#02102b',
label: {
color: "#fff"
}
}
},
},
{
name: "质量1",
type: 'scatter',
coordinateSystem: 'geo',
data: [{
name: "质量1",
value: [116.24, 41.55, 100],
}, ],
symbol: iconRQ,
symbolSize: 20,
label: {
normal: {
show: false,
},
emphasis: {
show: false
}
},
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
symbolSize: 10,
rippleEffect: {
period: 3,
scale: 5,
brushType: 'fill'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}',
color: '#b3e2f2',
fontWeight: "bold",
fontSize: 16
}
},
data: data,
itemStyle: {
normal: {
show: true,
color: '#ff8003',
shadowBlur: 20,
shadowColor: '#fff'
},
emphasis: {
areaColor: '#f00'
}
},
},
/*{
name: 'lable',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: [50,50],
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
fontSize: 9,
},
formatter (value){
return value.data.value[1]
}
}
},
itemStyle: {
normal: {
color: '#D8BC37',
}
},
data: data,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
zlevel: 1
},*/
{
type: 'lines',
zlevel: 3,
symbol: 'circle',
symbolSize: [5, 5],
color: '#ff8003',
opacity: 1,
label: {
show: true,
padding: [10, 20],
color: '#fff',
backgroundColor: "#1a3961",
borderColor: '#aee9fb',
borderWidth: 1,
borderRadius: 6,
formatter(params) {
let arr = [params.name, "水质" + params.value[1] + "打标", "比率" + params.value[0] + "%"];
return arr.join("\n")
},
textStyle: {
align: 'left',
lineHeight: 20,
}
/* normal: {
textStyle: {
color: '#fff',
fontSize: 9,
},
formatter (value){
return value.data.value[2]
},
}*/
},
lineStyle: {
type: 'solid',
color: '#fff',
width: 0.5,
opacity: 1,
},
data: LableData,
},
]
};
myChart.on('click', function(params) {
console.log(params);
});
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0