From e6ee956618b3c1a6371a6c22dfbb70868dbd3f17 Mon Sep 17 00:00:00 2001 From: 44323 <443237572@qq.com> Date: 星期六, 07 十月 2023 15:23:06 +0800 Subject: [PATCH] 后台代码 --- cloud-server-management/src/main/webapp/WEB-INF/view/system/dataStatistics/platformIncome.html | 489 +++++++++++++++++++++++++++++++++++------------------ 1 files changed, 319 insertions(+), 170 deletions(-) diff --git a/cloud-server-management/src/main/webapp/WEB-INF/view/system/dataStatistics/platformIncome.html b/cloud-server-management/src/main/webapp/WEB-INF/view/system/dataStatistics/platformIncome.html index 748749d..69f573c 100644 --- a/cloud-server-management/src/main/webapp/WEB-INF/view/system/dataStatistics/platformIncome.html +++ b/cloud-server-management/src/main/webapp/WEB-INF/view/system/dataStatistics/platformIncome.html @@ -55,15 +55,15 @@ <h2>营收数据</h2> </br> <div id = "money1" style="width: 1500px" > - <span>总营收:</span> - <span>本年度营收:</span> - <span>本月度营收:</span> - <span>本周营收:</span> - <span>本日营收:</span> + <span id="totalIncome">总营收:</span> + <span id="yearIncome">本年度营收:</span> + <span id="monthIncome">本月度营收:</span> + <span id="weekIncome">本周营收:</span> + <span id="todayIncome">本日营收:</span> </br> </br> </div> - <div id="income" style="width: 1280px;height:500px;"></div> + <div id="main" style="width: 1280px;height:500px;"></div> </div> <div class="col-sm-10"> <h2>收入类型统计</h2> @@ -102,10 +102,10 @@ <div class="col-sm-10" style="width: 1500px" > </br> </br> - <span>本年退费额度:</span> - <span>本月退费额度:</span> - <span>本周退费额度:</span> - <span>本日退费额度:</span> + <span id="yearRefund">本年退费额度:</span> + <span id="monthRefund">本月退费额度:</span> + <span id="weekRefund">本周退费额度:</span> + <span id="todayRefund">本日退费额度:</span> </br> </br> <div id="refund" style="width: 1280px;height:500px;"></div> @@ -243,6 +243,35 @@ <script src="${ctxPath}/modular/system/dataStatistics/echarts.min.js"></script> <script src="${ctxPath}/static/js/plugins/switchery/switchery.js"></script> <script> + var ans = []; + var weekX = []; + var monthX = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]; + var yearX = ["2023年","2024年","2025年","2026年","2027年","2028年"]; + var timeX = []; + var dataX = []; + // 创建一个日期对象 + var currentDate = new Date(); + // 获取当前日期的号数 + let currentDay = currentDate.getDate(); + // 循环添加号数到数组 + for (let i = 0; i < 7; i++) { + dataX.push(currentDay - 6+i); + } + // 获取当前月份 + var currentMonth = currentDate.getMonth(); + // 获取当前年份 + var currentYear = currentDate.getFullYear(); + // 计算指定年份和月份的天数 + function getDaysInMonth(year, month) { + // month 参数范围是 0-11,所以需要加 1 + return new Date(year, month + 1, 0).getDate(); + } + // 获取当前月份的天数 + var daysInMonth = getDaysInMonth(currentYear, currentMonth); + // 将天数按字符串格式添加到 timeX 数组中 + for (var i = 1; i <= daysInMonth; i++) { + timeX.push(String(i)); + } laydate.render({ elem: '#beginTime' , trigger: 'click' @@ -252,8 +281,240 @@ getContent(1); getContent1(1); getContent2(1); + var ajax = new $ax(Feng.ctxPath + "/data/getIncomeData", function(resp){ + var list = resp.yearMount; + console.log(list); + var t1 = document.getElementById("totalIncome"); + var t2 = document.getElementById("yearIncome"); + var t3 = document.getElementById("monthIncome"); + var t4 = document.getElementById("weekIncome"); + var t5 = document.getElementById("todayIncome"); + t1.innerText = "总营收:"+list[0]+" "; + t2.innerText = "年度营收:"+list[1]+" "; + t3.innerText = "月度营收:"+list[2]+" "; + t4.innerText = "周度营收:"+list[3]+" "; + t5.innerText = "日度营收:"+list[4]+" "; + var year = resp.yearIncome; + var month = resp.monthIncome; + var week = resp.weekIncome; + var days = week[0].length; + for (let i = 1; i <= days; i++) { + weekX.push(i); + } + var day = resp.dayIncome; + option = { + 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: [year[0].amount,year[1].amount,year[2].amount,year[3].amount,year[4].amount,year[5].amount] + }, + { + name: '月度营收', + type: 'line', + stack: 'Total', + data: [month[0][0],month[0][1], month[0][2], month[0][3], month[0][4], + month[0][5], month[0][6], month[0][7], month[0][8], month[0][9], month[0][10], month[0][11]] + }, + { + name: '周度营收', + type: 'line', + stack: 'Total', + data: [ + week[0][0], week[0][1], week[0][2], week[0][3], week[0][4] + , week[0][5], week[0][6], week[0][7], week[0][8], week[0][9] + , week[0][10], week[0][11], week[0][12], week[0][13], week[0][14] + , week[0][15], week[0][16], week[0][17], week[0][18], week[0][19], week[0][20] + , week[0][21], week[0][22], week[0][23], week[0][24], week[0][25], week[0][26] + , week[0][27], week[0][28], week[0][29], week[0][30], week[0][31] + ] + }, + { + name: '日度营收', + type: 'line', + stack: 'Total', + data: [ + day[0][0], day[0][1],day[0][2], day[0][3], day[0][4], day[0][5], day[0][6] + ] + } + ] + }; + }); + 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('income')); + 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')); @@ -261,59 +522,7 @@ var myChart5 = echarts.init(document.getElementById('prepare')); var myChart6 = echarts.init(document.getElementById('teach')); var myChart7 = echarts.init(document.getElementById('courseData')); - option = { - 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, 134, 90, 230, 160, 190, 410, 330, 210, 330] - }, - { - name: '月度营收', - type: 'line', - stack: 'Total', - data: [220, 182, 191, 234, 290, 330, 310, 190, 210, 330, 410, 160] - }, - { - name: '周度营收', - type: 'line', - stack: 'Total', - data: [150, 232, 201, 154, 190, 330, 410, 160, 210, 195, 210, 188] - }, - { - name: '日度营收', - type: 'line', - stack: 'Total', - data: [320, 332, 301, 334, 390, 330, 320, 10, 195, 145, 188, 160] - } - ] - }; + option1 = { tooltip: { trigger: 'axis' @@ -367,112 +576,8 @@ } ] }; - option2 = { - 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, 134, 90, 230, 160, 190, 410, 330, 210, 330] - }, - { - name: '月度用户数', - type: 'line', - stack: 'Total', - data: [220, 182, 191, 234, 290, 330, 310, 190, 210, 330, 410, 160] - }, - { - name: '周度用户数', - type: 'line', - stack: 'Total', - data: [150, 232, 201, 154, 190, 330, 410, 160, 210, 195, 210, 188] - }, - { - name: '日度用户数', - type: 'line', - stack: 'Total', - data: [320, 332, 301, 334, 390, 330, 320, 10, 195, 145, 188, 160] - } - ] - }; - option3 = { - 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] - }, - { - name: '周度会员数', - type: 'line', - stack: 'Total', - data: [2150, 3232, 2201, 5154, 5190, 1330, 1410, 1660, 2610, 1695, 2410, 1848] - }, - { - name: '日度会员数', - type: 'line', - stack: 'Total', - data: [2320, 3332, 1301, 3234, 3290, 1330, 1320, 1220, 1295, 1645, 1888, 1660] - } - ] - }; + + option4 = { tooltip: { trigger: 'axis' @@ -662,6 +767,49 @@ } ] }; + myChart.on('legendselectchanged', obj => { + var options = myChart.getOption() + //这里是选择切换什么样的x轴,那么他会进行对Y值的切换 + if (obj.name == '年度营收') { + options.xAxis[0].data = yearX + } else if (obj.name == '月度营收') { + options.xAxis[0].data = monthX + } else if (obj.name == '周度营收') { + options.xAxis[0].data = weekX + } else if (obj.name == '日度营收') { + options.xAxis[0].data = dataX + } + myChart.setOption(options, true) + }) + myChart2.on('legendselectchanged', obj => { + var options = myChart2.getOption() + //这里是选择切换什么样的x轴,那么他会进行对Y值的切换 + if (obj.name == '年度用户数') { + options.xAxis[0].data = yearX + } else if (obj.name == '月度用户数') { + options.xAxis[0].data = monthX + } else if (obj.name == '周度用户数') { + options.xAxis[0].data = weekX + } else if (obj.name == '日度用户数') { + options.xAxis[0].data = dataX + } + myChart2.setOption(options, true) + }); + + myChart3.on('legendselectchanged', obj => { + var options = myChart3.getOption() + //这里是选择切换什么样的x轴,那么他会进行对Y值的切换 + if (obj.name == '年度会员数') { + options.xAxis[0].data = yearX + } else if (obj.name == '月度会员数') { + options.xAxis[0].data = monthX + } else if (obj.name == '周度会员数') { + options.xAxis[0].data = weekX + } else if (obj.name == '日度会员数') { + options.xAxis[0].data = dataX + } + myChart3.setOption(options, true) + }); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); myChart1.setOption(option1); @@ -724,6 +872,7 @@ $("#nextB").hide(); } } + </script> <script> $(function(){ -- Gitblit v1.7.1