echarts实现不断变化的大屏大数据可视化看板代码
代码语言：html
所属分类：图表
代码描述：echarts实现不断变化的大屏大数据可视化看板代码
代码标签： 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-between;}
.boxall{ margin-top: 32px;}
.boxnav { height: 100%;} */
.boxall:before,
.boxall:after{ position:absolute; width: 15px; height: 15px; content: ""; border-top: 1px solid #3486da; top: -1px;opacity: .2;}
.boxall:before,.boxfoot:before{border-left: 1px solid #3486da;left:-2px;}
.boxall:after,.boxfoot:after{border-right: 1px solid #3486da; right: -2px;}
.boxfoot{ position:absolute; bottom: 0; width: 100%; left:0;}
.boxfoot:before,
.boxfoot:after{ position:absolute; width: 15px; height: 15px; content: "";border-bottom:1px solid #3486da; bottom:-1px; opacity: .2;}
.map{ height: 100%; position: relative;}
.time{ position: absolute; left: 20px; top: 0; font-family: "等线"; line-height: 50px; padding-right: 15px; font-size: 18px; font-weight: lighter;}
.topbtns{position: absolute; right: 20px; top: 0; height: 48px; display: flex; align-items: center;}
.topbtns a{ display: flex; align-items: center; color: rgb(124, 201, 249); font-size: 15px;}
.topbtns a img{ width: 18px; position: relative; margin-right: 3px;}
.text{ display: flex;align-items: center;}
.text ul{ display: flex;align-items: center; width: 100%;}
.text li{width: 50%; text-align: center}
.text li>span{ opacity: .5;}
.text li p{ font-size: 40px; font-family: "等线"; padding-top: 5px;}
/* .text li p span{font-weight: bold;} */
/**动画元素***/
.fadeIn{opacity:0;animation:fadeIn 1s forwards}
.fadeInDown{opacity:0;transform:translate3d(0,-100%,0);animation:fadeInDown .6s forwards}
.fadeInUp{animation-name:fadeInUp}
.fadeInLeft{animation-name:fadeInLeft}
.bounceIn{transform:scale(0,1);animation:bounceIn .6s forwards}
@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
to{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeIn{0%{opacity:0;transform:scale(.8) }
to{opacity:1;transform:scale(1) }
}
@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}
to{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
to{opacity:1;-webkit-transform:none;transform:none}
}
.delay02{animation-delay:.2s}
.delay04{animation-delay:.4s}
.delay06{animation-delay:.6s}
.delay08{animation-delay:.8s}
.delay1{animation-delay:1s}
.delay12{animation-delay:1.2s}
.delay14{animation-delay:1.4s}
.delay16{animation-delay:1.6s}
.delay18{animation-delay:1.8s}
.delay2{animation-delay:2s}
.number-animate{line-height:45px; height: 45px;font-size: 40px;overflow: hidden; display: inline-block; position: relative; }
.number-animate .number-animate-dot{ width: 21px; float: left; text-align: center;}
.number-animate .number-animate-dom{ width: 24px; text-align: center; float: left; position: relative; top: 0;}
.number-animate .number-animate-dom span,.number-animate .number-animate-dot span{float: left;width: 100%;height: 45px;line-height: 1.1;}
</style>
</head>
<body>
<div class="videobg style1">
<video id="video" src="" style="width: 100%; height:100%;" autoplay="" muted="" loop=""></video>
</div>
<div class="head">
<h1><span>大数据看板</span></h1>
<div class="time" id="time">2024.12.12 12:00:00</div>
<div class="topbtns">
<a href="#"><img src="//repo.bfw.wiki/bfwrepo/images/avatar/exit.svg">退出</a>
</div>
</div>
<div class="mainbox1">
<div id="map_container"></div>
<ul class="clearfix" style="height: 100%;">
<li>
<div class="boxall fadeIn" style="height: calc(40% - 10px)">
<div class="tit01">服务统计</div>
<div class="boxnav text">
<ul>
<li>
<span>累计服务人次</span>
<p class="Odometer1">0</p>
</li>
<li>
<span>本学期服务人次</span>
<p class="Odometer2">0</p>
</li>
</ul>
</div>
<div class="boxfoot"></div>
</div>
<div class="boxall fadeIn delay02" style="height: calc(60% - 10px);">
<div class="tit01">工作完成率</div>
<div class="boxnav" id="echarts1"></div>
<div class="boxfoot"></div>
</div>
</li>
<li>
<div class="boxall fadeIn delay04">
<div class="tit01">二级单位人数对比</div>
<div class="boxnav" id="echarts7"></div>
<div class="boxfoot"></div>
</div>
</li>
<li>
<div class=" fadeIn delay06" style="height: calc(50% - 2px);; display:flex; justify-content: space-between;">
<div class="boxall " style=" width: calc(50% - 7px);">
<div class="tit01">预警比例</div>
<div class="boxnav" id="echarts5"></div>
<div class="boxfoot"></div>
</div>
<div class="boxall " style=" width: calc(50% - 7px);">
<div class="tit01">预警性别比例</div>
<div class="boxnav" id="echarts6"></div>
<div class="boxfoot"></div>
</div>
</div>
<div class="boxall fadeIn delay08" style="height: calc(50% - 10px);">
<div class="tit01">预警人群年级比例</div>
<div class="boxnav" id="echarts4">
</div>
<div class="boxfoot"></div>
</div>
</li>
</ul>
</div>
<div class="mainbox2">
<div id="map_container"></div>
<ul class="clearfix" style="height: 100%;">
<li>
<div class="boxall fadeIn delay02">
<div class="tit01">总体情况</div>
<div class="boxnav" id="echarts8"></div>
<div class="boxfoot"></div>
</div>
</li>
<li>
<div class="boxall fadeIn delay04">
<div class="tit01">主要问题分布情况</div>
<div class="boxnav" id="echarts2"></div>
<div class="boxfoot"></div>
</div>
</li>
<li>
<div class="boxall fadeIn delay08">
<div class="tit01">各年级情况</div>
<div class="boxnav" id="echarts3"></div>
<div class="boxfoot"></div>
</div>
</li>
</ul>
</div>
<script type="text/javascript" >
$(document).ready(function () {
var t = null;
t = setTimeout(time, 1000); //開始运行
function time() {
clearTimeout(t); //清除定时器
dt = new Date();
var y = dt.getFullYear();
var mt = dt.getMonth() + 1;
var day = dt.getDate();
var h = dt.getHours(); //获取时
var m = dt.getMinutes(); //获取分
var s = dt.getSeconds(); //获取秒
var t = null;
document.getElementById("time").innerHTML = y + "." + Appendzero(mt) + "." + Appendzero(day) + " " + Appendzero(h) + ":" + Appendzero(m) + ":" + Appendzero(s) + "";
function Appendzero(obj) {
if (obj < 10) return "0" + "" + obj;
else return obj;
}
t = setTimeout(time, 1000); //设定定时器,循环运行
}
})
var txt = 35
option5 = {
color: 'rgba(255,255,255,.1)',
series: [{
name: 'Line 1',
type: 'pie',
clockWise: true,
radius: ['60%', '70%'],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
hoverAnimation: false,
data: [{
value: txt,
name: '预警比例',
label: {
normal: {
rich: {
a: {
color: '#fff',
align: 'center',
fontSize: 25,
fontFamily:"等线",
fontWeight: "bold",
},
b: {
color: 'rgba(255,255,255,.5)',
align: 'center',
padding: -20,
fontFamily:"苹方",
fontSize: 14
}
},
formatter: function (params) {
return "{a|" + params.value + "%}" + "\n\n{b|预警比例}";
},
position: 'center',
show: true,
textStyle: {
fontSize: '14',
fontWeight: 'normal',
color: '#fff'
}
}
},
itemStyle: {
normal: {
color: { // 完成的圆环的颜色
colorStops: [{
offset: 0,
color: '#00ffde' // 0% 处的颜色
}, {
offset: 1,
color: '#00c5ab' // 100% 处的颜色
}]
},
}
}
}, {
name: '未使用',
value: 100 - txt
}]
}]
};
var grids={
left: '0',
top: '30',
right: '20',
bottom: '0',
containLabel: true
}
var textStyles={
color: 'rgba(255,255,255,.5)',
fontFamily:"苹方"
}
var legends={
x: 'center',
y: '0',
icon: 'circle',
itemGap: 8,
textStyle: {color: 'rgba(255,255,255,.5)'},
itemWidth: 10,
itemHeight: 10,
},
option2 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
grid: grids,
xAxis: {
type: 'category',
data: ['抑郁', '焦虑', '强迫', '偏执', '睡眠', '人际关系', '其它', ],
axisLine: {show: false},
axisTick: {show: false},
axisLabel: {textStyle: textStyles},
},
yAxis: {
type: 'value',
splitNumber: 4,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.05)'
}
},
axisLabel: {
textStyle:textStyles,
},
},
series: [{
name: '主要问题分布情况',
type: 'bar',
barWidth: '10',
// label: {
// normal: {
// show: true,
// position: 'top',
// textStyle: {
// color: "#007a55"
// }
// }
// },
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#00c5ab'
}, {
offset: 1,
color: '#01dec1'
}]),
barBorderRadius: 11,
}
},
data: [123, 154, 234, 321, 120, 390, 634, 123, 154, 234, 321, 108]
}]
};
option3 = {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(0, 255, 255,0)'
}, {
offset: 0.5,
color: 'rgba(255, 255, 255,0.5)',
}, {
offset: 1,
color: 'rgba(0, 255, 255,0)'
}],
global: false
}
},
},
// formatter: '{b}走势',
},
legend: {
x: 'center',
y: '0',
icon: 'circle',
itemGap: 8,
textStyle: {
color: 'rgba(255,255,255,.5)'
},
itemWidth: 10,
itemHeight: 10,
},
grid: grids,
xAxis: [{
type: 'category',
boundaryGap: false,
splitLine: {show: false},
axisTick: {show: false},
axisLabel: {textStyle: textStyles},
axisLine: {show: false},
data: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '七年级', '八年级', '九年级']
}, {
axisPointer: {show: false},
axisLine: {show: false},
position: 'bottom',
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
},
splitNumber: 3,
axisLabel: {
textStyle: textStyles,
},
axisLine: {
show: false
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.05)'
}
}
}],
series: [{
name: '良好',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 4,
showSymbol: false,
lineStyle: {
normal: {
color: '#00ccea',
width: 2
}
},
areaStyle: {
normal: {
color: 'rgba(65,196,216,.0)'
}
},
itemStyle: {
normal: {
color: '#00ccea',
borderColor: 'rgba(65,196,216,.3)',
borderWidth: 7
}
},
data: [60, 20, 50, 10, 70, 40, 130, 40, 180, 60, 80, 40],
},
{
name: '需关注',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 4,
showSymbol: false,
lineStyle: {
normal: {
color: '#00c5ab',
width: 2
}
},
areaStyle: {
normal: {
color: 'rgba(56,146,228,.0)'
}
},
itemStyle: {
normal: {
color: '#00c5ab',
borderColor: 'rgba(56,146,228,.3)',
borderWidth: 7
}
},
data: [80, 60, 80, 40, 40, 60, 50, 40, 60, 20, 10, 70],
},
{
name: '需重点关注',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 4,
showSymbol: false,
lineStyle: {
normal: {
color: '#ffba00',
width: 2
}
},
areaStyle: {
normal: {
color: 'rgba(201,86,86,.0)'
}
},
itemStyle: {
normal: {
color: '#ffba00',
borderColor: 'rgba(201,86,86,.3)',
borderWidth: 7
}
},
data: [40, 60, 40, 80, 60, 80, 40, 60, 20, 50, 10, 70]
}
]
};
option4 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
// formatter: '{b}走势',
},
legend: legends,
grid:grids,
xAxis: {
type: 'category',
data: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '七年级', '八年级', '九年级'],
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle:textStyles
},
},
yAxis: {
type: 'value',
splitNumber: 2,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.05)'
}
},
axisLabel: {
textStyle:textStyles
},
},
series: [{
name: '男',
type: 'bar',
barWidth: 10,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#00ccea'
}, {
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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