update

liujie

2023-10-09 266fbc08e028cab1f276eeedc682f73215965833

 cloud-server-management/src/main/webapp/WEB-INF/view/system/dataStatistics/platformIncome.html

@@ -134,8 +134,8 @@
                                    </br>
                                    </br>
                                    <div style="height: 25px;box-sizing: border-box;background:#f3f3f4;line-height: 25px;border:1px solid;margin-bottom: 20px;width: 500px">
                                        <div id="d1" class='table2' onclick="getContent1(1)" style="border-right: 1px solid #333;background-color: rgb(26, 179, 148);color: white;">用户总数:0人</div>
                                        <div id="d2" class='table2' onclick="getContent1(2)" style="border-right: 1px solid #333;">年费会员数量:0人</div>
                                        <div id="d1" class='table2' onclick="getContent1(1)" style="border-right: 1px solid #333;background-color: rgb(26, 179, 148);color: white;">用户总数:<span id="userAll"></span>人</div>
                                        <div id="d2" class='table2' onclick="getContent1(2)" style="border-right: 1px solid #333;">年费会员数量:<span id="userVipAll"></span>人</div>
                                    </div>
                                </div>
                                <div class="col-sm-10">
@@ -521,149 +521,13 @@
        });
        ajax.set("type",1);
        ajax.start();
        option2  = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {

                    data: ['年度用户数', '月度用户数','周度用户数','日度用户数'],
                    icon: 'stack',
                    selectedMode: 'single', // 单选
                    selected: {
                        年度用户数: true,
                        月度用户数: false,
                        周度用户数: false,
                        日度用户数: false
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: yearX
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '年度用户数',
                        type: 'line',
                        stack: 'Total',
                        data: [100,50,60,10,12,13,54,156]
                    },
                    {
                        name: '月度用户数',
                        type: 'line',
                        stack: 'Total',
                        data: [26,44,55,12,6,7,98,541,223]
                    },
                    {
                        name: '周度用户数',
                        type: 'line',
                        stack: 'Total',
                        data: [
                            33,22,11,12,61,17,23,33,41
                        ]
                    },
                    {
                        name: '日度用户数',
                        type: 'line',
                        stack: 'Total',
                        data: [
                            12,11,17,26,23,111,23,45,41
                        ]
                    }
                ]
            };
        var ajax2 = new $ax(Feng.ctxPath + "/data/getIncomeData", function(resp){
            option3  = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {

                    data: ['年度会员数', '月度会员数','周度会员数','日度会员数'],
                    icon: 'stack',
                    selectedMode: 'single', // 单选
                    selected: {
                        年度会员数: true,
                        月度会员数: false,
                        周度会员数: false,
                        日度会员数: false
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: yearX
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '年度会员数',
                        type: 'line',
                        stack: 'Total',
                        data: [100,50,60,10,12,13,54,156]
                    },
                    {
                        name: '月度会员数',
                        type: 'line',
                        stack: 'Total',
                        data: [26,44,55,12,6,7,98,541,223]
                    },
                    {
                        name: '周度会员数',
                        type: 'line',
                        stack: 'Total',
                        data: [
                            33,22,11,12,61,17,23,33,41
                        ]
                    },
                    {
                        name: '日度会员数',
                        type: 'line',
                        stack: 'Total',
                        data: [
                            12,11,17,26,23,111,23,45,41
                        ]
                    }
                ]
            };
        });
        ajax2.set("type",1);
        ajax2.start();
        // 基于准备好的dom，初始化echarts实例
        var myChart  = echarts.init(document.getElementById('main'));
        var myChart1 = echarts.init(document.getElementById('refund'));
        var myChart2 = echarts.init(document.getElementById('user'));
        var myChart3 = echarts.init(document.getElementById('vip'));
        var myChart4 = echarts.init(document.getElementById('activity'));
        var myChart5 = echarts.init(document.getElementById('prepare'));



        var myChart6 = echarts.init(document.getElementById('teach'));
        var myChart7 = echarts.init(document.getElementById('courseData'));

