echarts实现不断变化的大屏大数据可视化看板代码-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：echarts实现不断变化的大屏大数据可视化看板代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1.2, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.5.3.3.js"></script>
  <style>
@charset "utf-8";
/* CSS Document */
*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box}
*,body{padding:0px;	margin:0px; }
body{ background: linear-gradient(25deg, #0f2249,#182e5a 20%,#0f2249 40%,#182e5a 60%,#0f2249 80%,#182e5a 100%);color:#fff; font-family:"PingFang SC","Lantinghei SC","Microsoft YaHei","HanHei SC","Helvetica Neue","Open Sans",Arial,"Hiragino Sans GB","等线",STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif; }
li{ list-style-type:none;}
table{}
i{ margin:0px; padding:0px; text-indent:0px;}
img{ border:none; max-width: 100%;}
a{ text-decoration:none; color:#399bff;}
a.active,a:focus{ outline:none!important; text-decoration:none;}
ol,ul,p,h1,h2,h3,h4,h5,h6{ padding:0; margin:0}
a:hover{ color:#06c; text-decoration: none!important}
i,em{font-style: normal;}

.clearfix:after, .clearfix:before {
	display: table;
	content: " "
}
 .clearfix:after {
	clear: both
}
.pulll_left{float:left;}
.pulll_right{float:right;}
/*谷哥滚动条样式*/
  ::-webkit-scrollbar {width:5px;height:5px;position:absolute}
  ::-webkit-scrollbar-thumb {background-color:#5bc0de}
  ::-webkit-scrollbar-track {background-color:#ddd}
/***/
/* .loading{position:fixed; left:0; top:0; font-size:.3rem; z-index:100000000;width:100%; height:100%; background:#1a1a1c; text-align:center;}
.loadbox{position:absolute; width:160px;height:150px; color: #324e93; left:50%; top:50%; margin-top:-100px; margin-left:-75px;}
.loadbox img{ margin:10px auto; display:block; width:40px;} */
html,body {	width: 100%;height: 100%;margin: 0;	padding: 0;  overflow: hidden}
.videobg{ position: fixed;; width: 100%; height: 100%; left: 0; top: 0; 
background: #000;background: -webkit-radial-gradient(50% 10%,farthest-corner, #2a4fa9 0%, #101e42 50%,#090d1b,#000);}
.videobg video{ object-fit: cover; filter:blur(2px); opacity: .05;filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='5'); position: relative; }

.head{ height:90px;  position: relative; z-index: 12; display: flex; align-items: center; justify-content: center;}
.head::before,.head::after{ width: 100%; height: 90px; content: "";}
.head::before{ background: url(//repo.bfw.wiki/bfwrepo/images/avatar/headleft.png) right top no-repeat;}
.head::after{ background: url(//repo.bfw.wiki/bfwrepo/images/avatar/head_right.png) left top  no-repeat;}

.head h1{ flex-shrink: 0; background: url(//repo.bfw.wiki/bfwrepo/images/avatar/head_center.png) center top no-repeat; margin-left:-150px;
	margin-right:-150px;
	 background-size:calc(100% - 300px) 79px ; height: 90px;;}
.head h1 span{ color:#f6fbff; text-align: center; font-size: 46px; line-height:70px;  font-family: "Microsoft YaHei";
	background: linear-gradient(180deg,#fdfeff, #9fd8ff);background-size: cover;-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;text-fill-color: transparent;}

html,body{height: 100%;}
.mainbox1{ height:calc(65% - 100px);  overflow: hidden; padding-top: 10px;}
.mainbox2{ height:35%; overflow: hidden;}
.mainbox1>ul,.mainbox2>ul{ height: 100%; padding: 0 5px;}
.mainbox1>ul>li,.mainbox2>ul>li{ float: left; padding: 0 7px;height: 100%;}

.mainbox1>ul>li:nth-child(1){ width: 25%}
.mainbox1>ul>li:nth-child(2){ width: 30%}
.mainbox1>ul>li:last-child{ width: 45%}

.mainbox2>ul>li:nth-child(1){ width:25%}
.mainbox2>ul>li:nth-child(2){ width:30%}
.mainbox2>ul>li:nth-child(3){ width:45%}



.boxall{ border: 1px solid rgba(52, 152, 218, 0.05); height: calc(100% - 10px); background: rgba(0, 104, 190, 0.05); padding:10px; position: relative; margin-bottom: 10px; z-index: 12;}
.tit01{color: rgba(255,255,255,.9); font-size:16px; font-weight: bold; position: absolute ; top: 5px;}
.boxnav { height: 100%; padding-top: 10px;}

/* 
.boxall{ border: 1px solid rgba(52, 152, 218, 0.05); height: calc(100% - 37px); background: rgba(0, 104, 190, 0.05); padding:10px; position: relative; margin-bottom: 10px; z-index: 12;}
.tit01{
	color: rgba(255,255,255,.9); font-size:16px; padding: 0 ; line-height: 30px;margin-bottom: 10px;position: relative; z-index: 12;margin-top: -39px; margin-left: -12px;margin-right: -12px; display: flex; justify-content: space-b.........完整代码请登录后点击上方下载按钮下载查看