$(function () {
// var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值
var whdef = 100/916;// 表示1920的设计图,使用100PX的默认值
var wH = window.innerHeight;// 当前窗口的高度
var wW = window.innerWidth;// 当前窗口的宽度
// var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
var rem = wH * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
$('html').css('font-size', rem + "px");
loadoOption_ec_lefttop();
loadoOption_ec_righttop();
loadoOption_ec_leftbtm();
loadoOption_ec_rightbtm();
}) ;
function loadoOption_ec_lefttop(){
ec_lefttop.clear();
var option = {
title: {
text: '',
show: true,
textStyle: {
fontWeight: 'normal',
fontSize: 22,
color: '#3db3cb'
},
left: '2%',
top: '2%'
},
tooltip: {
trigger: 'axis',
extraCssText:'width:180px;',
formatter: function(params) {
var result = '';
result+= params[0].axisValue+"";
params.forEach(function (item) {
result += item.marker + " " + item.seriesName + " : " + item.value +"V";
});
return result;
},
// "{b}
{a0}: {c0}V
{a1}: {c1}V
{a2}: {c2}V",
position: function (point, params, dom, rect, size) {
// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
// 提示框位置
var x = 0; // x坐标位置
var y = 0; // y坐标位置
// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// 外层div大小
// var viewWidth = size.viewSize[0];
// var viewHeight = size.viewSize[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 5;
} else { // 左边放的下
x = pointX - boxWidth;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 5;
} else { // 上边放得下
y = pointY - boxHeight;
}
return [x, y];
}
},
legend: {
data:['泵房喷淋泵电压','泵房消防泵电压','泵房生活水泵电压'],
textStyle: {
fontSize: 14,
color: '#799dff'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: 'rgba(128, 128, 128, 0.5)'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
color: '#999'
}
},
data: ['12:00:00', '12:00:05', '12:00:10', '12:00:15', '12:00:20', '12:00:25']
}],
yAxis: [{
type: 'value',
name: '',
min: function(value) {
return Math.round(value.min - 10);
},
max: function(value) {
return Math.round(value.min + 10);
},
axisTick: {
show: false
},
axisLine: {
show:false,
lineStyle: {
color: '#fff'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
color: '#799dff'
}
},
splitLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(121, 157, 255, 0.5)'
}
}
}],
series: [{
name: '泵房喷淋泵电压',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'},
]
},
data: [381, 381, 381, 381, 381, 381]
},
{
name: '泵房消防泵电压',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'},
]
},
data:[381, 381, 381, 381, 381, 381]
},
{
name: '泵房生活水泵电压',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'},
]
},
data: [381, 381, 381, 381, 381, 381]
},
]
}
ec_lefttop.setOption(option);
}
function loadoOption_ec_righttop(){
ec_righttop.clear();
var option = {
title: {
text: '',
show: true,
textStyle: {
fontWeight: 'normal',
fontSize: 22,
color: '#3db3cb'
},
left: '2%',
top: '2%'
},
tooltip: {
trigger: 'axis',
formatter: function(params) {
var result = '';
result+= params[0].axisValue+"";
params.forEach(function (item) {
result += item.marker + " " + item.seriesName + " : " + item.value +"A";
});
return result;
},
// "{b}
{a0}: {c0}A
{a1}: {c1}A
{a2}: {c2}A
{a3}: {c3}A
{a4}: {c4}A
{a5}: {c5}A
{a6}: {c6}A
{a7}: {c7}A
{a8}: {c8}A",
extraCssText:'width:180px;',
position: function (point, params, dom, rect, size) {
// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
// 提示框位置
var x = 0; // x坐标位置
var y = 0; // y坐标位置
// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// 外层div大小
// var viewWidth = size.viewSize[0];
// var viewHeight = size.viewSize[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 5;
} else { // 左边放的下
x = pointX - boxWidth;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 5;
} else { // 上边放得下
y = pointY - boxHeight;
}
return [x, y];
}
},
legend: {
data:['生活水泵','喷淋泵','消防泵','风AUH-1F','风AUH-2F-4','风AUH-2F-2','风AUH-1F-1','风AUH-2F-3','风SF2F-1','风AUH-2F-1'],
textStyle: {
fontSize: 14,
color: '#799dff'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: 'rgba(128, 128, 128, 0.5)'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
color: '#999'
}
},
data: ['12:00:00', '12:00:05', '12:00:10', '12:00:15', '12:00:20', '12:00:25']
}],
yAxis: [{
type: 'value',
name: '',
axisTick: {
show: false
},
axisLine: {
show:false,
lineStyle: {
color: '#fff'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
color: '#799dff'
}
},
splitLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(121, 157, 255, 0.5)'
}
}
}],
series: [{
name: '生活水泵',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '喷淋泵',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '消防泵',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '风AUH-1F',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '风AUH-2F-4',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '风AUH-2F-2',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '风AUH-1F-1',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '风AUH-2F-3',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '风SF2F-1',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '风AUH-2F-1',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
}]
}
ec_righttop.setOption(option);
}
function loadoOption_ec_leftbtm(){
ec_leftbtm.clear();
var option = {
title: {
text: '',
show: true,
textStyle: {
fontWeight: 'normal',
fontSize: 22,
color: '#3db3cb'
},
left: '2%',
top: '2%'
},
tooltip: {
trigger: 'axis',
formatter: function(params) {
var result = '';
result+= params[0].axisValue+"";
params.forEach(function (item) {
result += item.marker + " " + item.seriesName + " : " + item.value +"A";
});
return result;
},
// "{b}
{a0}: {c0}A
{a1}: {c1}A
{a2}: {c2}A
{a3}: {c3}A
{a4}: {c4}A
{a5}: {c5}A
{a6}: {c6}A
{a7}: {c7}A
{a8}: {c8}A
{a9}: {c9}A",
extraCssText:'width:180px;',
position: function (point, params, dom, rect, size) {
// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
// 提示框位置
var x = 0; // x坐标位置
var y = 0; // y坐标位置
// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// 外层div大小
// var viewWidth = size.viewSize[0];
// var viewHeight = size.viewSize[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 5;
} else { // 左边放的下
x = pointX - boxWidth;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 5;
} else { // 上边放得下
y = pointY - boxHeight;
}
return [x, y];
}
},
legend: {
data:['风FAU-3F-2','风EF-3F-1','风EF-3F-2','风AHU-4F-2','风FAU-4F-2','风AUH-3F-1','风AHU-4F-1','风FAU-4F-1','风SF-3F-1','风FAU-3F-1'],
textStyle: {
fontSize: 14,
color: '#799dff'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: 'rgba(128, 128, 128, 0.5)'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
color: '#999'
}
},
data: ['12:00:00', '12:00:05', '12:00:10', '12:00:15', '12:00:20', '12:00:25']
}],
yAxis: [{
type: 'value',
name: '',
axisTick: {
show: false
},
axisLine: {
show:false,
lineStyle: {
color: '#fff'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
color: '#799dff'
}
},
splitLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(121, 157, 255, 0.5)'
}
}
}],
series: [{
name: '风FAU-3F-2',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '风EF-3F-1',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '风EF-3F-2',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '风AHU-4F-2',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '风FAU-4F-2',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '风AUH-3F-1',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '风AHU-4F-1',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '风FAU-4F-1',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '风SF-3F-1',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '风FAU-3F-1',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
}]
}
ec_leftbtm.setOption(option);
}
function loadoOption_ec_rightbtm(){
ec_rightbtm.clear();
var option = {
title: {
text: '',
show: true,
textStyle: {
fontWeight: 'normal',
fontSize: 22,
color: '#3db3cb'
},
left: '2%',
top: '2%'
},
tooltip: {
trigger: 'axis',
formatter: function(params) {
var result = '';
result+= params[0].axisValue+"";
params.forEach(function (item) {
result += item.marker + " " + item.seriesName + " : " + item.value +"A";
});
return result;
},
// "{b}
{a0}: {c0}A
{a1}: {c1}A
{a2}: {c2}A
{a3}: {c3}A
{a4}: {c4}A
{a5}: {c5}A
{a6}: {c6}A
{a7}: {c7}A
{a8}: {c8}A",
extraCssText:'width:180px;',
position: function (point, params, dom, rect, size) {
// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
// 提示框位置
var x = 0; // x坐标位置
var y = 0; // y坐标位置
// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// 外层div大小
// var viewWidth = size.viewSize[0];
// var viewHeight = size.viewSize[1];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 5;
} else { // 左边放的下
x = pointX - boxWidth;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 5;
} else { // 上边放得下
y = pointY - boxHeight;
}
return [x, y];
}
},
legend: {
data:['剧场后排风机','剧场大厅风机','剧场顶风机','剧场前排风机','空调1号','空调2号','空调3号','空调4号','空调5号'],
textStyle: {
fontSize: 14,
color: '#799dff'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: 'rgba(128, 128, 128, 0.5)'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
color: '#999'
}
},
data: ['12:00:00', '12:00:05', '12:00:10', '12:00:15', '12:00:20', '12:00:25']
}],
yAxis: [{
type: 'value',
name: '',
axisTick: {
show: false
},
axisLine: {
show:false,
lineStyle: {
color: '#fff'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
color: '#799dff'
}
},
splitLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(121, 157, 255, 0.5)'
}
}
}],
series: [{
name: '剧场后排风机',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '剧场大厅风机',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '剧场顶风机',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '剧场前排风机',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '空调1号',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '空调2号',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '空调3号',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '空调4号',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
},
{
name: '空调5号',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
data: [0, 0, 0, 0, 0, 0]
}]
}
ec_rightbtm.setOption(option);
}