$(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_dixiacheku(); loadoOption_ec_fengjifang(); loadoOption_ec_bengfangjishuijing(); //loadoOption_ec_bengfangshuixiang(); loadoOption_ec_wushuijing(); }) ; function loadoOption_ec_wushuijing(){ ec_wushuijing.clear(); var option = { title: { //text: '污水井', show: true, textStyle: { fontWeight: 'normal', fontSize: 22, color: '#3db3cb' }, left: '2%', top: '2%' }, tooltip: { trigger: 'axis', 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' } }, min: function(value) { return Math.round(value.min - 10); }, max: function(value) { return Math.round(value.min + 10); }, 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: [12, 11, 14, 12, 16, 15] }] } ec_wushuijing.setOption(option); } function loadoOption_ec_bengfangjishuijing(){ ec_bengfangjishuijing.clear(); var option = { title: { // text: '泵房集水井', show: true, textStyle: { fontWeight: 'normal', fontSize: 22, color: '#3db3cb' }, left: '2%', top: '2%' }, tooltip: { trigger: 'axis', 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:['泵房集水井','泵房水箱'], 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: '泵房集水井', type: 'bar', 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: [12, 11, 14, 12, 16, 15] }, { 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: [12, 11, 14, 12, 16, 15] }] } ec_bengfangjishuijing.setOption(option); } function loadoOption_ec_bengfangshuixiang(){ ec_bengfangshuixiang.clear(); var option = { title: { // text: '泵房水箱', show: true, textStyle: { fontWeight: 'normal', fontSize: 22, color: '#3db3cb' }, left: '2%', top: '2%' }, tooltip: { trigger: 'axis', 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: [220, 210, 245, 222, 265, 250] }] } ec_bengfangshuixiang.setOption(option); } function loadoOption_ec_fengjifang(){ ec_fengjifang.clear(); var option = { title: { //text: '风机房集水井', show: true, textStyle: { fontWeight: 'normal', fontSize: 22, color: '#3db3cb' }, left: '2%', top: '2%' }, tooltip: { trigger: 'axis', 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: [12, 11, 14, 12, 16, 15] }] } ec_fengjifang.setOption(option); } function loadoOption_ec_dixiacheku(){ ec_dixiacheku.clear(); var option = { title: { // text: '集水井', show: true, textStyle: { fontWeight: 'normal', fontSize: 22, color: '#3db3cb' }, left: '2%', top: '2%' }, tooltip: { trigger: 'axis', 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:['地下车库西南','地下车库东南','地下车库东中','地下车库西中','地下车库西北'], 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: '地下车库西南', 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: [12, 11, 14, 12, 16, 15] },{ 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: [12, 11, 14, 12, 16, 15] }, { 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: [12, 11, 14, 12, 16, 15] }, { 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: [12, 11, 14, 12, 16, 15] }, { 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: [12, 11, 14, 12, 16, 15] },] } ec_dixiacheku.setOption(option); }