meidu2021/daju/WebRoot/plug-in/dataview/sensor_height.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_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);
}