$(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_rightbtm();
loadoOption_ec_leftbtm();
}) ;
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 +"MPa";
});
return result;
},
// "{b}
{a}: {c}MPa",
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];
}
},
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'
}
},
min: function(value) {
return Math.round(value.min - 10);
},
max: function(value) {
return Math.round(value.min + 10);
},
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: [1.2, 0.9, 1.0, 0.5, 1.0, 1.1]
}]
}
ec_rightbtm.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 +"MPa";
});
return result;
},
// "{b}
{a0}: {c0}MPa
{a1}: {c1}MPa
{a2}: {c2}MPa",
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'],
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'
}
},
min: function(value) {
return Math.round(value.min - 10);
},
max: function(value) {
return Math.round(value.min + 10);
},
splitLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(121, 157, 255, 0.5)'
}
}
}],
series: [{
name: '生活水泵1',
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: '平均值'},
],
symbolOffset:[0,0]
},
data: [1.2, 0.9, 1.0, 0.5, 1.0, 1.1]
},
{
name: '生活水泵2',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
],
symbolOffset:[0,-40]
},
markLine : {
data : [
{type : 'average', name: '平均值'},
]
},
data: [1.2, 0.9, 1.0, 0.5, 1.0, 1.1]
},
{
name: '生活水泵3',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 15,
showSymbol: true,
lineStyle: {
normal: {
width: 3
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
],
symbolOffset:[0,-80]
},
markLine : {
data : [
{type : 'average', name: '平均值'},
]
},
data: [1.2, 0.9, 1.0, 0.5, 1.0, 1.1]
},
]
}
ec_leftbtm.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 +"MPa";
});
return result;
},
// "{b}
{a}: {c}MPa",
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];
}
},
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'
}
},
min: function(value) {
return Math.round(value.min - 10);
},
max: function(value) {
return Math.round(value.min + 10);
},
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: [1.2, 0.9, 1.0, 0.5, 1.0, 1.1]
}]
}
ec_righttop.setOption(option);
}
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',
formatter: function(params) {
var result = '';
result+= params[0].axisValue+"";
params.forEach(function (item) {
result += item.marker + " " + item.seriesName + " : " + item.value +"MPa";
});
return result;
},
// "{b}
{a}: {c}MPa",
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];
}
},
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'
}
},
min: function(value) {
return Math.round(value.min - 10);
},
max: function(value) {
return Math.round(value.min + 10);
},
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: [1.2, 0.9, 1.0, 0.5, 1.0, 1.1]
}]
}
ec_lefttop.setOption(option);
}