echart大数据大屏可视化看板效果代码-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：一款实用echart实现的echart大数据大屏可视化看板效果代码，包含订单销量排名、总销售额等关键数据展示。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        * {
	margin:0;
	padding:0
}
html,body {
	width:100%;
	overflow:hidden;
	height:100%
}
body {
	background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/bg.png) no-repeat;
	background-size:100%
}
ul,li {
	list-style:none
}
}.header {
	width:100%;
	height:10%;
}
.header .title {
	float:left;
	width:35%;
	height:100%;
	text-align:center;
	font-size:1.5rem;
	display:table;
	font-family:'汉仪铸字超然体';
	letter-spacing:0.2rem;
	background-image:-webkit-linear-gradient(bottom,#3aa4ff,#e6e5e5);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}
.header .title span {
	display:table-cell;
	vertical-align:middle;
}
.header .time {
	width:25%;
	float:left;
	height:80%;
	text-align:center;
	background-image:-webkit-linear-gradient(bottom,#3aa4ff,#e6e5e5);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	font-size:1rem;
	display:table;
	font-family:'汉仪铸字超然体';
}
.header .time span {
	display:table-cell;
	vertical-align:middle;
}
.header .company {
	width:15%;
	height:100%;
	margin-right:5%;
	background-color:rgba(255,255,255,0.4);
	float:right;
	text-align:center;
	background-image:-webkit-linear-gradient(bottom,#3aa4ff,#e6e5e5);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	font-size:1.5rem;
	display:table;
	font-family:'汉仪铸字超然体';
}
.header .company span {
	display:table-cell;
	vertical-align:middle;
}
.main {
	width:100%;
	height:85%;
	margin-top:5%;
	padding:0 4%;
	box-sizing:border-box;
}
.main > div {
	float:left;
}
.main .animate {
	width:75%;
	height:100%;
}
.main .animate .float {
	width:100%;
	height:40%;
}
.main .animate .float > div {
	float:left;
}
.main .animate .float .floating1 {
	width:15%;
	height:75%;
	background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/5.png) no-repeat bottom center;
	background-size:90%;
	animation:float 8s linear infinite;
}
.main .animate .float .floating1 #roate1 {
	width:100%;
	height:50%;
	background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/cicle5.png) no-repeat center;
	background-size:80%;
	position:relative;
}
.main .animate .float .floating1 #roate1 .roate-item {
	position:absolute;
	left:0;
	top:0;
	width:5rem;
	height:5rem;
	background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/yuan2-01.png) no-repeat center;
	background-size:100%;
	transform:translate(-180%,-70%);
	text-align:center;
	padding-top:25%;
	box-sizing:border-box;
	color:#fff;
}
.main .animate .float .floating1 .pm {
	text-align:center;
	color:#fff;
	font-size:0.8rem;
}
.main .animate .float .floating2 {
	width:15%;
	height:75%;
	margin-top:10%;
	background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/3.png) no-repeat bottom center;
	background-size:90%;
	margin-left:2%;
	animation:float2 6s linear infinite;
}
.main .animate .float .floating2 #roate2 {
	width:100%;
	height:50%;
	background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/cicle2.png) no-repeat center;
	background-size:80%;
	position:relative;
}
.main .animate .float .floating2 #roate2 .roate-item2 {
	position:absolute;
	left:0;
	top:0;
	width:5rem;
	height:5rem;
	background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/yuan4-01.png) no-repeat center;
	background-size:100%;
	transform:translate(-180%,-70%);
	text-align:center;
	padding-top:25%;
	box-sizing:border-box;
	color:#fff;
}
.main .animate .float .floating2 .pm2 {
	text-align:center;
	color:#fff;
	font-size:0.8rem;
}
.main .animate .float .floating3 {
	width:15%;
	height:75%;
	margin-top:5%;
	background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/4.png) no-repeat bottom center;
	background-size:90%;
	margin-left:2%;
	animation:float3 8s linear infinite;
}
.main .animate .float .floating3 #roate3 {
	width:100%;
	height:50%;
	background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/cicle3.pn.........完整代码请登录后点击上方下载按钮下载查看