meidu2021/daju/WebRoot/plug-in/dataview/sensor_yali.js

$(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+"</br>";
        	    params.forEach(function (item) {
        	        result += item.marker + " " + item.seriesName + " : " + item.value +"MPa</br>";
        	    });
        	    return result;
        	},
//        	"{b}<br/>{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+"</br>";
        	    params.forEach(function (item) {
        	        result += item.marker + " " + item.seriesName + " : " + item.value +"MPa</br>";
        	    });
        	    return result;
        	},
//        	 "{b}<br/>{a0}: {c0}MPa<br/>{a1}: {c1}MPa<br/>{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+"</br>";
        	    params.forEach(function (item) {
        	        result += item.marker + " " + item.seriesName + " : " + item.value +"MPa</br>";
        	    });
        	    return result;
        	},
//        	 "{b}<br/>{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+"</br>";
        	    params.forEach(function (item) {
        	        result += item.marker + " " + item.seriesName + " : " + item.value +"MPa</br>";
        	    });
        	    return result;
        	},
//        	"{b}<br/>{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);
}