meidu2021/daju/WebRoot/plug-in/dataview/tongji.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");
    //加载统计图1---能耗饼图
    loadoOption1();
    //加载统计图2---能耗条形图
    loadoOption2();
    //加载统计图3----能耗折线图
    loadoOption3();
    //加载统计图4----6个月能耗
    	loadoOption4();
	//loadOptionYibiao1();
    //	loadOptionRiLi();
}) ;

function loadOptionBaojingbar(){
	
}

function getVirtulData() {
	var currDate = new Date();
	var currMonth =  echarts.format.formatTime('yyyy-MM', currDate);
    var date = +echarts.number.parseDate(currMonth+"-01");
    var end = +echarts.number.parseDate(new Date());
    var dayTime = 3600 * 24 * 1000;
    var data = [];
    for (var time = date; time < end; time += dayTime) {
        data.push([
            echarts.format.formatTime('yyyy-MM-dd', time),
            Math.floor(Math.random() * 100)
        ]);
    }
    return data;
}

function getPieSeries(scatterData, chart) {
    return echarts.util.map(scatterData, function (item, index) {
        var center = chart.convertToPixel('calendar', item);
        return {
            id: index + 'pie',
            type: 'pie',
            center: center,
            label: {
                normal: {
                    formatter: '{c}',
                    position: 'inside'
                }
            },
            radius: 25	,
            data: []
        };
    });
}

function getPieSeriesUpdate(scatterData, chart) {
    return echarts.util.map(scatterData, function (item, index) {
        var center = chart.convertToPixel('calendar', item);
        return {
        	 id: index + 'pie',
             type: 'pie',
             center: center,
             label: {
                 normal: {
                     formatter: '{c}',
                     position: 'inside'
                 }
             },
             radius: 25	,
             data: [ ]
        };
    });
}


function loadOptionRiLi(){
//	var dom = document.getElementById("container");
//	var myChart = echarts.init(dom);
	var app = {};
	option = null;
	var cellSize = [120, 80];
	var pieRadius = 30;

	
	var scatterData = getVirtulData();
	if(myChartRiLi){
		myChartRiLi.clear();
	}
	option = {
	     
	    tooltip : {},
	    legend: {
	        data: [ {
	            name: '正常',
	            // 设置文本为红色
	            textStyle: {
	                color: 'white'
	            }
	        },{
	            name: '报警',
	            // 设置文本为红色
	            textStyle: {
	                color: 'white'
	            }
	        },{
	            name: '设备离线',
	            // 设置文本为红色
	            textStyle: {
	                color: 'white'
	            }
	        }],
	        top: 1,
	        color:'red'
	    },
	    calendar: {
	        top: 45,
	        left: 'center',
	        height:'auto',
	        orient: 'vertical',
	        cellSize: cellSize,
	        splitLine: {
	            show: true,
	            lineStyle: {
	                color: 'rgb(0,136,212)',
	                width: 1,
	                type: 'solid'
	            }
	        },
	        yearLabel: {
	            show: false,
	            textStyle: {
	                fontSize: 30
	            }
	        },
	        dayLabel: {
	            margin: 7,
	            firstDay: 1,
	            nameMap: ['日', '一', '二', '三', '四', '五', '六'],
	        	color:'white',
	        	fontSize:13
	        },
	        monthLabel: {
	            show: true
	        },
	        itemStyle: {
	            normal: {
	                color: 'rgba(255,255,255,0)',
	                borderWidth: 1,
	                borderColor: 'rgb(0,136,212)'
	            }
	        },
	        range: ['2018-07']
	    },
	    series: [{
	        id: 'label',
	        type: 'scatter',
	        coordinateSystem: 'calendar',
	        symbolSize: 1,
	        label: {
	            normal: {
	                show: true,
	                formatter: function (params) {
	                    return echarts.format.formatTime('dd', params.value[0]);
	                },
	                offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
	                textStyle: {
	                    color: 'white',
	                    fontSize: 14
	                },
	                
	            }
	        },
	        data: scatterData
	    }]
	};

	if (!app.inNode) {
	    var pieInitialized;
	    setTimeout(function () {
	        pieInitialized = true;
	        myChartRiLi.setOption({
	            series: getPieSeriesUpdate(scatterData, myChartRiLi)
	        });
	    }, 10);

	    app.onresize = function () {
	        if (pieInitialized) {
	        	myChartRiLi.setOption({
	                series: getPieSeriesUpdate(scatterData, myChartRiLi)
	            });
	        }
	    };
	};
	if (option && typeof option === "object") {
	    myChartRiLi.setOption(option, true);
	}
}

