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.png) no-repeat center;
	background-size:80%;
	position:relative;
}
.main .animate .float .floating3 #roate3 .roate-item3 {
	position:absolute;
	left:0;
	top:0;
	width:5rem;
	height:5rem;
	background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/yuan3-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 .floating3 .pm3 {
	text-align:center;
	color:#fff;
	font-size:0.8rem;
}
.main .animate .float .floating4 {
	width:15%;
	height:75%;
	background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/4.png) no-repeat bottom center;
	background-size:90%;
	margin-left:2%;
	animation:float4 8s linear infinite;
}
.main .animate .float .floating4 #roate4 {
	width:100%;
	height:50%;
	background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/cicle3.png) no-repeat center;
	background-size:80%;
	position:relative;
}
.main .animate .float .floating4 #roate4 .roate-item4 {
	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 .floating4 .pm4 {
	text-align:center;
	color:#fff;
	font-size:0.8rem;
}
.main .animate .float .floating5 {
	width:20%;
	height:75%;
	background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/5.png) no-repeat bottom center;
	background-size:85%;
	margin-left:5%;
	margin-top:15%;
	animation:float5 6s linear infinite;
}
.main .animate .float .floating5 #roate5 {
	width:90%;
	height:30%;
	background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/cicle1.png) no-repeat center;
	background-size:80%;
	position:relative;
}
.main .animate .float .floating5 #roate5 .roate-item5 {
	position:absolute;
	left:0;
	top:0;
	width:5rem;
	height:5rem;
	background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/yuan1-01.png) no-repeat center;
	background-size:100%;
	transform:translate(-180%,-50%);
	text-align:center;
	padding-top:20%;
	box-sizing:border-box;
	color:#fff;
}
.main .animate .float .floating5 .pm5 {
	text-align:center;
	color:#fff;
	font-size:0.8rem;
	margin-top:11%;
}
.main .animate .sum {
	position:relative;
	width:100%;
	height:50%;
	background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/big.png) no-repeat center;
	background-size:80%;
}
.main .animate .sum .data {
	width:100%;
	height:20%;
	position:absolute;
	left:0;
	top:0;
	text-align:center;
	color:#fff;
}
.main .animate .sum .data span {
	font-family:'汉仪铸字超然体';
	font-size:1.2rem;
}
.main .animate .sum .cicle1 {
	transform-style:preserve-3d;
	position:absolute;
	top:50%;
	left:50%;
	margin:-12rem 0 0 -15rem;
	width:30rem;
	height:30rem;
	background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/circle.png) no-repeat center;
	background-size:contain;
	transform:rotateX(70deg);
	animation:circle 5s linear infinite;
}
.main .animate .sum #canvas1 {
	position:absolute;
	left:0;
	top:0;
	z-index:1;
}
.main .animate .sum #canvas2 {
	position:absolute;
	left:0;
	top:0;
	z-index:2;
}
.main .animate .sum .data1,.main .animate .sum .data2,.main .animate .sum .data3,.main .animate .sum .data4 {
	color:#fff;
	text-align:center;
	position:absolute;
	width:8rem;
	height:8rem;
	background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/di.png) no-repeat bottom center;
	background-size:contain;
	padding-top:2%;
	box-sizing:border-box;
}
.main .animate .sum .data1 .qiu,.main .animate .sum .data2 .qiu,.main .animate .sum .data3 .qiu,.main .animate .sum .data4 .qiu {
	position:relative;
	width:4rem;
	height:4rem;
	margin:auto;
	display:table;
}
.main .animate .sum .data1 .qiu p,.main .animate .sum .data2 .qiu p,.main .animate .sum .data3 .qiu p,.main .animate .sum .data4 .qiu p {
	display:table-cell;
	vertical-align:middle;
}
.main .animate .sum .data1 .qiu::before,.main .animate .sum .data2 .qiu::before,.main .animate .sum .data3 .qiu::before,.main .animate .sum .data4 .qiu::before {
	content:'';
	display:block.........完整代码请登录后点击上方下载按钮下载查看