基于Echarts+HTML5可视化数据大屏展示—设备管理大数据平台_设备管理大屏_echarts 大屏模板

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

        		<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">更多&gt;</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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

CSS样式文件

/* Create by gaojiye */
@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{


![img](https://img-blog.csdnimg.cn/img_convert/d2fdd64e3fa681615e3ef7e8b2ead9ad.png)
![img](https://img-blog.csdnimg.cn/img_convert/44b2d48c11df8e516008db840139aed3.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

9-1715736693212)]
[外链图片转存中...(img-KzyEWibp-1715736693212)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192