| | |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | .income-overview { |
| | | display: grid; |
| | | grid-template-columns: repeat(4, minmax(180px, 1fr)); |
| | | gap: 16px; |
| | | width: 100%; |
| | | max-width: 1280px; |
| | | margin: 18px 0 14px; |
| | | text-align: left; |
| | | } |
| | | .income-card { |
| | | min-height: 82px; |
| | | padding: 16px 18px; |
| | | border: 1px solid #e4e7ed; |
| | | border-radius: 6px; |
| | | background: #fff; |
| | | color: #606266; |
| | | font-size: 14px; |
| | | box-shadow: 0 1px 3px rgba(0, 0, 0, .04); |
| | | } |
| | | .income-card strong { |
| | | display: block; |
| | | margin-top: 8px; |
| | | color: #303133; |
| | | font-size: 22px; |
| | | font-weight: 600; |
| | | } |
| | | .income-card.total-card { border-top: 3px solid #1ab394; } |
| | | .income-card.net-card { border-top: 3px solid #409eff; } |
| | | .income-card.coupon-card { border-top: 3px solid #e6a23c; } |
| | | .income-card.refund-card { border-top: 3px solid #f56c6c; } |
| | | .income-period-grid { |
| | | display: grid; |
| | | grid-template-columns: repeat(2, minmax(360px, 1fr)); |
| | | gap: 10px 16px; |
| | | width: 100%; |
| | | max-width: 1280px; |
| | | margin-bottom: 18px; |
| | | text-align: left; |
| | | } |
| | | .income-period-item { |
| | | min-height: 110px; |
| | | padding: 9px 12px; |
| | | border-left: 3px solid #1ab394; |
| | | background: #f8fafc; |
| | | color: #606266; |
| | | line-height: 20px; |
| | | } |
| | | .income-period-title { |
| | | margin-bottom: 6px; |
| | | color: #303133; |
| | | font-weight: 600; |
| | | } |
| | | .income-period-records { |
| | | max-height: 185px; |
| | | overflow-y: auto; |
| | | } |
| | | .income-period-record { |
| | | padding: 4px 0; |
| | | border-top: 1px solid #edf0f5; |
| | | font-size: 13px; |
| | | } |
| | | .income-trend-grid { |
| | | display: grid; |
| | | grid-template-columns: repeat(2, minmax(480px, 1fr)); |
| | | gap: 18px; |
| | | width: 100%; |
| | | max-width: 1280px; |
| | | margin-bottom: 18px; |
| | | } |
| | | .income-trend-chart { |
| | | height: 300px; |
| | | padding: 8px; |
| | | border: 1px solid #e4e7ed; |
| | | border-radius: 6px; |
| | | background: #fff; |
| | | } |
| | | \@media (max-width: 992px) { |
| | | .income-overview { grid-template-columns: repeat(2, minmax(180px, 1fr)); } |
| | | .income-period-grid { grid-template-columns: 1fr; } |
| | | .income-trend-grid { grid-template-columns: 1fr; } |
| | | } |
| | | </style> |
| | | <div class="ibox float-e-margins"> |
| | | <div class="ibox-content"> |
| | | <div class="form-horizontal"> |
| | | |
| | | <input hidden id="day" value="${data.dayone}"> |
| | | <input hidden id="month" value="${data.monthone}"> |
| | | <input hidden id="quarter" value="${data.quarterone}"> |
| | | <input hidden id="year" value="${data.yearone}"> |
| | | <input hidden id="age1" value="${stuData.age1}"> |
| | | <input hidden id="age2" value="${stuData.age2}"> |
| | | <input hidden id="age3" value="${stuData.age3}"> |
| | | <input hidden id="age4" value="${stuData.age4}"> |
| | | <input hidden id="boy" value="${stuData.boy}"> |
| | | <input hidden id="girl" value="${stuData.girl}"> |
| | | |
| | | |
| | | <div class="row"> |
| | | <div class="col-sm-10"> |
| | | <div style="height: 50px;box-sizing: border-box;background:#f3f3f4;line-height: 50px;border:1px solid;margin-bottom: 20px;width: auto"> |
| | |
| | | <div class="form-group"> |
| | | <div class="col-sm-10"> |
| | | <h2>营收数据</h2> |
| | | </br> |
| | | <div id = "money1" style="width: 1500px" > |
| | | <span>总营收:</span> |
| | | <span>本年度营收:</span> |
| | | <span>本月度营收:</span> |
| | | <span>本周营收:</span> |
| | | <span>本日营收:</span> |
| | | </br> |
| | | </br> |
| | | <div id="money1"> |
| | | <div class="income-overview"> |
| | | <div class="income-card total-card">总营收金额<strong id="totalIncome">0</strong></div> |
| | | <div class="income-card net-card">净收入金额<strong id="netIncomeAmount">0</strong></div> |
| | | <div class="income-card coupon-card">优惠券抵扣金额<strong id="couponDeductionAmount">0</strong></div> |
| | | <div class="income-card refund-card">退款金额<strong id="refundAmount">0</strong></div> |
| | | </div> |
| | | <div id="income" style="width: 1280px;height:500px;"></div> |
| | | <div class="income-period-grid"> |
| | | <div id="yearIncomeStatistics" class="income-period-item"></div> |
| | | <div id="monthIncomeStatistics" class="income-period-item"></div> |
| | | <div id="weekIncomeStatistics" class="income-period-item"></div> |
| | | <div id="dayIncomeStatistics" class="income-period-item"></div> |
| | | </div> |
| | | <span id="yearIncome" style="display:none"></span> |
| | | <span id="monthIncome" style="display:none"></span> |
| | | <span id="weekIncome" style="display:none"></span> |
| | | <span id="todayIncome" style="display:none"></span> |
| | | </div> |
| | | <div class="income-trend-grid"> |
| | | <div id="incomeYearChart" class="income-trend-chart"></div> |
| | | <div id="incomeMonthChart" class="income-trend-chart"></div> |
| | | <div id="incomeWeekChart" class="income-trend-chart"></div> |
| | | <div id="incomeDayChart" class="income-trend-chart"></div> |
| | | </div> |
| | | </div> |
| | | <div class="col-sm-10"> |
| | | <h2>收入类型统计</h2> |
| | |
| | | </br> |
| | | <div class="col-sm-3" style="width: 400px;display: flex"> |
| | | <#TimeCon id="beginTime" name="时间段:" isTime="false"/> |
| | | <#button name="搜索" icon="fa-search" clickFun="TCompetition.search()"/> |
| | | <#button name="搜索" icon="fa-search" clickFun="search1()"/> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="col-sm-10" style="width: 1500px" > |
| | | </br> |
| | | </br> |
| | | <span>会员费收入:</span> |
| | | <span>玩湃币充值收入:</span> |
| | | <span>课程收入:</span> |
| | | <span>活动收入:</span> |
| | | <span>订场收入:</span> |
| | | <span>赛事收入:</span> |
| | | <span>商品收入:</span> |
| | | <span>其他收入:</span> |
| | | <span>会员费收入:<label id="fee1">${data.fee1}</label></span> |
| | | <span>玩湃币充值收入:<label id="fee2">${data.fee2}</label></span> |
| | | <span>课程收入:<label id="fee3">${data.fee3}</label></span> |
| | | <span>赛事收入:<label id="fee4">${data.fee4}</label></span> |
| | | <span>订场收入:<label id="fee5">${data.fee5}</label></span> |
| | | <span>商品/其他收入:<label id="fee7">${data.fee7}</label></span> |
| | | </br> |
| | | </br> |
| | | </br> |
| | |
| | | <div class="col-sm-10" style="width: 1500px" > |
| | | </br> |
| | | </br> |
| | | <span>本年退费额度:</span> |
| | | <span>本月退费额度:</span> |
| | | <span>本周退费额度:</span> |
| | | <span>本日退费额度:</span> |
| | | <span id="yearRefund">本年退费额度:<span id="back1"></span></span> |
| | | <span id="monthRefund">本月退费额度:<span id="back2"></span></span> |
| | | <span id="weekRefund">本周退费额度:<span id="back3"></span></span> |
| | | <span id="todayRefund">本日退费额度:<span id="back4"></span></span> |
| | | </br> |
| | | </br> |
| | | <div id="refund" style="width: 1280px;height:500px;"></div> |
| | |
| | | </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"> |
| | |
| | | <h2>运营数据</h2> |
| | | </br> |
| | | </br> |
| | | <span>运营时长:0小时</span> |
| | | <span>运营时长:<span id="allHour"></span>小时</span> |
| | | </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="e1" class='table3' onclick="getContent2(1)" style="border-right: 1px solid #333;background-color: rgb(26, 179, 148);color: white;">活动次数</div> |
| | | <div id="e2" class='table3' onclick="getContent2(2)" style="border-right: 1px solid #333;">预定次数</div> |
| | | <div id="e2" class='table3' onclick="getContent2(2)" style="border-right: 1px solid #333;">活动报名人数</div> |
| | | </div> |
| | | </div> |
| | | <div class="col-sm-10"> |
| | |
| | | <h2>学员数据</h2> |
| | | </br> |
| | | </br> |
| | | <span>累计学员数:0人</span> |
| | | <span>累计学员数:<span id="allUser"></span>人</span> |
| | | </br> |
| | | </br> |
| | | <div id="teach" style="width: 1280px;height:500px;"></div> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | </div> |
| | | <script src="${ctxPath}/modular/system/dataStatistics/echarts.min.js"></script> |
| | | <script src="${ctxPath}/static/js/plugins/switchery/switchery.js"></script> |
| | | <script> |
| | | laydate.render({ |
| | | elem: '#beginTime' |
| | | , trigger: 'click' |
| | | , range: true |
| | | // 仅格式化前端展示,接口返回的原始数值不作改动。 |
| | | function formatStatisticNumber(value) { |
| | | var number = Number(value); |
| | | return isFinite(number) ? number.toFixed(2) : '0.00'; |
| | | } |
| | | // 首次进入页面时,收入类型来自服务端模板变量;同样按两位小数展示。 |
| | | $(function () { |
| | | $('#fee1, #fee2, #fee3, #fee4, #fee5, #fee7').each(function () { |
| | | $(this).text(formatStatisticNumber($(this).text())); |
| | | }); |
| | | }); |
| | | laydate.render({ |
| | | elem: '#beginTime' |
| | | , trigger: 'click' |
| | | , range: true |
| | | }); |
| | | function search1() { |
| | | var time = $("#beginTime").val(); |
| | | loadIncomeTypePieCharts(time); |
| | | // 营收卡片与收入类型卡片使用同一接口、同一时间范围,避免筛选后口径不一致。 |
| | | var incomeAjax = new $ax(Feng.ctxPath + "/data/getIncomeData", function(resp){ |
| | | $("#totalIncome").text(formatStatisticNumber(resp.incomeStatistics.totalIncomeAmount)); |
| | | $("#netIncomeAmount").text(formatStatisticNumber(resp.incomeStatistics.netIncomeAmount)); |
| | | $("#couponDeductionAmount").text(formatStatisticNumber(resp.incomeStatistics.couponDeductionAmount)); |
| | | $("#refundAmount").text(formatStatisticNumber(resp.incomeStatistics.refundAmount)); |
| | | var incomeTypeNet = resp.incomeTypeNet || {}; |
| | | $("#fee1").text(formatStatisticNumber(incomeTypeNet[1])); |
| | | $("#fee2").text(formatStatisticNumber(incomeTypeNet[2])); |
| | | $("#fee3").text(formatStatisticNumber(incomeTypeNet[3])); |
| | | $("#fee4").text(formatStatisticNumber(incomeTypeNet[4])); |
| | | $("#fee5").text(formatStatisticNumber(incomeTypeNet[5])); |
| | | $("#fee7").text(formatStatisticNumber(incomeTypeNet[6])); |
| | | renderTicketIncomeChart(resp.ticketIncome || {}); |
| | | }); |
| | | incomeAjax.set("time", time); |
| | | incomeAjax.start(); |
| | | } |
| | | var ans = []; |
| | | var weekX = ["1周","2周","3周","4周"]; |
| | | var monthX = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]; |
| | | var yearX = []; |
| | | var timeX = []; |
| | | var dataX = []; |
| | | |
| | | function renderTicketIncomeChart(ticketIncome) { |
| | | var chartDom = document.getElementById('cookieTicket'); |
| | | var myChart = echarts.getInstanceByDom(chartDom) || echarts.init(chartDom); |
| | | myChart.setOption({ |
| | | title: {text: '门票收入', left: 'center'}, |
| | | tooltip: {trigger: 'item'}, |
| | | series: [{ |
| | | name: '门票收入', type: 'pie', radius: '50%', |
| | | data: [ |
| | | {value: ticketIncome.day || 0, name: '日卡'}, |
| | | {value: ticketIncome.month || 0, name: '月卡'}, |
| | | {value: ticketIncome.quarter || 0, name: '季卡'}, |
| | | {value: ticketIncome.year || 0, name: '年卡'} |
| | | ] |
| | | }] |
| | | }, true); |
| | | } |
| | | |
| | | function renderIncomeTypePieChart(elementId, title, data) { |
| | | var chartDom = document.getElementById(elementId); |
| | | var chart = echarts.getInstanceByDom(chartDom) || echarts.init(chartDom); |
| | | chart.setOption({ |
| | | title: {text: title, left: 'center'}, |
| | | tooltip: {trigger: 'item'}, |
| | | series: [{name: title, type: 'pie', radius: '50%', data: data || []}] |
| | | }, true); |
| | | } |
| | | |
| | | // 使用接口返回的 JSON 分类数据,避免服务端模板字符串解析遗漏最后一个分类。 |
| | | function loadIncomeTypePieCharts(time) { |
| | | var ajax = new $ax(Feng.ctxPath + "/data/type1", function (data) { |
| | | renderIncomeTypePieChart('cookieCourse', '课程收入', data.courseData); |
| | | renderIncomeTypePieChart('cookieBooking', '订场收入', data.siteData); |
| | | }); |
| | | ajax.set('time', time); |
| | | ajax.start(); |
| | | } |
| | | |
| | | $(function () { |
| | | loadIncomeTypePieCharts(''); |
| | | }); |
| | | // 创建一个日期对象 |
| | | 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)); |
| | | } |
| | | |
| | | function getYears() { |
| | | var ajax2 = new $ax(Feng.ctxPath + "/data/getYears", function(data){ |
| | | yearX=data |
| | | }); |
| | | ajax2.start() |
| | | } |
| | | |
| | | function renderIncomeStatistics(elementId, periodName, statistics) { |
| | | document.getElementById(elementId).innerText = periodName + "统计:总营收金额 " |
| | | + formatStatisticNumber(statistics.totalIncomeAmount) + ",净收入金额 " + formatStatisticNumber(statistics.netIncomeAmount) |
| | | + ",优惠券抵扣金额 " + formatStatisticNumber(statistics.couponDeductionAmount) + ",退款金额 " |
| | | + formatStatisticNumber(statistics.refundAmount); |
| | | } |
| | | |
| | | function renderIncomeStatisticsList(elementId, title, labels, statistics) { |
| | | var records = labels.map(function (label, index) { |
| | | var item = statistics[index]; |
| | | return '<div class="income-period-record"><strong>' + label + '</strong>:总营收金额 ' |
| | | + formatStatisticNumber(item.totalIncomeAmount) + ',净收入金额 ' + formatStatisticNumber(item.netIncomeAmount) |
| | | + ',优惠券抵扣金额 ' + formatStatisticNumber(item.couponDeductionAmount) |
| | | + ',退款金额 ' + formatStatisticNumber(item.refundAmount) + '</div>'; |
| | | }).join(''); |
| | | document.getElementById(elementId).innerHTML = '<div class="income-period-title">' + title |
| | | + '</div><div class="income-period-records">' + records + '</div>'; |
| | | } |
| | | |
| | | function renderIncomeTrendChart(elementId, title, labels, statistics) { |
| | | var chart = echarts.init(document.getElementById(elementId)); |
| | | chart.setOption({ |
| | | title: {text: title, left: 'center', textStyle: {fontSize: 15}}, |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | formatter: function (params) { |
| | | var item = params[0]; |
| | | var detail = statistics[item.dataIndex]; |
| | | return labels[item.dataIndex] + '<br/>总营收:' + formatStatisticNumber(detail.totalIncomeAmount) |
| | | + '<br/>净收入:' + formatStatisticNumber(detail.netIncomeAmount) |
| | | + '<br/>优惠券抵扣:' + formatStatisticNumber(detail.couponDeductionAmount) |
| | | + '<br/>退款:' + formatStatisticNumber(detail.refundAmount); |
| | | } |
| | | }, |
| | | grid: {left: '5%', right: '4%', bottom: '18%', containLabel: true}, |
| | | xAxis: { |
| | | type: 'category', |
| | | boundaryGap: false, |
| | | data: labels, |
| | | axisLabel: {rotate: labels.length > 7 ? 35 : 0, interval: 0} |
| | | }, |
| | | yAxis: {type: 'value', name: '金额(元)'}, |
| | | series: [{ |
| | | name: '总营收', |
| | | type: 'line', |
| | | smooth: true, |
| | | data: statistics.map(function (item) { return item.totalIncomeAmount; }), |
| | | areaStyle: {opacity: 0.12} |
| | | }] |
| | | }); |
| | | } |
| | | |
| | | // 退费图与营收图使用同一接口返回的退款流水,保证统计口径一致。 |
| | | function renderRefundChart(chart, resp) { |
| | | var labelsByPeriod = { |
| | | '年度退费': resp.yearLabels, |
| | | '月度退费': resp.monthLabels, |
| | | '周度退费': resp.weekLabels, |
| | | '日度退费': resp.dayLabels |
| | | }; |
| | | var statisticsByPeriod = { |
| | | '年度退费': resp.yearIncomeStatistics, |
| | | '月度退费': resp.monthIncomeStatistics, |
| | | '周度退费': resp.weekIncomeStatistics, |
| | | '日度退费': resp.dayIncomeStatistics |
| | | }; |
| | | chart.off('legendselectchanged'); |
| | | chart.setOption({ |
| | | tooltip: {trigger: 'axis'}, |
| | | legend: { |
| | | data: ['年度退费', '月度退费', '周度退费', '日度退费'], |
| | | icon: 'stack', |
| | | selectedMode: 'single', |
| | | selected: {'年度退费': true, '月度退费': false, '周度退费': false, '日度退费': false} |
| | | }, |
| | | grid: {left: '3%', right: '4%', bottom: '12%', containLabel: true}, |
| | | toolbox: {feature: {saveAsImage: {}}}, |
| | | xAxis: {type: 'category', boundaryGap: false, data: labelsByPeriod['年度退费'], axisLabel: {rotate: 35, interval: 0}}, |
| | | yAxis: {type: 'value'}, |
| | | series: Object.keys(statisticsByPeriod).map(function (period) { |
| | | return { |
| | | name: period, |
| | | type: 'line', |
| | | data: statisticsByPeriod[period].map(function (item) { return item.refundAmount; }) |
| | | }; |
| | | }) |
| | | }, true); |
| | | chart.on('legendselectchanged', function (event) { |
| | | var labels = labelsByPeriod[event.name]; |
| | | chart.setOption({xAxis: {data: labels, axisLabel: {rotate: labels.length > 7 ? 35 : 0, interval: 0}}}); |
| | | }); |
| | | } |
| | | |
| | | $(function(){ |
| | | getContent(1); |
| | | getContent1(1); |
| | | getContent2(1); |
| | | // 基于准备好的dom,初始化echarts实例 |
| | | var myChart = echarts.init(document.getElementById('income')); |
| | | 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')); |
| | | 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' |
| | | }, |
| | | 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] |
| | | } |
| | | ] |
| | | }; |
| | | 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' |
| | | }, |
| | | 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] |
| | | } |
| | | ptCourse(); |
| | | |
| | | ] |
| | | }; |
| | | 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 myChart1 = echarts.init(document.getElementById('refund')); |
| | | var ajax = new $ax(Feng.ctxPath + "/data/getIncomeData", function(resp){ |
| | | // 运营、教学等其他图表仍复用年度横轴。 |
| | | yearX = resp.year; |
| | | var list = resp.yearMount; |
| | | var t1 = document.getElementById("totalIncome"); |
| | | var netIncomeAmount = document.getElementById("netIncomeAmount"); |
| | | var couponDeductionAmount = document.getElementById("couponDeductionAmount"); |
| | | var refundAmount = document.getElementById("refundAmount"); |
| | | t1.innerText = formatStatisticNumber(list[0]); |
| | | netIncomeAmount.innerText = formatStatisticNumber(resp.incomeStatistics.netIncomeAmount); |
| | | couponDeductionAmount.innerText = formatStatisticNumber(resp.incomeStatistics.couponDeductionAmount); |
| | | refundAmount.innerText = formatStatisticNumber(resp.incomeStatistics.refundAmount); |
| | | renderIncomeStatisticsList("yearIncomeStatistics", "历年营收明细", resp.yearLabels, resp.yearIncomeStatistics); |
| | | renderIncomeStatisticsList("monthIncomeStatistics", "本年各月营收明细", resp.monthLabels, resp.monthIncomeStatistics); |
| | | renderIncomeStatisticsList("weekIncomeStatistics", "近四周营收明细", resp.weekLabels, resp.weekIncomeStatistics); |
| | | renderIncomeStatisticsList("dayIncomeStatistics", "近七日营收明细", resp.dayLabels, resp.dayIncomeStatistics); |
| | | renderIncomeTrendChart("incomeYearChart", "多年营收趋势(" + resp.yearLabels[0] + " - " + resp.yearLabels[resp.yearLabels.length - 1] + ")", resp.yearLabels, resp.yearIncomeStatistics); |
| | | renderIncomeTrendChart("incomeMonthChart", "本年各月营收趋势", resp.monthLabels, resp.monthIncomeStatistics); |
| | | renderIncomeTrendChart("incomeWeekChart", "近四周营收趋势", resp.weekLabels, resp.weekIncomeStatistics); |
| | | renderIncomeTrendChart("incomeDayChart", "近七日营收趋势", resp.dayLabels, resp.dayIncomeStatistics); |
| | | $("#back1").text(formatStatisticNumber(resp.yearIncomeStatistics[resp.yearIncomeStatistics.length - 1].refundAmount)); |
| | | $("#back2").text(formatStatisticNumber(resp.monthIncomeStatistics[new Date().getMonth()].refundAmount)); |
| | | $("#back3").text(formatStatisticNumber(resp.weekIncomeStatistics[resp.weekIncomeStatistics.length - 1].refundAmount)); |
| | | $("#back4").text(formatStatisticNumber(resp.dayIncomeStatistics[resp.dayIncomeStatistics.length - 1].refundAmount)); |
| | | renderRefundChart(myChart1, resp); |
| | | }); |
| | | ajax.set("type",1); |
| | | ajax.start(); |
| | | |
| | | var myChart7 = echarts.init(document.getElementById('courseData')); |
| | | 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] |
| | | } |
| | | ] |
| | | }; |
| | | option6 = { |
| | | 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] |
| | | legend: { |
| | | |
| | | data: ['年度退费', '月度退费','周度退费','日度退费'], |
| | | icon: 'stack', |
| | | selectedMode: 'single', // 单选 |
| | | selected: { |
| | | 年度会员数: true, |
| | | 月度会员数: false, |
| | | 周度会员数: false, |
| | | 日度会员数: false |
| | | } |
| | | }, |
| | | { |
| | | name: '月度学员数', |
| | | type: 'line', |
| | | stack: 'Total', |
| | | data: [220, 182, 191, 234, 290, 330, 310, 190, 210, 330, 410, 160] |
| | | grid: { |
| | | left: '3%', |
| | | right: '4%', |
| | | bottom: '3%', |
| | | containLabel: true |
| | | }, |
| | | { |
| | | name: '周度学员数', |
| | | type: 'line', |
| | | stack: 'Total', |
| | | data: [150, 232, 201, 154, 190, 330, 410, 160, 210, 195, 210, 188] |
| | | toolbox: { |
| | | feature: { |
| | | saveAsImage: {} |
| | | } |
| | | }, |
| | | { |
| | | name: '日度学员数', |
| | | type: 'line', |
| | | stack: 'Total', |
| | | data: [320, 332, 301, 334, 390, 330, 320, 10, 195, 145, 188, 160] |
| | | } |
| | | ] |
| | | }; |
| | | option7 = { |
| | | 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] |
| | | xAxis: { |
| | | type: 'category', |
| | | boundaryGap: false, |
| | | data: yearX |
| | | }, |
| | | { |
| | | name: '月度耗课数量', |
| | | type: 'line', |
| | | stack: 'Total', |
| | | data: [220, 182, 191, 234, 290, 330, 310, 190, 210, 330, 410, 160] |
| | | yAxis: { |
| | | type: 'value' |
| | | }, |
| | | { |
| | | 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] |
| | | } |
| | | ] |
| | | }; |
| | | // 使用刚指定的配置项和数据显示图表。 |
| | | myChart.setOption(option); |
| | | myChart1.setOption(option1); |
| | | myChart2.setOption(option2); |
| | | myChart3.setOption(option3); |
| | | myChart4.setOption(option4); |
| | | myChart5.setOption(option5); |
| | | myChart6.setOption(option6); |
| | | 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(); |
| | | |
| | | 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值的切换 |
| | | 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 = ["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值的切换 |
| | | 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 = ["1周","2周","3周","4周"] |
| | | } else if (obj.name == '日度会员数') { |
| | | options.xAxis[0].data = dataX |
| | | } |
| | | myChart3.setOption(options, true) |
| | | }); |
| | | 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')); |
| | | myChart4.on('legendselectchanged', obj => { |
| | | var options = myChart4.getOption() |
| | | //这里是选择切换什么样的x轴,那么他会进行对Y值的切换 |
| | | if (obj.name == '年度次数') { |
| | | options.xAxis[0].data = yearX |
| | | } else if (obj.name == '月度次数') { |
| | | options.xAxis[0].data = monthX |
| | | } |
| | | myChart4.setOption(options, true) |
| | | }); |
| | | |
| | | myChart5.on('legendselectchanged', obj => { |
| | | var options = myChart5.getOption() |
| | | //这里是选择切换什么样的x轴,那么他会进行对Y值的切换 |
| | | if (obj.name == '年度次数') { |
| | | options.xAxis[0].data = yearX |
| | | } else if (obj.name == '月度次数') { |
| | | options.xAxis[0].data = monthX |
| | | } |
| | | myChart5.setOption(options, true) |
| | | }); |
| | | |
| | | var ajax2 = new $ax(Feng.ctxPath + "/data/actPt", function(data){ |
| | | console.log(data) |
| | | |
| | | $("#allHour").text(data.allHour) |
| | | |
| | | option4 = { |
| | | tooltip: { |
| | | trigger: 'axis' |
| | | }, |
| | | legend: { |
| | | data: ['年度次数', '月度次数'], |
| | | icon: 'stack', |
| | | selectedMode: 'single', // 单选 |
| | | selected: { |
| | | 年度次数: true, |
| | | 月度次数: 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 |
| | | } |
| | | |
| | | ] |
| | | }; |
| | | option5 = { |
| | | tooltip: { |
| | | trigger: 'axis' |
| | | }, |
| | | legend: { |
| | | data: ['年度次数', '月度次数'], |
| | | icon: 'stack', |
| | | selectedMode: 'single', // 单选 |
| | | selected: { |
| | | 年度次数: true, |
| | | 月度次数: 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.yearsUser |
| | | }, |
| | | { |
| | | name: '月度次数', |
| | | type: 'line', |
| | | stack: 'Total', |
| | | data: data.monthsUser |
| | | } |
| | | ] |
| | | }; |
| | | }); |
| | | ajax2.set("type",1) |
| | | ajax2.start() |
| | | myChart4.setOption(option4); |
| | | myChart5.setOption(option5); |
| | | } |
| | | |
| | | |
| | | function ptStu() { |
| | | var myChart6 = echarts.init(document.getElementById('teach')); |
| | | myChart6.on('legendselectchanged', obj => { |
| | | var options = myChart6.getOption() |
| | | //这里是选择切换什么样的x轴,那么他会进行对Y值的切换 |
| | | console.log("看学员") |
| | | console.log(obj.name) |
| | | 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 = ["1周","2周","3周","4周"] |
| | | }else if (obj.name == '日度学员数') { |
| | | options.xAxis[0].data = dataX |
| | | } |
| | | myChart6.setOption(options, true) |
| | | }); |
| | | var ajax2 = new $ax(Feng.ctxPath + "/data/stuPt", function(data){ |
| | | console.log(data) |
| | | $("#allUser").text(data.allUser) |
| | | option6 = { |
| | | 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 |
| | | } |
| | | ] |
| | | }; |
| | | }); |
| | | ajax2.start() |
| | | myChart6.setOption(option6); |
| | | |
| | | var ajax2 = new $ax(Feng.ctxPath + "/data/coursePt", function(data){ |
| | | console.log(data) |
| | | $("#allHour").text(data.allHour) |
| | | option7 = { |
| | | 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.weekData |
| | | }, |
| | | { |
| | | name: '日度耗课数', |
| | | type: 'line', |
| | | stack: 'Total', |
| | | data: data.dayData |
| | | } |
| | | ] |
| | | }; |
| | | }); |
| | | console.log("调用") |
| | | var myChart7 = echarts.init(document.getElementById('courseData')); |
| | | myChart7.on('legendselectchanged', obj => { |
| | | var options = myChart7.getOption() |
| | | //这里是选择切换什么样的x轴,那么他会进行对Y值的切换 |
| | | console.log("看看选择") |
| | | console.log(obj.name) |
| | | if (obj.name == '年度耗课数') { |
| | | console.log("看看年度轴") |
| | | options.xAxis[0].data = yearX |
| | | console.log(yearX) |
| | | } else if (obj.name == '月度耗课数') { |
| | | console.log("看看月度轴") |
| | | options.xAxis[0].data = monthX |
| | | console.log(monthX) |
| | | }else if (obj.name == '周度耗课数') { |
| | | options.xAxis[0].data = ["1周","2周","3周","4周"] |
| | | }else if (obj.name == '日度耗课数') { |
| | | console.log("看看日度轴") |
| | | options.xAxis[0].data = dataX |
| | | console.log(dataX) |
| | | } |
| | | myChart7.setOption(options, true) |
| | | }); |
| | | ajax2.start() |
| | | myChart7.setOption(option7); |
| | | } |
| | | |
| | | function ptCourse() { |
| | | var ajax2 = new $ax(Feng.ctxPath + "/data/coursePt", function(data){ |
| | | |
| | | $("#allHour").text(data.allHour) |
| | | console.log("周度") |
| | | console.log(data.weekData) |
| | | option7 = { |
| | | 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.weekData |
| | | }, |
| | | { |
| | | name: '日度耗课数', |
| | | type: 'line', |
| | | stack: 'Total', |
| | | data: data.dayData |
| | | } |
| | | ] |
| | | }; |
| | | }); |
| | | console.log("调用") |
| | | var myChart7 = echarts.init(document.getElementById('courseData')); |
| | | myChart7.on('legendselectchanged', obj => { |
| | | var options = myChart7.getOption() |
| | | //这里是选择切换什么样的x轴,那么他会进行对Y值的切换 |
| | | console.log("看看选择") |
| | | console.log(obj.name) |
| | | if (obj.name == '年度耗课数') { |
| | | console.log("看看年度轴") |
| | | options.xAxis[0].data = yearX |
| | | console.log(yearX) |
| | | } else if (obj.name == '月度耗课数') { |
| | | console.log("看看月度轴") |
| | | options.xAxis[0].data = monthX |
| | | console.log(monthX) |
| | | }else if (obj.name == '周度耗课数') { |
| | | options.xAxis[0].data = ["1周","2周","3周","4周"] |
| | | }else if (obj.name == '日度耗课数') { |
| | | console.log("看看日度轴") |
| | | options.xAxis[0].data = dataX |
| | | console.log(dataX) |
| | | } |
| | | myChart7.setOption(options, true) |
| | | }); |
| | | |
| | | |
| | | ajax2.start() |
| | | myChart7.setOption(option7); |
| | | } |
| | | |
| | | function getContent(type){ |
| | | //设置点击字体颜色效果 |
| | | for(var i=1;i<4;i++){ |
| | |
| | | $("#ensure").show(); |
| | | $("#nextB").hide(); |
| | | } |
| | | |
| | | if(type==2){ |
| | | var ajax = new $ax(Feng.ctxPath + "/data/stuUserData", function (data) { |
| | | console.log(data,323232) |
| | | var chartDom = document.getElementById('cookieAge'); |
| | | var myChart = echarts.init(chartDom); |
| | | var option; |
| | | option = { |
| | | title: { |
| | | text: '年龄分布', |
| | | subtext: '', |
| | | left: 'center' |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item' |
| | | }, |
| | | |
| | | series: [ |
| | | { |
| | | name: 'Access From', |
| | | type: 'pie', |
| | | radius: '50%', |
| | | data: [ |
| | | { value: data.age1, name: '0-12岁' }, |
| | | { value: data.age2, name: '13-18岁' }, |
| | | { value: data.age3, name: '19-25岁' }, |
| | | { value: data.age4, name: '12-35岁' }, |
| | | { value: data.age5, name: '36-50岁' }, |
| | | { value: data.age6, name: '51岁以上' }, |
| | | |
| | | ], |
| | | emphasis: { |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | | shadowOffsetX: 0, |
| | | shadowColor: 'rgba(0, 0, 0, 0.5)' |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | }; |
| | | myChart.setOption(option); |
| | | |
| | | |
| | | |
| | | var chartDom = document.getElementById('cookieGender'); |
| | | var myChart = echarts.init(chartDom); |
| | | var option; |
| | | option = { |
| | | title: { |
| | | text: '性别分布', |
| | | subtext: '', |
| | | left: 'center' |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item' |
| | | }, |
| | | |
| | | series: [ |
| | | { |
| | | name: 'Access From', |
| | | type: 'pie', |
| | | radius: '50%', |
| | | data: [ |
| | | { value: data.boy, name: '男' }, |
| | | { value: data.girl, name: '女' }, |
| | | |
| | | ], |
| | | emphasis: { |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | | shadowOffsetX: 0, |
| | | shadowColor: 'rgba(0, 0, 0, 0.5)' |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | }; |
| | | myChart.setOption(option); |
| | | |
| | | |
| | | |
| | | |
| | | var chartDom = document.getElementById('city'); |
| | | var myChart = echarts.init(chartDom); |
| | | var option; |
| | | |
| | | option = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'shadow' |
| | | } |
| | | }, |
| | | grid: { |
| | | left: '3%', |
| | | right: '4%', |
| | | bottom: '3%', |
| | | containLabel: true |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: data.cityData |
| | | }, |
| | | yAxis: { |
| | | type: 'value' |
| | | }, |
| | | series: [ |
| | | { |
| | | data: data.cityNum, |
| | | type: 'bar' |
| | | } |
| | | ] |
| | | }; |
| | | myChart.setOption(option); |
| | | |
| | | |
| | | |
| | | }, function (data) { |
| | | |
| | | }); |
| | | ajax.start(); |
| | | |
| | | |
| | | ptUser() |
| | | |
| | | ptActivity() |
| | | |
| | | } |
| | | |
| | | |
| | | if(type==3){ |
| | | var ajax = new $ax(Feng.ctxPath + "/data/stuCourseData", function (data) { |
| | | console.log(data.data1) |
| | | var chartDom = document.getElementById('cookieTeachCourse'); |
| | | var myChart = echarts.init(chartDom); |
| | | var option; |
| | | |
| | | option = { |
| | | xAxis: { |
| | | type: 'category', |
| | | data: data.data1, |
| | | }, |
| | | yAxis: { |
| | | type: 'value' |
| | | }, |
| | | series: [ |
| | | { |
| | | data: data.data2, |
| | | type: 'bar' |
| | | } |
| | | ] |
| | | }; |
| | | myChart.setOption(option); |
| | | }, function (data) { |
| | | |
| | | }); |
| | | ajax.start(); |
| | | ptStu() |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | } |
| | | function getContent1(type){ |
| | | //设置点击字体颜色效果 |
| | |
| | | $("#nextB").hide(); |
| | | } |
| | | } |
| | | </script> |
| | | <script> |
| | | |
| | | $(function(){ |
| | | |
| | | var chartDom = document.getElementById('cookieTicket'); |
| | | var myChart = echarts.init(chartDom); |
| | | var option; |
| | | |
| | | option = { |
| | | title: { |
| | | text: '门票收入', |
| | |
| | | type: 'pie', |
| | | radius: '50%', |
| | | data: [ |
| | | { value: 1048, name: '年票' }, |
| | | { value: 735, name: '亲子票' }, |
| | | { value: $("#day").val(), name: '日卡' }, |
| | | { value: $("#month").val(), name: '月卡' }, |
| | | { value: $("#quarter").val(), name: '季卡' }, |
| | | { value: $("#year").val(), name: '年卡' }, |
| | | |
| | | ], |
| | | emphasis: { |
| | |
| | | } |
| | | ] |
| | | }; |
| | | myChart.setOption(option); |
| | | myChart.setOption(option); |
| | | }); |
| | | $(function(){ |
| | | var courseData = "${data.courseData}" |
| | | courseData =courseData.replace("[","").replace("]","") |
| | | courseData = courseData.split('},') |
| | | |
| | | var a=[]; |
| | | for (let j = 0; j <courseData.length; j++) { |
| | | if(j<courseData.length-1){ |
| | | var d = courseData[j].replace("{","").replace("}","").split(",") |
| | | let obj ={ |
| | | name:d[0].split("=")[1], |
| | | value:d[1].split("=")[1] |
| | | } |
| | | a.push(obj) |
| | | } |
| | | } |
| | | var chartDom = document.getElementById('cookieCourse'); |
| | | var myChart = echarts.init(chartDom); |
| | | var myChart = echarts.init(chartDom) |
| | | |
| | | var option; |
| | | option = { |
| | | title: { |
| | |
| | | name: 'Access From', |
| | | type: 'pie', |
| | | radius: '50%', |
| | | data: [ |
| | | { value: 1048, name: '篮球课' }, |
| | | { value: 735, name: '羽毛课' }, |
| | | { value: 735, name: '足球课' }, |
| | | |
| | | ], |
| | | data: a, |
| | | emphasis: { |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | |
| | | myChart.setOption(option); |
| | | }); |
| | | $(function(){ |
| | | var courseData = "${data.siteData}" |
| | | |
| | | courseData =courseData.replace("[","").replace("]","") |
| | | courseData = courseData.split('},') |
| | | |
| | | var a=[]; |
| | | for (let j = 0; j <courseData.length; j++) { |
| | | if(j<courseData.length-1){ |
| | | var d = courseData[j].replace("{","").replace("}","").split(",") |
| | | let obj ={ |
| | | name:d[0].split("=")[1], |
| | | value:d[1].split("=")[1] |
| | | } |
| | | a.push(obj) |
| | | } |
| | | } |
| | | var chartDom = document.getElementById('cookieBooking'); |
| | | var myChart = echarts.init(chartDom); |
| | | var option; |
| | |
| | | name: 'Access From', |
| | | type: 'pie', |
| | | radius: '50%', |
| | | data: [ |
| | | { value: 1048, name: '激战' }, |
| | | { value: 735, name: '篮球场' }, |
| | | { value: 735, name: '足球场' }, |
| | | |
| | | ], |
| | | emphasis: { |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | | shadowOffsetX: 0, |
| | | shadowColor: 'rgba(0, 0, 0, 0.5)' |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | }; |
| | | myChart.setOption(option); |
| | | }); |
| | | $(function(){ |
| | | var chartDom = document.getElementById('cookieAge'); |
| | | var myChart = echarts.init(chartDom); |
| | | var option; |
| | | option = { |
| | | title: { |
| | | text: '年龄分布', |
| | | subtext: '', |
| | | left: 'center' |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item' |
| | | }, |
| | | |
| | | series: [ |
| | | { |
| | | name: 'Access From', |
| | | type: 'pie', |
| | | radius: '50%', |
| | | data: [ |
| | | { value: 1048, name: '30-35' }, |
| | | { value: 735, name: '12-18' }, |
| | | |
| | | ], |
| | | data: a, |
| | | emphasis: { |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | |
| | | type: 'pie', |
| | | radius: '50%', |
| | | data: [ |
| | | { value: 1048, name: '30-35' }, |
| | | { value: 735, name: '12-18' }, |
| | | |
| | | ], |
| | | emphasis: { |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | | shadowOffsetX: 0, |
| | | shadowColor: 'rgba(0, 0, 0, 0.5)' |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | }; |
| | | myChart.setOption(option); |
| | | }); |
| | | $(function(){ |
| | | var chartDom = document.getElementById('cookieGender'); |
| | | var myChart = echarts.init(chartDom); |
| | | var option; |
| | | option = { |
| | | title: { |
| | | text: '性别分布', |
| | | subtext: '', |
| | | left: 'center' |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item' |
| | | }, |
| | | |
| | | series: [ |
| | | { |
| | | name: 'Access From', |
| | | type: 'pie', |
| | | radius: '50%', |
| | | data: [ |
| | | { value: 1048, name: '男' }, |
| | | { value: 735, name: '女' }, |
| | | { value: $("#age1").val(), name: '0-7岁' }, |
| | | { value: $("#age2").val(), name: '8-10岁' }, |
| | | { value:$("#age3").val(), name: '11-12岁' }, |
| | | { value: $("#age4").val(), name: '13岁以上' }, |
| | | |
| | | ], |
| | | emphasis: { |
| | |
| | | type: 'pie', |
| | | radius: '50%', |
| | | data: [ |
| | | { value: 1048, name: '男' }, |
| | | { value: 735, name: '女' }, |
| | | { value: $("#boy").val(), name: '男' }, |
| | | { value: $("#girl").val(), name: '女' }, |
| | | |
| | | ], |
| | | emphasis: { |
| | |
| | | }; |
| | | myChart.setOption(option); |
| | | }); |
| | | $(function(){ |
| | | var chartDom = document.getElementById('city'); |
| | | var myChart = echarts.init(chartDom); |
| | | var option; |
| | | |
| | | option = { |
| | | xAxis: { |
| | | type: 'category', |
| | | data: ['北京', '上海', '广东', '深圳', '成都', '曹县', '奥里给'] |
| | | }, |
| | | yAxis: { |
| | | type: 'value' |
| | | }, |
| | | series: [ |
| | | { |
| | | data: [120, 200, 150, 80, 70, 110, 130], |
| | | type: 'bar' |
| | | } |
| | | ] |
| | | }; |
| | | myChart.setOption(option); |
| | | }); |
| | | $(function(){ |
| | | var chartDom = document.getElementById('cookieTeachCourse'); |
| | | var myChart = echarts.init(chartDom); |
| | | var option; |
| | | |
| | | option = { |
| | | xAxis: { |
| | | type: 'category', |
| | | data: ['足球课', '篮球课', '羽毛球课', '网球课', '排球课'] |
| | | }, |
| | | yAxis: { |
| | | type: 'value' |
| | | }, |
| | | series: [ |
| | | { |
| | | data: [120, 200, 150, 80, 70, 110, 130], |
| | | type: 'bar' |
| | | } |
| | | ] |
| | | }; |
| | | myChart.setOption(option); |
| | | }); |
| | | </script> |
| | | @} |