echarts实现设备监控大数据大屏看板效果代码-html代码-BFW代码库

代码语言：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-c.........完整代码请登录后点击上方下载按钮下载查看