function loadOptionYibiao1(){
	option = {
    tooltip : {
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    series : [
        {
            name:'业务指标',
            type:'gauge',
            startAngle: 180,
            endAngle: 0,
            center : ['50%', '90%'],    // 默认全局居中
            radius : 320,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    width: 200
                }
            },
            axisTick: {            // 坐标轴小标记
                splitNumber: 10,   // 每份split细分多少段
                length :12,        // 属性length控制线长
            },
            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                formatter: function(v){
                    switch (v+''){
                        case '10': return '低';
                        case '50': return '中';
                        case '90': return '高';
                        default: return '';
                    }
                },
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: '#fff',
                    fontSize: 15,
                    fontWeight: 'bolder'
                }
            },
            pointer: {
                width:50,
                length: '90%',
                color: 'rgba(255, 255, 255, 0.8)'
            },
            title : {
                show : true,
                offsetCenter: [0, '-60%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: '#fff',
                    fontSize: 30
                }
            },
            detail : {
                show : true,
                backgroundColor: 'rgba(0,0,0,0)',
                borderWidth: 0,
                borderColor: '#ccc',
                width: 100,
                height: 40,
                offsetCenter: [0, -40],       // x, y，单位px
                formatter:'{value}%',
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontSize : 50
                }
            },
            data:[{value: 50, name: '完成率'}]
        }
    ]
};
	//yibiao1.setOption(option);       
}

//加载统计图1数据
function  loadoOption1(){
     myChart1.clear();

    var data = [{
        value:92,
        name: '室内灯'
    },{
        value:132,
        name: '室外灯'
    }, {
        value: 181,
        name: '水泵'
    }, {
        value: 142,
        name: '空调'
    }, {
        value: 212,
        name: '电梯'
    }, {
        value: 28,
        name: '周边设施'
    }, {
        value: 382,
        name: '音响'
    }, {
        value: 41,
        name: '网络设施'
    }];
    var option = {
        title: {
            text:'1000',
            subtext: '总功率',
            left:'center',
            top:'50%',
            padding:[24,0],
            textStyle:{
                color:'#fff',
                fontSize:18,
                align:'center'
            }
        },
        backgroundColor: 'rgba(255,255,255,0)',
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            extraCssText:'height:60px;',
            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: {
            orient: 'horizontal',
            top: '2%',
            left: 'center',
            data: ['室内灯','室外灯','空调','水泵','电梯','周边设施','音响','网络设施'],
            textStyle:{
                fontSize: 11,
                color: '#6cbbe6'
            }
        },
        series: [{
            name: '受理数',
            type: 'pie',
            selectedMode: 'single',
            center : ['50%', '60%'],
            radius: ['40%', '58%'],
            color: ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B','#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD'],
            label: {
                normal: {
                	  show: false,
                    position: 'outside',
                    formatter: '{b}',
                    textStyle: {
                        color: '#3db3cb',
                        fontSize: 12
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false,
                    lineStyle: {
                        color: '#3db3cb'
                    }
                }
            },
            animationDuration: function (idx) {
                // 越往后的数据延迟越大
                return 10000;
            },
            data: data
        }]
    };
    myChart1.setOption(option);

}
//加载统计图2数据
function  loadoOption2(){
    myChart2.clear();
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                top:'5%',
                left: '5%',
                right: '5%',
                bottom: '5%',
                containLabel: true,
            },
            xAxis: {
                type: 'value',
    
                splitLine: {show: false},
                boundaryGap: [0, 0.01],
                axisLabel:{
                    textStyle:{
                        color: '#6cbbe6'
                    }
                },
            },
            yAxis: {
                type: 'category',
                splitLine: {show: false},
                data: ['室内灯','室外灯','空调','水泵','电梯','周边设施','音响','网络设施'],
                axisLabel:{
                    textStyle:{
                        fontSize: 15,
                        color: '#6cbbe6'
                    }
                },
            },
            series: [
                {
                    name: '办理数',
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                // build a color map as your need.
                                var colorList = [
                                    '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                    '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                    '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                ];
                                return colorList[params.dataIndex]
                            },
                            shadowBlur:100,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            	 label : {
                                     show : false   //隐藏标示文字
                                 },
                                 labelLine : {
                                     show : false   //隐藏标示线
                                 }
                        }
                    },
                    barWidth:20,
                    barGap:40,
                    type: 'bar',
                    data: [92,132,142,181,212,28,382,41]
                }
            ]
        };
    myChart2.setOption(option);
}

