mirror of
https://gitee.com/lvyeyou/DaShuJuZhiDaPingZhanShi.git
synced 2025-06-17 03:34:05 +08:00
删除目录8.环境检测
This commit is contained in:
Lang
Gitee
parent
df0f9df4a1
commit
321c5272d5
@ -1,337 +0,0 @@
|
||||
html,body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html{
|
||||
font-size: 100px;
|
||||
}
|
||||
ul,h1,h2,h3,h4,h5,h6,p{
|
||||
list-style: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*正文*/
|
||||
.t_container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 1360px;
|
||||
background: url('../img/true.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
min-height: 756px;
|
||||
}
|
||||
.t_header{
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: url('../img/linx.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
}
|
||||
.t_header span{
|
||||
color: #fff;
|
||||
font-size: 0.36rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.24rem;
|
||||
left: 9%;
|
||||
}
|
||||
.t_main{
|
||||
width: 98%;
|
||||
height: 8.74rem;
|
||||
margin: 0 auto;
|
||||
margin-top: 0.2rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.t_left_box{
|
||||
position: relative;
|
||||
width: 3.36rem;
|
||||
height: 4.6rem;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.t_l_line{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.t_r_line{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.t_center_box{
|
||||
width: 6.82rem;
|
||||
display: inline-block;
|
||||
min-width: 490px;
|
||||
}
|
||||
.t_top_box{
|
||||
width: 100%;
|
||||
height: 1.13rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.t_bottom_box{
|
||||
width: 100%;
|
||||
height: 3.17rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.t_right_box{
|
||||
display: inline-block;
|
||||
width: 7.8rem;
|
||||
height: 4.6rem;
|
||||
position: relative;
|
||||
min-width: 560px;
|
||||
}
|
||||
.b_left_box{
|
||||
display: inline-block;
|
||||
width: 5.9rem;
|
||||
height: 3.6rem;
|
||||
position: relative;
|
||||
min-width: 425px;
|
||||
}
|
||||
.b_center_box{
|
||||
display: inline-block;
|
||||
width: 6rem;
|
||||
height: 3.6rem;
|
||||
position: relative;
|
||||
min-width: 432px;
|
||||
}
|
||||
.b_right_box{
|
||||
display: inline-block;
|
||||
width: 6rem;
|
||||
height: 3.6rem;
|
||||
position: relative;
|
||||
min-width: 432px;
|
||||
}
|
||||
.t_mbox{
|
||||
width: 3rem;
|
||||
height: 1.28rem;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
.t_rbox{
|
||||
background: #D9523F;
|
||||
}
|
||||
.t_gbox{
|
||||
background: #13D0B2;
|
||||
}
|
||||
.t_ybox{
|
||||
background: #F6A645;
|
||||
}
|
||||
.t_mbox i{
|
||||
display: inline-block;
|
||||
width: 0.46rem;
|
||||
height: 0.48rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 20%;
|
||||
margin: auto;
|
||||
}
|
||||
.t_mbox h2{
|
||||
font-size: 0.28rem;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
.t_mbox span{
|
||||
font-size: 0.2rem;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 24%;
|
||||
left: 48%;
|
||||
}
|
||||
.t_rbox i{
|
||||
background: url(../img/indent.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.t_gbox i{
|
||||
background: url(../img/vip.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.t_ybox i{
|
||||
background: url(../img/consumption.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.t_nav{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.t_nav li{
|
||||
display: inline-block;
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
.t_nav li span{
|
||||
font-size: 0.16rem;
|
||||
color: #1AA1FD;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
top: 25%;
|
||||
}
|
||||
.t_nav li h1{
|
||||
font-size: 0.30rem;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
top: 50%;
|
||||
}
|
||||
.t_nav li i{
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: -0.2rem;
|
||||
background: url('../img/sper.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.t_table{
|
||||
font-size: 0.16rem;
|
||||
color: #fff;
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
border-spacing: 0;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
margin-top: 12%;
|
||||
}
|
||||
.t_table tr{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 0.42rem;
|
||||
}
|
||||
.t_table thead tr{
|
||||
background: #053A98;
|
||||
}
|
||||
.t_table tbody tr td:first-child{
|
||||
border-left: 1px solid #053A98;
|
||||
}
|
||||
.t_table td{
|
||||
border-bottom: 1px solid #053A98;
|
||||
border-right: 1px solid #053A98;
|
||||
}
|
||||
.t_title{
|
||||
position: absolute;
|
||||
font-size: 0.18rem;
|
||||
color: #fff;
|
||||
left: 5%;
|
||||
top: 10%;
|
||||
}
|
||||
.t_b_h,t_b_m{
|
||||
position: absolute;
|
||||
font-size: 0.16rem;
|
||||
left: 54%;
|
||||
width: 50%;
|
||||
height: 4.6rem;
|
||||
}
|
||||
.t_b_h span{
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
top: 10%;
|
||||
}
|
||||
.t_b_h img{
|
||||
position: absolute;
|
||||
width: 0.53rem;
|
||||
height: 0.53rem;
|
||||
top: 6%;
|
||||
left: 24%
|
||||
}
|
||||
.t_b_h h3{
|
||||
font-size: 0.36rem;
|
||||
color: #F0FF00;
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
top: 8%;
|
||||
width: 1rem;
|
||||
}
|
||||
.t_b_h h3 span{
|
||||
font-size: 0.2rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 28%;
|
||||
color: #0072FF;
|
||||
}
|
||||
.t_b_m img{
|
||||
position: absolute;
|
||||
left: 52%;
|
||||
top: 22%;
|
||||
border-top: 1px dotted #F0FF00;
|
||||
padding: 0 0.18rem;
|
||||
padding-top: 20px;
|
||||
width: 3.19rem;
|
||||
height: 1.67rem;
|
||||
}
|
||||
.t_b_box,.t_b_box1,.t_b_box2,.t_b_box3{
|
||||
width: 1.3rem;
|
||||
height: 0.56rem;
|
||||
border: 1px dotted #F0FF00;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
}
|
||||
.t_b_box{
|
||||
top: 68%;
|
||||
left: 56%;
|
||||
}
|
||||
.t_b_box span,.t_b_box1 span,.t_b_box2 span,.t_b_box3 span{
|
||||
font-size: 0.14rem;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
}
|
||||
.t_b_box i,.t_b_box1 i,.t_b_box2 i,.t_b_box3 i{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 15%
|
||||
}
|
||||
.t_b_box i{
|
||||
background: url('../img/t.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.t_b_box1 i{
|
||||
background: url('../img/s.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.t_b_box2 i{
|
||||
background: url('../img/j.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.t_b_box3 i{
|
||||
background: url('../img/g.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.t_b_box h2,.t_b_box1 h2,.t_b_box2 h2,.t_b_box3 h2{
|
||||
font-size: 0.18rem;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 40%;
|
||||
}
|
||||
.t_b_box1{
|
||||
top: 68%;
|
||||
left: 78%;
|
||||
}
|
||||
.t_b_box2{
|
||||
top: 84%;
|
||||
left: 56%;
|
||||
}
|
||||
.t_b_box3{
|
||||
top: 84%;
|
||||
left: 78%;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
BIN
8.环境检测/img/g.png
BIN
8.环境检测/img/g.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
BIN
8.环境检测/img/j.png
BIN
8.环境检测/img/j.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
BIN
8.环境检测/img/s.png
BIN
8.环境检测/img/s.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
BIN
8.环境检测/img/t.png
BIN
8.环境检测/img/t.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 175 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
@ -1,160 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
<title>设备环境监测平台大数据</title>
|
||||
<script src="js/jquery-2.2.1.min.js"></script>
|
||||
<script src="js/rem.js"></script>
|
||||
<script src="js/echarts.min.js"></script>
|
||||
<script src="js/guangxi.js"></script>
|
||||
<script src="js/index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="t_container">
|
||||
<header class="t_header">
|
||||
<span>设备环境监测平台</span>
|
||||
</header>
|
||||
<main class="t_main">
|
||||
<div class="t_left_box">
|
||||
<img class="t_l_line" src="img/left_line.png" alt="">
|
||||
<div class="t_mbox t_rbox">
|
||||
<i></i>
|
||||
<span>本月订单数</span>
|
||||
<h2>18000</h2>
|
||||
</div>
|
||||
<div class="t_mbox t_gbox">
|
||||
<i></i>
|
||||
<span>本月新增会员</span>
|
||||
<h2>1000</h2>
|
||||
</div>
|
||||
<div class="t_mbox t_ybox">
|
||||
<i></i>
|
||||
<span>一次消费会员</span>
|
||||
<h2>600</h2>
|
||||
</div>
|
||||
<img class="t_r_line" src="img/right_line.png" alt="">
|
||||
</div>
|
||||
<div class="t_center_box">
|
||||
<div class="t_top_box">
|
||||
<img class="t_l_line" src="img/left_line.png" alt="">
|
||||
<ul class="t_nav">
|
||||
<li>
|
||||
<span>设备数</span>
|
||||
<h1>500</h1>
|
||||
<i></i>
|
||||
</li>
|
||||
<li>
|
||||
<span>上月设备增加数</span>
|
||||
<h1>30</h1>
|
||||
<i></i>
|
||||
</li>
|
||||
<li>
|
||||
<span>增值率</span>
|
||||
<h1>75%</h1>
|
||||
</li>
|
||||
</ul>
|
||||
<img class="t_r_line" src="img/right_line.png" alt="">
|
||||
</div>
|
||||
<div class="t_bottom_box">
|
||||
<img class="t_l_line" src="img/left_line.png" alt="">
|
||||
<div id="chart_3" class="echart" style="width: 100%; height: 3.6rem;"></div>
|
||||
<img class="t_r_line" src="img/right_line.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="t_right_box">
|
||||
<img class="t_l_line" src="img/left_line.png" alt="">
|
||||
<div id="chart_4" class="echart" style="width: 50%; height: 4.6rem; position: absolute;"></div>
|
||||
<header class="t_b_h">
|
||||
<span>开关次数</span>
|
||||
<img src="img/end.png"></img>
|
||||
<h3>15<span>次</span></h3>
|
||||
</header>
|
||||
<main class="t_b_m">
|
||||
<img src="img/map.png" alt="">
|
||||
<div class="t_b_box">
|
||||
<span>溫度</span>
|
||||
<i></i>
|
||||
<h2>23℃</h2>
|
||||
</div>
|
||||
<div class="t_b_box1">
|
||||
<span>湿度</span>
|
||||
<i></i>
|
||||
<h2>56RH</h2>
|
||||
</div>
|
||||
<div class="t_b_box2">
|
||||
<span>信号</span>
|
||||
<i></i>
|
||||
<h2>-90dBm</h2>
|
||||
</div>
|
||||
<div class="t_b_box3">
|
||||
<span>光线</span>
|
||||
<i></i>
|
||||
<h2>250LX</h2>
|
||||
</div>
|
||||
</main>
|
||||
<img class="t_r_line" src="img/right_line.png" alt="">
|
||||
</div>
|
||||
<div class="b_left_box">
|
||||
<img class="t_l_line" src="img/left_line.png" alt="">
|
||||
<div id="chart_2" class="echart" style="width: 100%; height: 3.6rem;"></div>
|
||||
<img class="t_r_line" src="img/right_line.png" alt="">
|
||||
</div>
|
||||
<div class="b_center_box">
|
||||
<img class="t_l_line" src="img/left_line.png" alt="">
|
||||
<div id="chart_1" class="echart" style="width: 100%; height: 3.6rem;"></div>
|
||||
<img class="t_r_line" src="img/right_line.png" alt="">
|
||||
</div>
|
||||
<div class="b_right_box">
|
||||
<img class="t_l_line" src="img/left_line.png" alt="">
|
||||
<h1 class="t_title">设备维保数据查看</h1>
|
||||
<table class="t_table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>维护时间</th>
|
||||
<th>维保人</th>
|
||||
<th>维保电话</th>
|
||||
<th>更换水量</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2018-02-06</td>
|
||||
<td>张伟</td>
|
||||
<td>13111345462</td>
|
||||
<td>1000ml</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2018-02-06</td>
|
||||
<td>张伟</td>
|
||||
<td>13111345462</td>
|
||||
<td>1000ml</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2018-02-06</td>
|
||||
<td>张伟</td>
|
||||
<td>13111345462</td>
|
||||
<td>1000ml</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2018-02-06</td>
|
||||
<td>张伟</td>
|
||||
<td>13111345462</td>
|
||||
<td>1000ml</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2018-02-06</td>
|
||||
<td>张伟</td>
|
||||
<td>13111345462</td>
|
||||
<td>1000ml</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<img class="t_r_line" src="img/right_line.png" alt="">
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
1
8.环境检测/js/echarts.min.js
vendored
1
8.环境检测/js/echarts.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,688 +0,0 @@
|
||||
$(function () {
|
||||
echart_1();
|
||||
echart_2();
|
||||
echart_3();
|
||||
echart_4();
|
||||
|
||||
function echart_1() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(document.getElementById('chart_1'));
|
||||
option = {
|
||||
title: {
|
||||
text: '本月设备状态统计',
|
||||
top: 35,
|
||||
left: 20,
|
||||
textStyle: {
|
||||
fontSize: 18,
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b}: {c} ({d}%)",
|
||||
|
||||
},
|
||||
legend: {
|
||||
right: 20,
|
||||
top: 35,
|
||||
data: ['故障', '正常'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: '设备状态',
|
||||
type: 'pie',
|
||||
radius: ['0', '60%'],
|
||||
center: ['50%', '60%'],
|
||||
color: ['#e72325', '#98e002', '#2ca3fd'],
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{b}\n{d}%'
|
||||
},
|
||||
|
||||
},
|
||||
data: [{
|
||||
value: 6,
|
||||
name: '故障'
|
||||
},
|
||||
{
|
||||
value: 50,
|
||||
name: '正常',
|
||||
selected: true
|
||||
}
|
||||
]
|
||||
}]
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function echart_2() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(document.getElementById('chart_2'));
|
||||
var data = {
|
||||
id: 'multipleBarsLines',
|
||||
title: '2018年前半年检测统计',
|
||||
legendBar: ['正面占比', '中立占比', '负面占比'],
|
||||
symbol: '', //数值是否带百分号 --默认为空 ''
|
||||
legendLine: ['同期对比'],
|
||||
xAxis: ['一月', '二月', '三月', '四月', '五月', '六月'],
|
||||
yAxis: [
|
||||
[8, 10, 10, 11, 4, 13]
|
||||
],
|
||||
lines: [
|
||||
[10, 10, 9, 11, 7, 4]
|
||||
],
|
||||
barColor: ['#3FA7DC', '#7091C4', '#5170A2'], //柱子颜色 必填参数
|
||||
lineColor: ['#D9523F'], // 折线颜色
|
||||
|
||||
};
|
||||
/////////////end/////////
|
||||
|
||||
var myData = (function test() {
|
||||
var yAxis = data.yAxis || [];
|
||||
var lines = data.lines || [];
|
||||
var legendBar = data.legendBar || [];
|
||||
var legendLine = data.legendLine || [];
|
||||
var symbol = data.symbol || ' ';
|
||||
var seriesArr = [];
|
||||
var legendArr = [];
|
||||
yAxis && yAxis.forEach((item, index) => {
|
||||
legendArr.push({
|
||||
name: legendBar && legendBar.length > 0 && legendBar[index]
|
||||
});
|
||||
seriesArr.push({
|
||||
name: legendBar && legendBar.length > 0 && legendBar[index],
|
||||
type: 'bar',
|
||||
barGap: '0.5px',
|
||||
data: item,
|
||||
barWidth: data.barWidth || 12,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
formatter: '{c}' + symbol,
|
||||
position: 'top',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
fontFamily: '微软雅黑',
|
||||
textAlign: 'left',
|
||||
fontSize: 11,
|
||||
},
|
||||
},
|
||||
},
|
||||
itemStyle: { //图形样式
|
||||
normal: {
|
||||
barBorderRadius: 4,
|
||||
color: data.barColor[index]
|
||||
},
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
lines && lines.forEach((item, index) => {
|
||||
legendArr.push({
|
||||
name: legendLine && legendLine.length > 0 && legendLine[index]
|
||||
})
|
||||
seriesArr.push({
|
||||
name: legendLine && legendLine.length > 0 && legendLine[index],
|
||||
type: 'line',
|
||||
data: item,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: data.lineColor[index],
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
type: 'solid',
|
||||
}
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false, //折线上方label控制显示隐藏
|
||||
position: 'top',
|
||||
}
|
||||
},
|
||||
symbol: 'circle',
|
||||
symbolSize: 10
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
seriesArr,
|
||||
legendArr
|
||||
};
|
||||
})();
|
||||
|
||||
|
||||
option = {
|
||||
title: {
|
||||
show: true,
|
||||
top: '10%',
|
||||
left: '3%',
|
||||
text: data.title,
|
||||
textStyle: {
|
||||
fontSize: 18,
|
||||
color: '#fff'
|
||||
},
|
||||
subtext: data.subTitle,
|
||||
link: ''
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (params) {
|
||||
var time = '';
|
||||
var str = '';
|
||||
for (var i of params) {
|
||||
time = i.name.replace(/\n/g, '') + '<br/>';
|
||||
if (i.data == 'null' || i.data == null) {
|
||||
str += i.seriesName + '：无数据' + '<br/>'
|
||||
} else {
|
||||
str += i.seriesName + '：' + i.data + symbol + '%<br/>'
|
||||
}
|
||||
|
||||
}
|
||||
return time + str;
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'none'
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
right: data.legendRight || '30%',
|
||||
top: '12%',
|
||||
right: '5%',
|
||||
itemGap: 16,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
data: myData.legendArr,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
fontFamily: '微软雅黑',
|
||||
fontSize: 12,
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
x: 30,
|
||||
y: 80,
|
||||
x2: 30,
|
||||
y2: 60,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: data.xAxis,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1AA1FD',
|
||||
},
|
||||
symbol: ['none', 'arrow']
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: '0',
|
||||
textStyle: {
|
||||
lineHeight: 16,
|
||||
padding: [2, 2, 0, 2],
|
||||
height: 50,
|
||||
fontSize: 12,
|
||||
},
|
||||
rich: {
|
||||
Sunny: {
|
||||
height: 50,
|
||||
// width: 60,
|
||||
padding: [0, 5, 0, 5],
|
||||
align: 'center',
|
||||
},
|
||||
},
|
||||
formatter: function (params, index) {
|
||||
var newParamsName = "";
|
||||
var splitNumber = 5;
|
||||
var paramsNameNumber = params && params.length;
|
||||
if (paramsNameNumber && paramsNameNumber <= 4) {
|
||||
splitNumber = 4;
|
||||
} else if (paramsNameNumber >= 5 && paramsNameNumber <= 7) {
|
||||
splitNumber = 4;
|
||||
} else if (paramsNameNumber >= 8 && paramsNameNumber <= 9) {
|
||||
splitNumber = 5;
|
||||
} else if (paramsNameNumber >= 10 && paramsNameNumber <= 14) {
|
||||
splitNumber = 5;
|
||||
} else {
|
||||
params = params && params.slice(0, 15);
|
||||
}
|
||||
|
||||
var provideNumber = splitNumber; //一行显示几个字
|
||||
var rowNumber = Math.ceil(paramsNameNumber / provideNumber) || 0;
|
||||
if (paramsNameNumber > provideNumber) {
|
||||
for (var p = 0; p < rowNumber; p++) {
|
||||
var tempStr = "";
|
||||
var start = p * provideNumber;
|
||||
var end = start + provideNumber;
|
||||
if (p == rowNumber - 1) {
|
||||
tempStr = params.substring(start, paramsNameNumber);
|
||||
} else {
|
||||
tempStr = params.substring(start, end) + "\n";
|
||||
}
|
||||
newParamsName += tempStr;
|
||||
}
|
||||
|
||||
} else {
|
||||
newParamsName = params;
|
||||
}
|
||||
params = newParamsName;
|
||||
return '{Sunny|' + params + '}';
|
||||
},
|
||||
color: '#1AA1FD',
|
||||
},
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1AA1FD',
|
||||
},
|
||||
symbol: ['none', 'arrow']
|
||||
},
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#1AA1FD',
|
||||
type: 'solid'
|
||||
},
|
||||
}
|
||||
},
|
||||
series: myData.seriesArr
|
||||
}
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function echart_3() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(document.getElementById('chart_3'));
|
||||
|
||||
function showProvince() {
|
||||
var geoCoordMap = {
|
||||
'河池': [108.085179,24.700488],
|
||||
'柳州': [109.412578,24.354875],
|
||||
'梧州': [111.323462,23.478238],
|
||||
'南宁': [108.359656,22.81328],
|
||||
'北海': [109.171374,21.477419],
|
||||
'崇左': [107.347374,22.377503]
|
||||
};
|
||||
var data = [{
|
||||
name: '河池',
|
||||
value: 100
|
||||
},
|
||||
{
|
||||
name: '柳州',
|
||||
value: 100
|
||||
},
|
||||
{
|
||||
name: '梧州',
|
||||
value: 100
|
||||
},
|
||||
{
|
||||
name: '北海',
|
||||
value: 100
|
||||
},
|
||||
{
|
||||
name: '崇左',
|
||||
value: 100
|
||||
}
|
||||
];
|
||||
var max = 480,
|
||||
min = 9; // todo
|
||||
var maxSize4Pin = 100,
|
||||
minSize4Pin = 20;
|
||||
var convertData = function (data) {
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var geoCoord = geoCoordMap[data[i].name];
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value)
|
||||
});
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
myChart.setOption(option = {
|
||||
title: {
|
||||
text: '设备分布',
|
||||
subtext: '',
|
||||
x: 'center',
|
||||
textStyle: {
|
||||
color: '#FFF'
|
||||
},
|
||||
left: '6%',
|
||||
top: '10%'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
y: 'bottom',
|
||||
x: 'right',
|
||||
data: ['pm2.5'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
show: false,
|
||||
min: 0,
|
||||
max: 500,
|
||||
left: 'left',
|
||||
top: 'bottom',
|
||||
text: ['高', '低'], // 文本，默认为数值文本
|
||||
calculable: true,
|
||||
seriesIndex: [1],
|
||||
inRange: {}
|
||||
},
|
||||
geo: {
|
||||
show: true,
|
||||
map: 'guangxi',
|
||||
mapType: 'guangxi',
|
||||
label: {
|
||||
normal: {},
|
||||
//鼠标移入后查看效果
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
//鼠标缩放和平移
|
||||
roam: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// color: '#ddd',
|
||||
borderColor: 'rgba(147, 235, 248, 1)',
|
||||
borderWidth: 1,
|
||||
areaColor: {
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: 'rgba(175,238,238, 0)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba( 47,79,79, .1)' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
shadowColor: 'rgba(128, 217, 248, 1)',
|
||||
shadowOffsetX: -2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 10
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#389BB7',
|
||||
borderWidth: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'light',
|
||||
type: 'map',
|
||||
coordinateSystem: 'geo',
|
||||
data: convertData(data),
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#F4E925'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '点',
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'geo',
|
||||
symbol: 'pin',
|
||||
symbolSize: function (val) {
|
||||
var a = (maxSize4Pin - minSize4Pin) / (max - min);
|
||||
var b = minSize4Pin - a * min;
|
||||
b = maxSize4Pin - a * max;
|
||||
return a * val[2] + b;
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
// show: true,
|
||||
// textStyle: {
|
||||
// color: '#fff',
|
||||
// fontSize: 9,
|
||||
// }
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#F62157', //标志颜色
|
||||
}
|
||||
},
|
||||
zlevel: 6,
|
||||
data: convertData(data),
|
||||
},
|
||||
{
|
||||
name: 'light',
|
||||
type: 'map',
|
||||
mapType: 'hunan',
|
||||
geoIndex: 0,
|
||||
aspectScale: 0.75, //长宽比
|
||||
showLegendSymbol: false, // 存在legend时显示
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
roam: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#031525',
|
||||
borderColor: '#FFFFFF',
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#2B91B7'
|
||||
}
|
||||
},
|
||||
animation: false,
|
||||
data: data
|
||||
},
|
||||
{
|
||||
name: ' ',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
data: convertData(data.sort(function (a, b) {
|
||||
return b.value - a.value;
|
||||
}).slice(0, 5)),
|
||||
symbolSize: function (val) {
|
||||
return val[2] / 10;
|
||||
},
|
||||
showEffectOn: 'render',
|
||||
rippleEffect: {
|
||||
brushType: 'stroke'
|
||||
},
|
||||
hoverAnimation: true,
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: true
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#05C3F9',
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#05C3F9'
|
||||
}
|
||||
},
|
||||
zlevel: 1
|
||||
},
|
||||
|
||||
]
|
||||
});
|
||||
}
|
||||
showProvince();
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
// myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function echart_4() {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(document.getElementById('chart_4'));
|
||||
var data = [70, 34, 60, 78, 69];
|
||||
var titlename = ['1号机', '2号机', '3号机', '4号机', '5号机'];
|
||||
var valdata = [702, 406, 664, 793, 505];
|
||||
var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'];
|
||||
option = {
|
||||
title: {
|
||||
text: '设备使用频率',
|
||||
x: 'center',
|
||||
textStyle: {
|
||||
color: '#FFF'
|
||||
},
|
||||
left: '6%',
|
||||
top: '10%'
|
||||
},
|
||||
//图标位置
|
||||
grid: {
|
||||
top: '20%',
|
||||
left: '32%'
|
||||
},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: [{
|
||||
show: true,
|
||||
data: titlename,
|
||||
inverse: true,
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: (value, index) => {
|
||||
return [
|
||||
|
||||
`{lg|${index+1}} ` + '{title|' + value + '} '
|
||||
].join('\n')
|
||||
},
|
||||
rich: {
|
||||
lg: {
|
||||
backgroundColor: '#339911',
|
||||
color: '#fff',
|
||||
borderRadius: 15,
|
||||
// padding: 5,
|
||||
align: 'center',
|
||||
width: 15,
|
||||
height: 15
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
}, {
|
||||
show: true,
|
||||
inverse: true,
|
||||
data: valdata,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
|
||||
}],
|
||||
series: [{
|
||||
name: '条',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
data: data,
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 20,
|
||||
color: function(params) {
|
||||
var num = myColor.length;
|
||||
return myColor[params.dataIndex % num]
|
||||
},
|
||||
}
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '{c}%'
|
||||
}
|
||||
},
|
||||
}, {
|
||||
name: '框',
|
||||
type: 'bar',
|
||||
yAxisIndex: 1,
|
||||
barGap: '-100%',
|
||||
data: [100, 100, 100, 100, 100],
|
||||
barWidth: 15,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'none',
|
||||
borderColor: '#00c1de',
|
||||
borderWidth: 3,
|
||||
barBorderRadius: 15,
|
||||
}
|
||||
}
|
||||
}, ]
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
// window.addEventListener("resize", function () {
|
||||
// myChart.resize();
|
||||
// });
|
||||
}
|
||||
});
|
||||
4
8.环境检测/js/jquery-2.2.1.min.js
vendored
4
8.环境检测/js/jquery-2.2.1.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,14 +0,0 @@
|
||||
$(function(){
|
||||
var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值
|
||||
var wH = window.innerHeight;// 当前窗口的高度
|
||||
var wW = window.innerWidth;// 当前窗口的宽度
|
||||
var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
|
||||
$('html').css('font-size', rem + "px");
|
||||
});
|
||||
$(window).resize(function (){// 绑定到窗口的这个事件中
|
||||
var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值
|
||||
var wH = window.innerHeight;// 当前窗口的高度
|
||||
var wW = window.innerWidth;// 当前窗口的宽度
|
||||
var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
|
||||
$('html').css('font-size', rem + "px");
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user