Newer
Older
alarm / WebRoot / s / alarm / thematicAlarmSource.js
zhout on 2 Mar 2022 5 KB first commit
var thematicAlarmSource=function(){
    var titleName = '异常报警来源专题图';

    function getBarOption(list) {
        var thisTitle = titleName;
        if(list[0].length == 0) {
            thisTitle += '(没有数据)';
        }

        var option = {
            title: {
                text: thisTitle,
                left : 'center'
            },
            legend: {
                data:['报警次数'],
                left : 'right'
            },
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                    type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : list[1],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    name : '报警次数'
                }
            ],
            series : [
                {
                    name:'报警次数',
                    type:'bar',
                    barWidth: '60%',
                    data: list[0]
                }
            ]
        };
        return option;
    }

    function getPieOption(list) {
        var listRecordType = [];
        for(var i=0; i<list[0].length; i++) {
            var temp = {value: list[0][i], name: list[1][i]};
            listRecordType.push(temp);
        }
        var pieList = [listRecordType, list[1]];

        var thisTitle = titleName;
        if(pieList[1].length == 0) {
            thisTitle += '(没有数据)';
        }

        var option = {
            title: {
                text: thisTitle,
                //subtext: '纯属虚构',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: pieList[1]
            },
            color: ['#3398DB', '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63',
                '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'],
            series: [
                {
                    name: '报警次数',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: pieList[0],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        return option;
    }

    function setOption(form) {
        $.ajax({
            type: "get",
            url: $("#rsUrl").val() + '/alarm/getCountByType.do',
            crossDomain:true,
            data: {
                dateStart: $('#dateStart').datebox("getValue"),
                dateEnd: $('#dateEnd').datebox("getValue")
            },
            dataType: 'jsonp',
            jsonp: "jsoncallback",
            jsonpCallback:"success_jsoncallback",
            success: function (data) {
                var jData = data;
                if (jData.success == true) {
                    var list = jData.data;
                    var numList = [];
                    var legendList = [];
                    for(var i=0; i<list.length; i++) {
                        numList.push(list[i][0]);
                        legendList.push(list[i][1]);
                    }
                    var val = [numList, legendList];
                    var myChart = initDiv();
                    if("bar" == form) {
                        myChart.setOption(getBarOption(val));
                    } else if("pie" == form) {
                        myChart.setOption(getPieOption(val));
                    }

                }
            },
            error: function (request) {
                //alert("网络连接错误");
            }
        });
    }

    function initDiv() {
        return echarts.init(document.getElementById('container'));
    }

    return {
        init : function() {
            parent.gisTools.setStartAndEndDate($("#dateStart"), $("#dateEnd"), 7);
            thematicAlarmSource.drawBar();
            $('#barBtn').click(thematicAlarmSource.drawBar);
            $('#pieBtn').click(thematicAlarmSource.drawPie);
        },

        drawBar : function() {
            setOption('bar');
            $('#barBtn').linkbutton('enable');
            $('#pieBtn').linkbutton('disable');
            $('#barBtn').linkbutton({text:'柱状图(当前)'});
            $('#pieBtn').linkbutton({text:'饼状图'});
        },

        drawPie : function() {
            setOption('pie');
            $('#barBtn').linkbutton('disable');
            $('#pieBtn').linkbutton('enable');
            $('#barBtn').linkbutton({text:'柱状图'});
            $('#pieBtn').linkbutton({text:'饼状图(当前)'});
        }
    }
}();