@@ -741,89 +605,77 @@
        ajax3.start();


        option4 = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['年度次数', '月度次数']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '年度次数',
                    type: 'line',
                    stack: 'Total',
                    data: [1220, 1532, 101, 1394, 980, 2380, 1680, 1190, 1410, 1330, 2110, 1330]
                },
                {
                    name: '月度次数',
                    type: 'line',
                    stack: 'Total',
                    data: [1220, 1182, 2191, 3234, 1290, 1330, 2310, 2190, 2210, 1330, 2410, 1650]
                }

            ]
        };
        option5 = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['年度次数', '月度次数']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '年度次数',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 394, 980, 2380, 1680, 1190, 1410, 1330, 2110, 1330]
        var ajax4 = new $ax(Feng.ctxPath + "/data/userAndVipPt", function(data){
            option1 = {

                tooltip: {
                    trigger: 'axis'
                },
                {
                    name: '月度次数',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 182, 211, 324, 120, 130, 310, 290, 220, 130, 240, 150]
                }
            ]
        };
                legend: {

                    data: ['年度退费', '月度退费','周度退费','日度退费'],
                    icon: 'stack',
                    selectedMode: 'single', // 单选
                    selected: {
                        年度会员数: true,
                        月度会员数: false,
                        周度会员数: false,
                        日度会员数: false
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: yearX
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '年度退费',
                        type: 'line',
                        stack: 'Total',
                        data: data.yearData
                    },
                    {
                        name: '月度退费',
                        type: 'line',
                        stack: 'Total',
                        data: data.monthData
                    },
                    {
                        name: '周度退费',
                        type: 'line',
                        stack: 'Total',
                        data: data.weekData
                    },
                    {
                        name: '日度退费',
                        type: 'line',
                        stack: 'Total',
                        data: data.dayData
                    }
                ]

            };
        });
        ajax4.start();





        option6  = {
@@ -949,8 +801,6 @@
            }
            myChart.setOption(options, true)
        })


        myChart1.on('legendselectchanged', obj => {
            var options = myChart1.getOption()
            //这里是选择切换什么样的x轴，那么他会进行对Y值的切换
@@ -959,12 +809,25 @@
            } else if (obj.name == '月度退费') {
                options.xAxis[0].data = monthX
            } else if (obj.name == '周度退费') {
                options.xAxis[0].data =  ["1","2","上周","本周"]
                options.xAxis[0].data = ["1周","2周","3周","4周"]
            } else if (obj.name == '日度退费') {
                options.xAxis[0].data = dataX
            }
            myChart1.setOption(options, true)
        })


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        myChart1.setOption(option1);

        myChart6.setOption(option6);
        myChart7.setOption(option7);
    });
    
    function ptUser() {
        var myChart2 = echarts.init(document.getElementById('user'));
        var myChart3 = echarts.init(document.getElementById('vip'));
        myChart2.on('legendselectchanged', obj => {
            var options = myChart2.getOption()
            //这里是选择切换什么样的x轴，那么他会进行对Y值的切换
@@ -973,12 +836,13 @@
            } else if (obj.name == '月度用户数') {
                options.xAxis[0].data = monthX
            } else if (obj.name == '周度用户数') {
                options.xAxis[0].data = weekX
                options.xAxis[0].data = ["1周","2周","3周","4周"]
            } else if (obj.name == '日度用户数') {
                options.xAxis[0].data = dataX
            }
            myChart2.setOption(options, true)
        });

        myChart3.on('legendselectchanged', obj => {
            var options = myChart3.getOption()
            //这里是选择切换什么样的x轴，那么他会进行对Y值的切换
@@ -987,22 +851,244 @@
            } else if (obj.name == '月度会员数') {
                options.xAxis[0].data = monthX
            } else if (obj.name == '周度会员数') {
                options.xAxis[0].data = weekX
                options.xAxis[0].data = ["1周","2周","3周","4周"]
            } else if (obj.name == '日度会员数') {
                options.xAxis[0].data = dataX
            }
            myChart3.setOption(options, true)
        });
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        myChart1.setOption(option1);
        var ajax2 = new $ax(Feng.ctxPath + "/data/userAndVipPt", function(data){
            $("#userAll").text(data.allUser)
            $("#userVipAll").text(data.allVip)
            console.log(data)
            option2  = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {

                    data: ['年度用户数', '月度用户数','周度用户数','日度用户数'],
                    icon: 'stack',
                    selectedMode: 'single', // 单选
                    selected: {
                        年度用户数: true,
                        月度用户数: false,
                        周度用户数: false,
                        日度用户数: false
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: yearX
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '年度用户数',
                        type: 'line',
                        stack: 'Total',
                        data: data.yearData
                    },
                    {
                        name: '月度用户数',
                        type: 'line',
                        stack: 'Total',
                        data: data.monthData
                    },
                    {
                        name: '周度用户数',
                        type: 'line',
                        stack: 'Total',
                        data: [data.count,data.count1,data.count2,data.count3]
                    },
                    {
                        name: '日度用户数',
                        type: 'line',
                        stack: 'Total',
                        data: data.dayData
                    }
                ]
            };
            option3  = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {

                    data: ['年度会员数', '月度会员数','周度会员数','日度会员数'],
                    icon: 'stack',
                    selectedMode: 'single', // 单选
                    selected: {
                        年度会员数: true,
                        月度会员数: false,
                        周度会员数: false,
                        日度会员数: false
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: yearX
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '年度会员数',
                        type: 'line',
                        stack: 'Total',
                        data: data.yearsVip
                    },
                    {
                        name: '月度会员数',
                        type: 'line',
                        stack: 'Total',
                        data:  data.monthsVip
                    },
                    {
                        name: '周度会员数',
                        type: 'line',
                        stack: 'Total',
                        data:[data.countVip,data.countVip1,data.countVip2,data.countVip3]
                    },
                    {
                        name: '日度会员数',
                        type: 'line',
                        stack: 'Total',
                        data: data.daysVip
                    }
                ]
            };
        });
        ajax2.set("type",1)
        ajax2.start()
        myChart2.setOption(option2);
        myChart3.setOption(option3);
    }

    function ptActivity() {
        var myChart4 = echarts.init(document.getElementById('activity'));
        var myChart5 = echarts.init(document.getElementById('prepare'));

        var ajax2 = new $ax(Feng.ctxPath + "/data/actPt", function(data){
            console.log(data)

            option4 = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['年度次数', '月度次数']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '年度次数',
                        type: 'line',
                        stack: 'Total',
                        data: [1220, 1532, 101, 1394, 980, 2380, 1680, 1190, 1410, 1330, 2110, 1330]
                    },
                    {
                        name: '月度次数',
                        type: 'line',
                        stack: 'Total',
                        data: [1220, 1182, 2191, 3234, 1290, 1330, 2310, 2190, 2210, 1330, 2410, 1650]
                    }

                ]
            };
            option5 = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['年度次数', '月度次数']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '年度次数',
                        type: 'line',
                        stack: 'Total',
                        data: [120, 132, 101, 394, 980, 2380, 1680, 1190, 1410, 1330, 2110, 1330]
                    },
                    {
                        name: '月度次数',
                        type: 'line',
                        stack: 'Total',
                        data: [120, 182, 211, 324, 120, 130, 310, 290, 220, 130, 240, 150]
                    }
                ]
            };
        });
        ajax2.set("type",1)
        ajax2.start()
        myChart4.setOption(option4);
        myChart5.setOption(option5);
        myChart6.setOption(option6);
        myChart7.setOption(option7);
    });
    }

    function getContent(type){
        //设置点击字体颜色效果
        for(var i=1;i<4;i++){
@@ -1132,6 +1218,10 @@

            });
            ajax.start();


            ptUser()

        }


@@ -1163,6 +1253,8 @@

            });
            ajax.start();

            ptActivity()
        }