echart实现大数据可视化看板滚动大屏看板效果
代码语言：html
所属分类：布局界面
代码描述：echart实现大数据可视化看板滚动大屏看板效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>产业大数据展示</title>
<style>
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box}
*,body{padding:0px; margin:0px;color: #222;font-family: "微软雅黑";}
html,body{
background: url("http://repo.bfw.wiki/bfwrepo/image/5eec59613702c.png") no-repeat;
background-size: cover;
font-size: .16rem;
color: #ffffff;
position: relative;
width: 100%;
height: 100%;
}
.fl{
float: left;
}
.fr{
float: right;
}
ul,ol{
list-style: none;
}
/*谷哥滚动条样式*/
::-webkit-scrollbar {width:5px;height:5px;position:absolute}
::-webkit-scrollbar-thumb {background-color:#5bc0de}
::-webkit-scrollbar-track {background-color:#ddd}
/***/
.allnav{
height: 100%;
}
.main{
/*width: 100%;
height: 100%;
background: url("../images/bj.png") no-repeat;
background-size: cover;
position: relative;*/
}
/*头部*/
.header{
height: 1.2rem;
width: 100%;
/*background:red;*/
}
/*头部左边*/
.header .header-left{
float: left;
width: 35%;
height: 1.2rem;
color: #ffffff;
/*text-align: center;*/
line-height: 1.2rem;
padding-left: .5rem;
font-size: .2rem;
/*border: 1px solid gold;*/
}
/*头部中间*/
.header .header-cen{
float: left;
width: 30%;
height: 1.2rem;
/*border: 1px solid green;*/
background-size: 100% 100%;
text-align: center;
line-height: 1.2rem;
}
.header .header-cen h1{
font-size: .4rem;
color: #ffffff;
letter-spacing:0.2rem;
text-shadow: 0 0 .3rem #00d8ff;
}
/*头部右边*/
.header .header-right{
float: right;
width: 35%;
height: 1.2rem;
/*border: 1px solid purple;*/
}
/*中间*/
.content{
padding: .2rem .1rem 0 .1rem;
}
/*中间左边*/
.content .content-left{
width: 25%;
padding: .1rem;
/*border: 1px solid red;*/
}
.content .content-left .left-top{
width: 100%;
height: 3.2rem;
/*border: 1px solid gold;*/
margin-bottom: .2rem;
}
.title{
width: 100%;
height: .4rem;
/*border: 1px solid red;*/
color: #ffffff;
font-size: .2rem;
padding-left: .3rem;
line-height: .4rem;
background: url("http://repo.bfw.wiki/bfwrepo/icon/5eec6e373791a.png") no-repeat;
background-size: 100% 100%;
margin-top: .1rem;
position: relative;
}
.title span{
display: inline-block;
color: #ffffff;
font-size: .2rem;
position: absolute;
top: -.1rem;
}
.list p{
font-size: .18rem;
color: #029698;
padding: 0 .3rem;
}
.list li{
float: left;
font-size: .2rem;
color: #ffffff;
width: 50%;
height: .4rem;
line-height: .4rem;
padding: .2rem;
}
.content .content-left .left-center{
width: 100%;
height: 3.2rem;
/*border: 1px solid gold;*/
margin-bottom: .2rem;
}
.content .content-left .left-bottom{
width: 100%;
height: 3.2rem;
/* border: 1px solid gold;*/
}
/*中间*/
.content .content-center{
width: 50%;
padding: .1rem .2rem .1rem .2rem;
/*border: 1px solid purple;*/
}
.content .content-center .center-top{
width: 100%;
height: 6.5rem;
/*border: 1px solid red;*/
background-size: 100% 100%;
box-sizing: border-box;
margin-bottom: .3rem;
position: relative;
}
.content .content-center .center-top .top-title{
position: absolute;
width: 35%;
height: 3rem;
/*border: 1px solid red;*/
left: .5rem;
top:.5rem;
}
.content .content-center .center-top .top-title li{
float: left;
width: 50%;
height: 1rem;
/*border: 1px solid green;*/
}
.content .content-center .center-top .top-title li p,
.content .content-center .center-top .top-title li span,
.content .content-center .center-top .top-title li b{
color: #ffffff;
}
.content .content-center .center-top .top-title li p{
padding: .1rem;
}
.content .content-center .center-top .top-title li span{
text-align: center;
display: inline-block;
width: .35rem;
height: .45rem;
background: #55bcd4;
margin-left: .1rem;
line-height: .4rem;
font-size: .3rem;
margin-top: .1rem;
}
.content .content-center .center-top .top-bottom{
width: 70%;
height: 80%;
position: absolute;
/*border: 1px solid red;*/
bottom: .3rem;
right: .3rem;
}
.content .content-center .center-bottom{
width: 100%;
height: 3.4rem;
padding: .1rem;
border: 1px solid #55bcd4;
box-sizing: border-box;
}
.content .content-center .center-bottom .bottom-left{
width: 50%;
height: 100%;
/*border: 1px solid green;*/
}
.content .content-center .center-bottom .bottom-right{
width: 50%;
height: 100%;
/*border: 1px solid green;*/
}
/*中间右边*/
.content .content-right{
width: 25%;
padding: .1rem;
}
.content .content-right .right-top{
width: 100%;
height: 3.2rem;
border: 1px solid #55bcd4;
margin-bottom: .2rem;
}
#tab_header{
width: 100%;
height: .4rem;
/* border: 1px solid red;*/
}
#tab_header .selected{
background: rgba(56, 188, 233, 1);
}
#tab_header li{
float: left;
width: 50%;
color: #ffffff;
text-align: center;
line-height: .4rem;
cursor: pointer;
}
#tab_content{
width: 100%;
height: 2.8rem;
/* border: 1px solid purple;*/
}
#tab_content .dom li p,
#tab_content .dom li span,
#tab_content .dom li label{
color: #ffffff;
}
#tab_content .dom li{
width: 33%;
height: 1.2rem;
/*border: 1px solid red;*/
text-align: center;
float: left;
padding: .2rem;
}
#tab_content .dom li p{
margin-bottom: 0.05rem;
}
#tab_content .dom li span{
font-size: .25rem;
padding-top: .1rem;
}
#tab_content .dom li:nth-child(1) span{
color: #ebec2f;
}
#tab_content .dom li:nth-child(2) span{
color: #25f3e6;
}
#tab_content .dom li:nth-child(3) span{
color: #13ff03;
}
#tab_content .dom .list-t{
float: left;
width: 100%;
height: 1.5rem;
padding-top: .3rem;
}
#tab_content .dom .list-t li{
width: 15%;
height: .8rem;
float: left;
border: 1px solid #55bcd4;
text-align: center;
padding: 0 !important;
margin-left: 0.07rem;
}
#tab_content .dom .list-t li span,
#tab_content .dom .list-t li p{
color: #ffffff;
}
#tab_content .dom .list-t li span{
display: inline-block;
font-size: .2rem;
margin-top: .1rem;
}
.listStyle{
width: 100%;
height: 100%;
/*border: 1px solid red;*/
margin-top: .3rem;
}
.listStyle span{
float: left;
width: 50%;
height: .4rem;
font-size: .2rem;
color: #ffffff;
display: inline-block;
padding-left: .2rem;
text-align: center;
line-height: .4rem;
}
.listStyle strong{
color: #00ffff;
}
.content .content-right .right-center{
width: 100%;
height: 3.2rem;
/*border: 1px solid gold;*/
margin-bottom: .2rem;
}
.content .content-right .right-bottom{
width: 100%;
height: 3.2rem;
/*border: 1px solid gold;*/
}
.content .content-right .right-bottom .right-bottom-t{
/*margin-top: .8rem;*/
width: 100%;
height: 2.8rem;
/*height: calc(100% - 1.6rem);*/
/*border: 1px solid red;*/
}
.content .content-right .right-bottom .right-bottom-t .b-left{
float: left;
width: 33.3%;
height: 100%;
text-align: center;
}
.content .content-right .right-bottom .right-bottom-t .b-cent{
float: left;
width: 33.3%;
height: 100%;
}
.content .content-right .right-bottom .right-bottom-t .b-right{
float: left;
width: 33.3%;
height: 100%;
}
.gun{
/* width: 100%;*/
/*margin: 20px;*/
}
.gun span{
display: block;
float: left;
height: .2rem;
width: 33%;
/*background: red;*/
/*margin: 15px 10px 10px 10px;*/
/*padding: 20px;*/
text-align: center;
font-size: 0.14rem;
font-weight: 600;
color: #61d2f7;
text-align: center;
margin-bottom: .1rem;
}
#FontScroll{
width: 100%;
height: 2.3rem;
overflow: hidden;
/*float: left;*/
margin-top: .1rem;
/*margin: 0 5%;*/
/*margin-left: 50px;*/
/*background: gold;*/
}
#FontScroll ul li{
height: .32rem;
width: 100%;
color: #ffffff;
text-align: center;
line-height: .32rem;
/*border-bottom: 1px dashed #404040;*/
/*width:33.3%;*/
overflow: hidden;
font-size: 0.14rem;
border-bottom: 1px dashed #404040;
/*width:33.3%;*/
/*background: red;
margin: 0 2%;*/
}
#FontScroll ul li:nth-child(1){
/*background-color: #072951;*/
box-shadow: -10px 0px 15px #034c6a inset, /*左边阴影*/
10px 0px 15px #034c6a inset;
}
#FontScroll ul li:hover{
box-shadow: -10px 0px 15px #034c6a inset, /*左边阴影*/
10px 0px 15px #034c6a inset;
cursor: pointer;
}
.fontInner span{
display:inline-block;
/*float: left;*/
/*height: 20px;*/
width:31%;
color: #ffffff;
/*background: red;*/
}
.fontInner span b{
display: inline-block;
width: .75rem;
height: .2rem;
/*border-radius: 0.03rem;*/
color: #ffffff;
line-height: .2rem;
font-size: .1rem;
}
/*#FontScroll ul li:nth-child(1) .fontInner span b{
background: #EB6841
}*/
#FontScroll ul li:nth-child(1) .fontInner span b{ background: #FE4365 }
#FontScroll ul li:nth-child(2) .fontInner span b{ background: #3FB8AF }
#FontScroll ul li:nth-child(3) .fontInner span b{ background: #83AF9B }
#FontScroll ul li .fontInner span b{ background: #C8C8A9 }
/*#FontScroll ul li:nth-child(8n-4) .fontInner span b{ background: #20a8fe }
#FontScroll ul li:nth-child(8n-3) .fontInner span b{ background: #EB6841 }
#FontScroll ul li:nth-child(8n-2) .fontInner span b{ background: #3FB8AF }
#FontScroll ul li:nth-child(8n-1) .fontInner span b{ background: #FE4365 }
#FontScroll ul li:nth-child(8n-5) .fontInner span b{ background: #FC9D9A }
#FontScroll ul li:nth-child(8n-6) .fontInner span b{ background: #EDC951 }
#FontScroll ul li:nth-child(8n-7) .fontInner span b{ background: #C8C8A9 }
#FontScroll ul li:nth-child(8n) .fontInner span b{ background: #83AF9B }
#FontScroll ul li:first-child .fontInner span b{ background: #036564 }
#FontScroll ul li:last-child .fontInner span b{ background: #3299BB }*/
</style>
</head>
<body>
<div class="main">
<!--头部-->
<div class="header">
<div class="header-left" id="time"></div>
<div class="header-cen">
<h1>产业大数据展示</h1>
</div>
<div class="header-right"></div>
</div>
<!--中间-->
<div class="content">
<!--左边-->
<div class="content-left fl">
<!--左上-->
<div class="left-top">
<div class="title">
<span>基本信息</span>
</div>
<div class="list">
<p>托各地丰富的无公害、应季的果蔬资源、海鲜资源、山地及海域资源以及农村特色人文资源而搭建，集优质资源整合、优化、流通于一体，涵盖有机蔬果产品、特色平价海鲜、农村生态人文旅游</p>
<ul>
<li>建筑面积：1168亩</li>
<li>农户总数：867户</li>
<li>人口总数：13万</li>
<li>年总产值：680万</li>
<li>年总产值：4651万</li>
<li>年总产值：4546万</li>
</ul>
</div>
</div>
<!--左中-->
<div class="left-center">
<div class="title">
<span>蔬菜类别</span>
</div>
<div class="allnav" id="ceshi"></div>
</div>
<!--左下-->
<div class="left-bottom">
<div class="title">
<span>产量/种植面积</span>
</div>
<div class="allnav" id="ceshi2"></div>
</div>
</div>
<!--中间-->
<div class="content-center fl">
<!--头部-->
<div class="center-top">
<div class="top-title">
<ul>
<li>
<p>种植基地</p>
<span>3</span>
<span>6</span>
<span>5</span>
<b>个</b>
</li>
<li>
<p>已接入</p>
<span>8</span>
<span>3</span>
<b>%</b>
</li>
</ul>
</div>
<div class="top-bottom">
<div class="allnav" id="ceshi8"></div>
</div>
</div>
<!--底部-->
<div class="center-bottom">
<div class="bottom-left fl">
<div class="allnav" id="ceshi6"></div>
</div>
<div class="bottom-right fr">
<div class="allnav" id="ceshi7" style="width: 100%;height: 100%;"></div>
</div>
</div>
</div>
<!--右边-->
<div class="content-right fr">
<!--右上-->
<div class="right-top">
<!--选项卡内容-->
<div id="tab_header">
<ul>
<li class="selected">商铺信息</li>
<li>基地信息</li>
</ul>
</div>
<!--内容-->
<div id="tab_content">
<div class="dom" style="display: block">
<ul>
<li>
<p>座收租金</p>
<span>50万</span>
<label>元</label>
</li>
<li>
<p>座收租金</p>
<span>50万</span>
<label>元</label>
</li>
<li>
<p>座收租金</p>
<span>50万</span>
<label>元</label>
</li>
</ul>
<div class="list-t">
<ul>
<li>
<span>50万</span>
<p>商铺</p>
</li>
<li>
<span>50万</span>
<p>商铺</p>
</li>
<li>
<span>50万</span>
<p>商铺</p>
</li>
<li>
<span>50万</span>
<p>商铺</p>
</li>
<li>
<span>50万</span>
<p>商铺</p>
</li>
<li>
<span>50万</span>
<p>商铺</p>
</li>
</ul>
</div>
</div>
<div class="dom" style="display: none">
<div class="listStyle">
<span>大棚：<strong>560</strong>个</span>
<span>供应企业：<strong>36</strong>家</span>
<span>经销商：<strong>540</strong>个</span>
<span>供应链：<strong>15</strong>条</span>
<span>蔬菜加工基地：<strong>20</strong>个</span>
<span>售后卸载：<strong>29</strong>家</span>
<span>冷藏基地：<strong>10</strong>个</span>
<span>冷藏车：<strong>120</strong>台</span>
</li>
</div>
</div>
</div>
<!--选项卡内容-->
</div>
<!--右中-->
<div class="right-center">
<div class="title">
<span>销量排行</span>
</div>
<div class="echart wenzi">
<div class="gun">
<span>名称</span>
<span>同比</span>
<span>销量</span>
</div>
<div id="FontScroll" class="myscroll">
<ul>
<li>
<div class="fontInner clearfix">
<span>
<b> 1.辣椒</b>
</span>
<span>2.3%</span>
<span>45顿</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>2.白菜</b>
</span>
<span>2.2%</span>
<span>44.5顿</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>3.茄子</b>
</span>
<span>2.15%</span>
<span>44.3顿</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>4.莴笋</b>
</span>
<span>2.1%</span>
<span>43.5顿</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>5.洋芋</b>
</span>
<span>2%</span>
<span>43顿</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>6.藕</b>
</span>
<span>1.95%</span>
<span>42.6顿</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>7.豌豆</b>
</span>
<span>1.93%</span>
<span>42.3顿</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>8.玉米</b>
</span>
<span>1.9%</span>
<span>42顿</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>9.西红柿</b>
</span>
<span>1.8%</span>
<span>41顿</span>
</div>
</li>
<li>
<div class="fontInner clearfix">
<span>
<b>10.西红柿</b>
</span>
<span>1.8%</span>
<span>41顿</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--右下-->
<div class="right-bottom">
<div class="title">
<span>蔬菜成交价</span>
</div>
<div class="right-bottom-t">
<div class="b-left" id="ceshi3"></div>
<div class="b-cent" id="ceshi4"></div>
<div class="b-right" id="ceshi5"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script>
$(function () {
$('.myscroll').myScroll({
speed: 60, //数值越大，速度越慢
rowHeight: 38 //li的高度
});
})
$(document).ready(function () {
var whei = $(window).width()
$("html").css({ fontSize: whei / 22 });
$(window).resize(function () {
var whei = $(window).width();
$("html").css({ fontSize: whei / 22 })
});
});
$(function () {
var allLis=document.getElementById("tab_header").getElementsByTagName("li");
var allDom = document.getElementById("tab_content").getElementsByClassName("dom");
// console.log(allLis, allDom);
// 2. 遍历监听
for(var i=0; i<allLis.length; i++){
var li = allLis[i];
li.index = i;
li.onclick = function () {
console.log(i);
for(var j=0; j<allLis.length; j++){
allLis[j].className = '';
allDom[j].style.display = '.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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