useranalysis.js 12.2 KB
var fun = {
    init:function () {

        fun.queryUserPersonStatisticForLine();
        fun.UserPersonStatisticForWeek();
        fun.queryUserPersonNumTotal();
    },
    //汇总查询
    queryUserPersonNumTotal: function () {
        var req=fun.getQueryParam();
        var opts = {
            method:'post',
            url: dataUrl.util.queryUserPersonStatistic(),
            data: JSON.stringify(req),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function(res) {
                if(res.code == '8888') {
                    console.log(res)
                    $("#zcapp_total").html(fun.numberFormatter(res.data.registerNum));
                    $("#totalNum_android").html(fun.numberFormatter(res.data.androidRegisterNum));
                    $("#totalNum_ios").html(fun.numberFormatter(res.data.iosRegisterNum));
                    $("#todayNum_total").html(fun.numberFormatter(res.data.todayRegisterNum));
                    $("#todayNum_android").html(fun.numberFormatter(res.data.todayAndroidRegisterNum));
                    $("#todayNum_ios").html(fun.numberFormatter(res.data.todayIosRegisterNum));
                    $("#hyd_total").html(fun.numberFormatter(res.data.todayActiveNum));
                    $("#hyd_ios").html(fun.numberFormatter(res.data.todayIosActiveNum));
                    $("#hyd_android").html(fun.numberFormatter(res.data.todayAndroidActiveNum));
                }
            }
        };
        sysAjax(opts);
    },
    //今日注册量折线图
    queryUserPersonStatisticForLine: function () {
        var req=fun.getQueryParam();
        var opts = {
            method:'post',
            url: dataUrl.util.queryUserPersonStatisticForHour(),
            data: JSON.stringify(req),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function(res) {
                if(res.code == '8888') {
                    var data=res.data;
                    var zcdata=[];
                    for (var i = 0; i < data.length; i++) {
                        zcdata.push(data[i].num);
                    }
                    fun.regamountEcharts(zcdata);

                }
            }
        };
        sysAjax(opts);
    },
    UserPersonStatisticForWeek:function () {

        var startDate = new Date();
        var endDate = new Date();
        startDate.setSeconds(0);
        startDate.setHours(0);
        startDate.setMinutes(0);
        startDate.setDate(startDate.getDate() - 6);

        endDate.setSeconds(59);
        endDate.setHours(23);
        endDate.setMinutes(59);
        endDate.setDate(endDate.getDate() - 0);
        var req = {
            sysCode: sysComm.sysCode,
            startTime: startDate.getTime(),
            endTime: endDate.getTime()
        }
        var inComeAjax = {
            method: "post",
            url: dataUrl.util.queryUserPersonStatisticForWeek(),
            data: JSON.stringify(req),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (res) {
                if (res.code == '8888') {
                    var data = res.data;
                    console.log(data);
                    var dateArray = [];
                    var incomeArray = [];
                    $.each(data, function (index, item) {
                        dateArray.push(item.createDate);
                        incomeArray.push(item.num);
                    })

                    fun.weekamountEcharts(dateArray,incomeArray);
                }
            }
        };
        sysAjax(inComeAjax);
    },
    weekamountEcharts:function (dateArray,incomeArray) {
        console.log(dateArray,incomeArray)
        var incomeecharts = echarts.init(document.getElementById('income-echarts'));
        incomeoption = {
            color:['#5fe98f'],
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                right: '2%',
                top: '0',
                textStyle: {
                    color: '#888990',
                },
                itemWidth: 18,
                itemHeight: 10,
            },
            grid: {
                top: '13%',
                left: '1%',
                right: '2%',
                bottom: '2%',
                containLabel: true
            },

            xAxis: {
                type: 'category',
                boundaryGap: true,
                data:dateArray,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: 'rgba(0,0,0,0.5)',
                        fontSize:'12px',
                        fontFamily:'微软雅黑'
                    }
                },
                // splitNumber:10,
                // minInterval:2,
                axisTick: {
                    show: false,
                },
                splitLine:{
                    lineStyle:{
                        color:'rgba(0,0,0,0.1)',
                    }
                },

                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(0,0,0,0.1)',
                        // width: 1,//这里是为了突出显示加上的
                    }
                },

            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: 'rgba(0,0,0,0.5)',
                        fontSize:'12px',
                        fontFamily:'微软雅黑'
                    }
                },
                axisLabel: { //调整y轴的lable
                    textStyle: {
                        color: 'rgba(0,0,0,0.5)',
                    }
                },
                axisTick: {
                    show: false
                },

                axisLine: {
                    lineStyle: {
                        color: 'rgba(0,0,0,0.1)',
                        width: 1,//这里是为了突出显示加上的
                    }
                },
                splitLine:{
                    lineStyle:{
                        // type:'dashed',
                        color:'rgba(0,0,0,0.1)',
                    }
                }
            },
            series: [
                {
                    name: '近7天注册量',
                    type: 'line',
                    symbol:'none',
                    // smooth:true,
                    // data:seriesData,
//              data:[4,1,6,2,9,4,1,6,2,9,8,1,23,43,54,34,2,3,43,23,23,1,3,23],
                    data:incomeArray,
                    itemStyle : {
                        normal : {
                            lineStyle:{
                                color:'#f0f0f2',
                            }
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: '#5fe98f',
                            opacity:.2
                        }
                    },
                    lineStyle: {
                        normal: {
                            color:'#5fe98f',
                            width:2,
                        }
                    }
                },

            ]
        };
        incomeecharts.setOption(incomeoption, true);
        //自适应
        window.onresize = function(){

            incomeecharts.resize();
        };
    },
    //echarts 用户注册量
    regamountEcharts:function (data) {

        chart = echarts.init(document.getElementById('reg_echarts'));
        option = {
            color:['#5fe98f'],
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                right: '2%',
                top: '0',
                textStyle: {
                    color: '#888990',
                },
                itemWidth: 18,
                itemHeight: 10,
            },
            grid: {
                top: '13%',
                left: '1%',
                right: '2%',
                bottom: '2%',
                containLabel: true
            },

            xAxis: {
                type: 'category',
                boundaryGap: true,
                data:['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'],
//          data:data.staticTimeStr,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: 'rgba(0,0,0,0.5)',
                        fontSize:'12px',
                        fontFamily:'微软雅黑'
                    }
                },
                // splitNumber:10,
                // minInterval:2,
                axisTick: {
                    show: false,
                },
                splitLine:{
                    lineStyle:{
                        color:'rgba(0,0,0,0.1)',
                    }
                },

                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(0,0,0,0.1)',
                        // width: 1,//这里是为了突出显示加上的
                    }
                },

            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: 'rgba(0,0,0,0.5)',
                        fontSize:'12px',
                        fontFamily:'微软雅黑'
                    }
                },
                axisLabel: { //调整y轴的lable
                    textStyle: {
                        color: 'rgba(0,0,0,0.5)',
                    }
                },
                axisTick: {
                    show: false
                },

                axisLine: {
                    lineStyle: {
                        color: 'rgba(0,0,0,0.1)',
                        width: 1,//这里是为了突出显示加上的
                    }
                },
                splitLine:{
                    lineStyle:{
                        // type:'dashed',
                        color:'rgba(0,0,0,0.1)',
                    }
                }
            },
            series: [
                {
                    name: '今日注册量',
                    type: 'line',
                    symbol:'none',
                    // smooth:true,
                    // data:seriesData,
//              data:[4,1,6,2,9,4,1,6,2,9,8,1,23,43,54,34,2,3,43,23,23,1,3,23],
                    data:data,
                    itemStyle : {
                        normal : {
                            lineStyle:{
                                color:'#f0f0f2',
                            }
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: '#5fe98f',
                            opacity:.2
                        }
                    },
                    lineStyle: {
                        normal: {
                            color:'#5fe98f',
                            width:2,
                        }
                    }
                },

            ]
        };
        chart.setOption(option, true);
        //自适应
        window.onresize = function(){

            chart.resize();
        };
    },

    getQueryParam:function(){
//      var startTime = new Date(new Date().toLocaleDateString()).getTime();
        var startTime = new Date(showNowDate());
        var endTime = new Date();
        var req={
            startTime:startTime,
            endTime:endTime,
            sysCode:sysComm.sysCode
        };


        return req;
    },
    //数量处理
    numberFormatter: function (value) {
        // console.log(typeof value)
        if (value == 0 || value == undefined || value == null) {
            return "0";
        } else {
            return value;
        }
    },
};



fun.init();
setInterval(function () {
    fun.init();
},60000)

function showNowDate(){
    var mydate = new Date();
    var str = mydate.getFullYear() + "/";
    str += (mydate.getMonth()+1) + "/";
    str += mydate.getDate();
    return str+' 00:00:00';
}