//加载统计图3数据
function  loadoOption3(){
   myChart3.clear();

    var option = {
        title: {
            text: '最近6个月能耗统计',
            show: true,
            textStyle: {
                fontWeight: 'normal',
                fontSize: 22,
                color: '#3db3cb'
            },
            left: '2%',
            top: '2%'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#3db3cb'
                }
            }
        },
        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: ['2017-07', '2017-08', '2017-09', '2017-10', '2017-11', '2017-12']
        }],
        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: 5,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0, 136, 212, 0.2)'
                    }, {
                        offset: 1,
                        color: 'rgba(0, 136, 212, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgb(0,136,212)',
                    borderColor: 'rgba(0,136,212,0.2)',
                    borderWidth: 12

                }
            },
            data: [120, 110, 145, 122, 165, 150]
        }, ]
    }
     myChart3.setOption(option);
}

//热门事项排行
function  loadoOption4(){
    myChart4.clear();
//     var option = {
//         tooltip: {
//             trigger: 'axis',
//             axisPointer: {
//                 type: 'shadow'
//             }
//         },
//         grid: {
//             top:'5%',
//             left: '5%',
//             right: '5%',
//             bottom: '5%',
//             containLabel: true,
//         },
//         yAxis: {
//             type: 'value',
// 
//             splitLine: {show: false},
//             boundaryGap: [0, 0.01],
//             axisLabel:{
//                 textStyle:{
//                     color: '#6cbbe6'
//                 }
//             },
//         },
//         xAxis: {
//             type: 'category',
//             splitLine: {show: false},
//             data: ['价格','护士','再生育证审批','社会团体登记','医师执业注册','印刷企业设立','污染物排放','教师资格认定'],
//             axisLabel:{
//                 textStyle:{
//                     fontSize: 10,
//                     color: '#6cbbe6'
//                 }
//             },
//         },
//         series: [
//             {
//                 name: '办理数',
//                 itemStyle: {
//                     normal: {
//                         color: function(params) {
//                             // build a color map as your need.
//                             var colorList = [
//                                 '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
//                                 '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
//                                 '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
//                             ];
//                             return colorList[params.dataIndex]
//                         },
//                         shadowBlur:100,
//                         shadowColor: 'rgba(0, 0, 0, 0.5)'
//                     }
//                 },
//                 barWidth:10,
//                 barGap:40,
//                 type: 'bar',
//                 data: [92,132,142,181,212,28,382,41]
//             }
//         ]
//     };
option = {

    tooltip : {
        trigger: 'axis'
    },
   
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['集水井','变压器','备变压器','消防泵','水泵'],
			            axisLabel:{
			                textStyle:{
			                    color: '#6cbbe6'
			                }
			            }
        }
    ],
    yAxis : [
        {
            type : 'value',
			            axisLabel:{
			                textStyle:{
			                    color: '#6cbbe6'
			                }
			            }
        }
    ],
    series : [
        {
            name:'报警统计',
            type:'bar',
            data:[2, 4, 7, 23, 9],
			itemStyle: {
					normal: {
						color: function(params) {
							// build a color map as your need.
							var colorList = [
								'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B'
							];
							return colorList[params.dataIndex]
						},
						shadowBlur:100,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				},
				barWidth:80,
				barGap:40,
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        }
    ]
};
                    
    myChart4.setOption(option);
}