echarts实现设备监控大数据大屏看板效果代码
代码语言：html
所属分类：图表
代码描述：echarts实现设备监控大数据大屏看板效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<meta name="renderer" content="webkit">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">otstrap.css">
<style>
@charset "utf-8";
/*通用样式ͨ*/body,html,.main {
height:100%;
width:100%;
}
body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ol {
margin:0;
padding:0;
}
ul,li,ol {
list-style:none;
}
a:link,a:visited,a:active {
text-decoration:none;
}
body {
background:#040f3c;
}
.main-left,.main-right {
float:left;
width:28%;
height:100%;
padding:0 5px;
}
.main-middle {
float:left;
width:44%;
height:100%;
padding:0 5px;
}
.border-container {
position:relative;
margin-top:10px;
/* padding:10px;
*/ border:1px solid #24214e;
}
.main-middle .borderno-container {
border-top:none;
border-bottom:none;
}
.name-title {
background:#4545e3;
padding:8px 14px;
border-bottom-right-radius:6px;
border-bottom-left-radius:6px;
position:absolute;
left:5%;
}
.tile-size-color {
font-size:12px;
color:#fff;
}
.containertop {
height:50%;
}
.containerbottom {
height:47%;
}
#radar,.graduateyear,.bar-chart,#courserate,.line-chart,.bars-chart,.radar-chart,.progress1-chart,#mapadd,.progress2-chart {
height:100%;
}
#mapadd {
position:relative;
}
#radar .radarkong {
height:17%;
position:relative;
}
.Totalequipment {
margin-right:18px;
}
#radar .radarkong p {
position:absolute;
bottom:0;
text-align:center;
width:100%;
}
.SiteStatusList {
position:absolute;
bottom:10%;
color:#fff;
font-size:12px;
width:100%;
display:flex;
justify-content:center;
flex-direction:row;
align-items:center;
}
.SiteStatusList li:first-child {
margin-left:22px;
}
.SiteStatusList li {
margin-right:20px;
}
.SiteStatusList .Statussame {
float:left;
padding:5px;
margin-top:2px;
margin-right:5px;
}
.SiteStatusList .Statusnormal {
background:#4f8bf9;
}
.SiteStatusList .Statusemergency {
background:#fea31e;
}
.SiteStatusList .StatusOffline {
background:#959595;
}
.SiteStatusList .ThisweekData,.SiteStatusList .ThisweekData {
padding:7px;
border-radius:50%;
float:left;
cursor:pointer;
}
.SiteStatusList .Datasame {
background:#39c1f5;
}
.SiteStatusList .Defaultgray {
color:#959595;
}
.SiteStatusList .DataSwitch {
background:#555474;
border-radius:10px;
}
.teacher-pie,.teacher-pie .teacherList {
height:100%;
}
.teacher-pie .teacherList {
border:1px solid #24214e;
position:relative;
}
.teacher-pie .teacherList:first-child {
width:50%;
border-left:none;
float:left;
}
.teacher-pie .teacherList .name-title {
padding-left:10px;
}
.teacher-pie .teacherList:last-child {
width:49%;
border-right:none;
float:right;
}
.number-show {
position:absolute;
top:20%;
right:5%;
}
#mapadd .mapleft {
width:33%;
height:100%;
float:left;
position:relative;
/*background:#009688;
*/
}
#mapadd .progressMore {
color:#fff;
font-size:12px;
position:absolute;
right:7%;
top:60%;
text-decoration:underline;
}
#mapadd .map-chart {
width:65%;
height:100%;
float:left;
}
#mapadd .Devicestatus-List {
width:50%;
position:absolute;
bottom:12%;
left:4%;
color:#fff;
}
#mapadd .Devicestatus-List li {
float:left;
height:35px;
margin-right:1%;
line-height:35px;
position:relative;
}
#mapadd .Devicestatus-List li:nth-of-type(1) {
width:65.5%;
border:1px solid #3ae034;
background:rgba(58,224,52,0.5);
}
#mapadd .Devicestatus-List li:nth-of-type(2) {
width:10.5%;
border:1px solid #778699;
background:rgba(199,134,153,0.5);
}
#mapadd .Devicestatus-List li:nth-of-type(3) {
width:10.5%;
border:1px solid #1b9fff;
background:rgba(27,159,255,0.5);
}
#mapadd .Devicestatus-List li:nth-of-type(4) {
width:9.5%;
border:1px solid #e77407;
background:rgba(213,116,7,0.5);
}
.Devicestatus-List .DevicestatusName {
position:absolute;
top:-35px;
left:0;
}
.pie-chart {
width:100%;
height:82%;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.4.2.js"></script>t>
</head>
<body>
<!--主体-->
<div class="main clearfix">
<div class="main-left">
<div class="border-container containertop">
<h5 class="name-title tile-size-color">设备状态</h5>
<div id="radar">
<div class="radarkong">
<p class="tile-size-color">设备总数 :<span class="Totalequipment">660个</span>统计时间 :<span>2019.03.26 15:28</span></p>
</div>
<div class="pie-chart" id="pie-chart"></div>
<ul class="SiteStatusList">
<li><i class="Statusnormal Statussame"></i>正常：<span>556</span></li>
<li><i class="Statusemergency Statussame"></i>告警：<span>40</span></li>
<li><i class="StatusOffline Statussame"></i>离线：<span>30</span></li>
</ul>
</div>
</div>
<div class="border-container containerbottom">
<div class="name-title tile-size-color">设备类型分布</div>
<div class="graduateyear">
<div class="bar-chart" id="bar-chart"></div>
<ul class="SiteStatusList">
<li>本周数据</li>
<li class="DataSwitch"><i class="ThisweekData Datasame" onclick="DataSwitch(this,1)"></i><i class="ThisweekData" onclick="DataSwitch(this,2)"></i></li>
<li class="Defaultgray">本月数据</li>
</ul>
</div>
</div>
</div>
<div class="main-middle">
<div class="border-container containertop">
<div class="name-title tile-size-color">故障设备区域分布情况</div>
<div id="mapadd">
<div class="mapleft">
<div class="progress2-chart" id="progress2-chart"></div><a href="###" class="progressMore">更多></a></div>
<div class="map-chart" id="map-chart"></div>
<ul class="Devicestatus-List">
<li class="Online2">65.5% <span class="DevicestatusName">在线</span></li>
<li class="Online2"> 10.5% <span class="DevicestatusName">离线</span></li>
<li class="Online2"> 10.5% <span class="DevicestatusName">维护</span></li>
<li class="Online2"> 9.5% <span class="DevicestatusName">故障</span></li>
</ul>
</div>
</div>
<div class="border-container containerbottom borderno-container">
<ul class="teacher-pie clearfix">
<li class="teacherList">
<div class="name-title tile-size-color"> 故障时段分布</div>
<div id="courserate">
<div class="line-chart" id="line-chart"></div>
<ul class="SiteStatusList">
<li><i class="Statusnormal Statussame"></i>合计故障次数 <span>556</span></li>
</ul>
</div>
</li>
<li class="teacherList">
<div class="name-title tile-size-color">故障类型分布</div>
<div class="bars-chart" id="bars-chart"></div>
</li>
</ul>
</div>
</div>
<div class="main-right">
<div class="border-container containertop">
<div class="name-title tile-size-color">优秀区域排名</div>
<div class="progress1-chart" id="progress1-chart"></div>
</div>
<div class="border-container containerbottom">
<div class="name-title tile-size-color">故障类型分布</div>
<div id="radar-chart" class="radar-chart"></div>
</div>
</div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
<script type="text/javascript" >
$(function(){
pieChar();
barChar([20,60,82,60]);
linchar();
barschar();
radarchar();
progress1char();
progress2char();
mapchar();
});
window.onresize = function(){
pieChart.resize();
barChart.resize(); //若有多个图表变动，可多写
linchart.resize();
barschart.resize();
radarchart.resize();
progress1chart.resize();
progress2chart.resize();
mapchart.resize()
}
//饼状图
var pieChart="";
function pieChar(){
pieChart= echarts.init(document.getElementById("pie-chart"));
option = {
color:["#4f8bf9","#fea31e","#959595"],
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [
{
name:'访问来源',
type:'pie',
selectedMode: 'single',
radius: [0, '60%'],
center:["50%","42%"],
label: {
normal: {
position: 'outside',
formatter: "{b}:{d}%"
}
},
data:[
{value:556, name:'正常'},
{value:100, name:'告警',selected:true},
{value:30, name:'离线'}
]
}
]
};
pieChart.setOption(option);
}
//柱状图
var barChart="";
function barChar(data){
barChart= echarts.init(document.getElementById("bar-chart"));
option = {
tooltip: {
formatter:'{b}:{c}'
},
grid: {
left: '15%',
right: '15%',
bottom: '20%',
top: '20%',
containLabel: true,
z: 22
},
xAxis: {
data: ["NHN","TP","NP","COD"], //横坐标
axisLabel:{
textStyle: {
color:'#fff',
fontSize:12,
}
},
axisLine: {
lineStyle: {
type: 'solid',
color:'#24214e',
width:'1 ', //坐标线的宽度
}
},
},
yAxis: {
name: "（数次）",
nameTextStyle:{
color:"#fff"
},
nameLocation:"center",
nameGap:30,
nameRotate:-270,
axisLabel: {
textStyle: {
color: '#fff',
fontSize:12,//坐标值得具体的颜色
}
},
axisLine: {
lineStyle: {
type: 'solid',
color:'#24214e',
width:'1 ', //坐标线的宽度
}
},
splitLine: {
lineStyle: {
color: "#24214e",
}
}
},
series: [{
type: 'bar',
barWidth:20,
data:data,
/*label: {
normal: {
show: true,
position: "top",
textStyle: {
color: "#fffff",
fontSize: 12
}
}
},*/
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#4f92fa'}, //柱图渐变色
{offset: 0.5, color: '#565cf8'}, //柱图渐变色
{offset: 1, color: '#5d29f7'}, //柱图渐变色
]
)
}
},
}]
};
barChart.setOption(option)
}
//折线图
var linchart="";
function linchar(){
linchart= echarts.init(document.getElementById("line-chart"));
option = {
tooltip: {
formatter:'{b} {c}次'
},
grid: {
left: '15%',
right: '15%',
bottom: '20%',
top: '20%',
containLabel: true,
z: 22
},
xAxis: {
data: ['00:00', '06:00', '12:00', '18:00','24:00'],
axisLabel:{
textStyle: {
color:'#fff',
fontSize:12,
}
},
axisLine: {
lineStyle: {
type: 'solid',
color:'#24214e',
width:'1 ', //坐标线的宽度
}
},
},
yAxis: {
name: "（数次）",
nameTextStyle:{
color:"#fff"
},
nameLocation:"center",
nameGap:30,
nameRotate:-270,
axisLabel: {
textStyle: {
color: '#fff',
fontSize:12,//坐标值得具体的颜色
}
},
axisLine: {
lineStyle: {
type: 'solid',
color:'#24214e',
width:'1 ', //坐标线的宽度
}
},
splitLine: {
lineStyle: {
color: "#24214e",
}
}
},
series: [{
type: 'line',
data:[40, 182, 191, 234, 290],
itemStyle : {
normal : {
lineStyle:{
width:3,//折线宽度
},
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 1,
color: '#508ff6' // 0% 处的颜色
}, {
offset: 0,
color: '#2c137a' // 100% 处的颜色
}], false),
opacity: 0.4
}
},
}]
};
linchart.setOption(option)
}
//柱状图2
var barschart=""
function barschar(){
barschart = echarts.init(document.getElementById("bars-chart"));
option = {
color:["#fd8f1e","#7cb5ec","#4280f1","#957bde"],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '10%',
right: '15%',
bottom: '20%',
top: '20%',
containLabel: true,
z: 22
},
legend: {
data: ['进样异常', '缺试剂A', '缺试剂B', '消解异常'],
textStyle: {
fontSize: 12,
color:"#fff"
},
icon:"rect",
itemWidth:10,
itemHeight:10,
bottom:"9%"
},
xAxis: {
name:'次数',
nameTextStyle:{
color:"#fff"
},
axisLabel:{
textStyle: {
color:'#fff',
fontSize:12,
}
},
splitLine: {
lineStyle: {
color: "#24214e",
}
},
axisLine: {
lineStyle: {
type: 'solid',
color:'#24214e',
width:'1 ', //坐标线的宽度
}
}
},
yAxis: {
data: ['2018.11', '2018.12', '2019.01', '2019.02', '2019.03'],
axisLabel: {
textStyle: {
color: '#fff',
fontSize:12,//坐标值得具体的颜色
}
},
axisLine: {
lineStyle: {
type: 'solid',
color:'#24214e',
width:'1 ', //坐标线的宽度
}
},
},
series: [{
name: '进样异常',
type: 'bar',
stack: '总量',
barWidth:20,
label: {
normal: {
show: false,
position: 'insideRight'
}
},
data: [6, 4, 10, 8, 7]
}, {
name: '缺试剂A',
type: 'bar',
barWidth:20,
stack: '总量',
label: {
normal: {
show: false,
position: 'insideRight'
}
},
data: [8, 10, 4, 5, 6]
}, {
name: '缺试剂B',
type: 'bar',
stack: '总量',
barWidth:20,
label: {
normal: {
show: false,
position: 'insideRight'
}
},
data: [6, 4, 10, 8, 7]
}, {
name: '消解异常',
type: 'bar',
stack: '总量',
barWidth:20,
label: {
normal: {
show: false,
position: 'insideRight'
}
},
data: [6, 4, 10, 8, 7]
},
]
};
barschart.setOption(option)
};
//雷达图
var radarchart="";
function radarchar(){
radarchart = echarts.init(document.getElementById("radar-chart"));
option = {
color: ['#623ad1', '#3383fc'],
tooltip: {},
radar: [{
indicator: [{
text: '进样异常',
max: 100
},
{
text: '缺试剂A',
max: 100
},
{
text: '消解异常',
max: 100
},
{
text: '缺纯水',
max: 100
},
{
text: '缺试剂B',
max: 100
}
],
center: ['50%', '60%'],
radius: '65%',
startAngle: 90,
name: {
formatter: '{value}',
textStyle: {
fontSize: 12, //外圈标签字体大小
color: '#FFF' //外圈标签字体颜色.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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