kmall-haikong/kmall-admin/src/main/webapp/js/sale/monthlyCustomers.js

$(function () {
    // var data = {
    //     "echatX": [
    //         "2019-07-02",
    //         "2019-07-03",
    //         "2019-07-04",
    //         "2019-07-05",
    //         "2019-07-06",
    //         "2019-07-07",
    //         "2019-07-08",
    //         "2019-07-09",
    //         "2019-07-10",
    //         "2019-07-11",
    //         "2019-07-12",
    //         "2019-07-13",
    //         "2019-07-14",
    //         "2019-07-15"
    //     ],
    //     "echatY": [
    //         501,210,123,333,445,157,151,369,101,101,350,435,153,100
    //     ],
    //     "echatY2": [
    //         80,40,13,36,57,77,41,39,61,31,60,73,33,50
    //     ],
    //     "echatY3": [
    //         5091,2210,1233,3133,4415,1517,1511,3619,1101,1011,3510,4315,1513,1100
    //     ],
    //     "echatY4": [
    //         501,210,123,333,445,157,151,369,101,101,350,435,153,100
    //     ],
    //     "peopleTotal":15,"peopleOnline":4,"peopleOutline":12,"ranges":[]
    // };
    // dFun(data.echatX, data.echatY, data.echatY2,data.echatY3,data.echatY4);


});
var myChart;
// 基于准备好的dom，初始化echarts实例
var dChart = echarts.init(document.getElementById('main3'));
// 指定图表的配置项和数据
function dFun(dateList, totalNumberList, totalSalesList,taotalCustomersList,avgBasketSaleList) {
    dChart.setOption({
        // title: {
        //     left: 'left',
        //     text: '概率',
        //     show: false
        // },
        tooltip: {
            trigger: 'axis',
            // formatter: '{a}:{c}',
            axisPointer: {
                type: 'shadow',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        grid: {
            show: false,
            left: '3%',
            right: '4%',
            bottom: '10%'
        },
        // legend: {
        //     show: true,
        //     selectedMode: 'single', // 设置显示单一图例的图形，点击可切换
        //     bottom: 10,
        //     left: 50,
        //     textStyle: {
        //         color: '#666',
        //         fontSize: 12
        //     },
        //     itemGap: 20,
        //     inactiveColor: '#ccc'
        // },
        xAxis: {
            // splitLine: {　　　　 show: false　　 },
            type: 'category',
            data: dateList,
            axisPointer: {
                type: 'shadow'
            },
            // 改变x轴颜色
            axisLine: {
                lineStyle: {
                    color: '#00a2e2',
                    width: 1, // 这里是为了突出显示加上的
                }
            },
            axisTick: {
                show: true,
                interval: 0
            },
        },
        // 设置两个y轴，左边显示数量，右边显示概率
        yAxis: [{
            splitLine: {　　　　 show: false　　 },
            type: 'value',
            name: '',
            // max: 10000,
            // min: 0,
            // show: true,
            // interval: 1000,
            // 改变y轴颜色
            axisLine: {
                lineStyle: {
                    color: '#00a2e2',
                    width: 1, // 这里是为了突出显示加上的
                }
            },
        }, // 右边显示概率
        {
            splitLine: {　　　　 show: false　　 },
            type: 'value',
            name: '客单价',
            // min: 0,
            // max: 100,
            // interval: 10,
            // 改变y轴颜色
            axisLine: {
                lineStyle: {
                    color: '#00a2e2',
                    width: 1, // 这里是为了突出显示加上的
                }
            }
        }],
        // 每个设备分数量、概率2个指标，只要让他们的name一致，即可通过，legeng进行统一的切换
        series: [{
            name: 'Units Sold',
            type: 'bar',
            symbol: 'circle', // 折线点设置为实心点
            symbolSize: 4, // 折线点的大小
            data: totalNumberList,
            barWidth: '20%',

        },{
            name: 'Sales',
            type: 'bar',
            symbol: 'circle', // 折线点设置为实心点
            symbolSize: 4, // 折线点的大小
            data: totalSalesList,
            barWidth: '20%',

        },{
            name: 'Customers',
            type: 'bar',
            symbol: 'circle', // 折线点设置为实心点
            symbolSize: 4, // 折线点的大小
            data: taotalCustomersList,
            barWidth: '20%',

        },
            {
            //折线
            name: 'sales/customers',
            type: 'line',
            symbol: 'circle', // 折线点设置为实心点
            symbolSize: 6, // 折线点的大小
            yAxisIndex: 1, // 这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
            data: avgBasketSaleList,
            symbolSize: 10,
            itemStyle: {
                normal: {
                    color: "#DDA0DD"
                }
            }

        },

        ]

    });
}

function queryMonthly(){

    var date = $('input[name="date"]:checked').val();

    var startDate = "";
    var endDate = "";
    var dateFlag = "";

    if(date == "month"){
        var startMonth = document.getElementById("startMonth").value;
        var endMonth = document.getElementById("endMonth").value;
        var startMonthDate = new Date(startMonth);
        var endMonthDate = new Date(endMonth);
        if(startMonthDate.getTime() > endMonthDate.getTime()){
            alert("开始时间不能大于结束时间");
            return;
        }
        startDate = startMonth;
        endDate = endMonth;
        dateFlag = "month";
    }else if (date == "day"){
        var startDay = document.getElementById("startDay").value;
        var endDay = document.getElementById("endDay").value;
        var startDayDate = new Date(startDay);
        var endDayDate = new Date(endDay);
        if(startDayDate.getTime() > endDayDate.getTime()){
            alert("开始时间不能大于结束时间");
            return;
        }
        startDate = startDay;
        endDate = endDay;
        dateFlag = "day";
    }

    var param = {
        startDate:startDate,
        endDate:endDate,
        dateFlag:dateFlag
    };
    console.log(param);
    // 折线图
    $.ajax({
        url: "../monthly/customersQuery",
        data: param,
        contentType:"application/x-www-form-urlencoded",
        type: 'POST',
        success: function(data) {
            console.log(JSON.stringify(data))
            if (data.code =='500'){
                alert(data.msg);
                return;
            }
            dFun(data.dateList, data.totalNumberList, data.totalSalesList,data.taotalCustomersList,data.avgBasketSaleList);

        },
    });

}

function exportMonthly(){
    var date = $('input[name="date"]:checked').val();

    var startDate = "";
    var endDate = "";
    var dateFlag = "";

    if(date == "month"){
        var startMonth = document.getElementById("startMonth").value;
        var endMonth = document.getElementById("endMonth").value;
        var startMonthDate = new Date(startMonth);
        var endMonthDate = new Date(endMonth);
        if(startMonthDate.getTime() > endMonthDate.getTime()){
            alert("开始时间不能大于结束时间");
            return;
        }
        startDate = startMonth;
        endDate = endMonth;
        dateFlag = "month";
    }else if (date == "day"){
        var startDay = document.getElementById("startDay").value;
        var endDay = document.getElementById("endDay").value;
        var startDayDate = new Date(startDay);
        var endDayDate = new Date(endDay);
        if(startDayDate.getTime() > endDayDate.getTime()){
            alert("开始时间不能大于结束时间");
            return;
        }
        startDate = startDay;
        endDate = endDay;
        dateFlag = "day";
    }

    var params = {
        startDate:startDate,
        endDate:endDate,
        dateFlag:dateFlag
    };

    console.log(params);
    exportFile('#rrapp', '../monthly/monthlySalesGrowthExport2', params);

}