echart大数据大屏可视化看板效果代码
代码语言：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;
width:4rem;
height:4rem;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border-radius:50%;
border:3px solid rgba(255,255,255,0.5);
animation:scale 2s linear infinite
}
.main .animate .sum .data1 span,.main .animate .sum .data2 span,.main .animate .sum .data3 span,.main .animate .sum .data4 span {
font-size:.8rem
}
.main .animate .sum .data1 {
left:0;
top:10%
}
.main .animate .sum .data1 .qiu {
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/cicle04.png) no-repeat center;
background-size:100%
}
.main .animate .sum .data2 {
right:5%;
top:8%
}
.main .animate .sum .data2 .qiu {
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/cicle02.png) no-repeat center;
background-size:100%
}
.main .animate .sum .data3 {
left:0;
bottom:3%
}
.main .animate .sum .data3 .qiu {
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/cicle03.png) no-repeat center;
background-size:100%
}
.main .animate .sum .data4 {
right:6%;
bottom:3%
}
.main .animate .sum .data4 .qiu {
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/cicle01.png) no-repeat center;
background-size:100%
}
.main .charts {
width:25%;
height:100%
}
.main .charts>div {
width:100%;
height:50%
}
.main .charts>div .charts-title {
width:100%;
height:10%;
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/title.png) no-repeat;
display:table;
padding-left:5%;
color:#eee;
font-weight:500
}
.main .charts>div .charts-title span {
display:table-cell;
vertical-align:middle
}
.main .charts>div .content {
width:100%;
height:80%
}
.main .charts>div .content table {
width:100%;
margin-top:5%;
height:80%;
color:#fff;
text-align:center
}
.main .charts>div .content table thead {
font-size:.8rem
}
.main .charts>div .content table tbody {
font-size:.6rem
}
.main .charts>div .content table tbody tr {
height:10%
}
.main .charts>div .content table tbody tr td span {
display:inline-block;
width:.9rem;
height:.9rem;
vertical-align:bottom
}
@keyframes float {
0% {
transform:translateY(0%)
}
50% {
transform:translateY(60%)
}
100% {
transform:translateY(0%)
}
}@keyframes float2 {
0% {
transform:translateY(0%)
}
50% {
transform:translateY(-50%)
}
100% {
transform:translateY(0%)
}
}@keyframes float3 {
0% {
transform:translateY(0%)
}
50% {
transform:translateY(-50%)
}
100% {
transform:translateY(0%)
}
}@keyframes float4 {
0% {
transform:translateY(0%)
}
50% {
transform:translateY(60%)
}
100% {
transform:translateY(0%)
}
}@keyframes float5 {
0% {
transform:translateY(0%)
}
50% {
transform:translateY(-60%)
}
100% {
transform:translateY(0%)
}
}@keyframes circle {
0% {
transform:rotateX(70deg) rotateZ(0)
}
100% {
transform:rotateX(70deg) rotateZ(360deg)
}
}@keyframes scale {
0% {
transform:translate(-50%,-50%) scale(0.9);
opacity:1
}
100% {
transform:translate(-50%,-50%) scale(1.5);
opacity:0
}
}
</style>
</head>
<body>
<!-- 头部模块 -->
<div class="header">
<div class="title"><span>数据可视化大屏展示系统</span></div>
<div class="time"><span></span></div>
<div class="company"><span>LOGO</span><span>大数据</span></div>
</div>
<!-- 主题模块 -->
<div class="main">
<div class="animate">
<!-- 浮动层 -->
<div class="float">
<div class="floating1">
<div id="roate1">
<div class="roate-item">
<p>12356</p><span>销售额</span></div>
<div class="roate-item">
<p>53%</p><span>同比</span></div>
<div class="roate-item">
<p>63%</p><span>完成率</span></d.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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