|
@layout("/common/_container.html"){
|
<link href="${ctxPath}/static/css/plugins/switchery/switchery.css" rel="stylesheet">
|
<style>
|
.table1{
|
display: inline;
|
width: 33.333333333333333333333333333333333333%;
|
float:left;
|
text-align:center;
|
border-collapse:collapse;
|
font-size: 18px;
|
}
|
.table2{
|
display: inline;
|
width: 50%;
|
float:left;
|
text-align:center;
|
border-collapse:collapse;
|
font-size: 18px;
|
}
|
.table3{
|
display: inline;
|
width: 50%;
|
float:left;
|
text-align:center;
|
border-collapse:collapse;
|
font-size: 18px;
|
}
|
.table1:hover{
|
background-color: rgba(255,0,0,.3);
|
}
|
.newWidth, .single-line{
|
max-width:150px !important;display: initial !important;
|
}
|
.companyValueClass td:first-child {
|
display: flex;
|
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 id="div1" class='table1' onclick="getContent(1)" style="border-right: 1px solid #333;background-color: rgb(26, 179, 148);color: white;">收入统计</div>
|
<div id="div2" class='table1' onclick="getContent(2)" style="border-right: 1px solid #333;">运营统计</div>
|
<div id="div3" class='table1' onclick="getContent(3)" style="border-right: 1px solid #333;">教学统计</div>
|
</div>
|
<div class="row" id="content1" style="margin-left: 100px;">
|
<div class="col-sm-11">
|
<div class="form-group">
|
<div class="col-sm-10">
|
<h2>营收数据</h2>
|
<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 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>
|
</br>
|
<div class="col-sm-3" style="width: 400px;display: flex">
|
<#TimeCon id="beginTime" name="时间段:" isTime="false"/>
|
<#button name="搜索" icon="fa-search" clickFun="search1()"/>
|
</div>
|
</div>
|
|
<div class="col-sm-10" style="width: 1500px" >
|
</br>
|
</br>
|
<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>
|
<div class="col-sm-10" style="display: flex;">
|
<div id="cookieTicket" style="width: 1500px;height:300px;"></div>
|
<div id="cookieCourse" style="width: 1500px;height:300px;"></div>
|
<div id="cookieBooking" style="width: 1500px;height:300px;"></div>
|
</div>
|
|
<div class="col-sm-10">
|
<h2>退费数据</h2>
|
</div>
|
<div class="col-sm-10" style="width: 1500px" >
|
</br>
|
</br>
|
<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>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="row" id="content2" style="margin-left: 100px;">
|
<div class="col-sm-11">
|
<div class="form-group">
|
<div class="col-sm-10">
|
<h2>用户数据</h2>
|
</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;">用户总数:<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">
|
<div class="row" id="c1" style="margin-left: 100px;">
|
</br>
|
</br>
|
</br>
|
|
<div id="user" style="width: 1280px;height:500px;"></div>
|
</div>
|
<div class="row" id="c2" style="margin-left: 100px;">
|
</br>
|
</br>
|
</br>
|
<div id="vip" style="width: 1280px;height:500px;"></div>
|
</div>
|
</div>
|
</br>
|
</br>
|
</br>
|
</br></br></br>
|
<div class="col-sm-10" style="display: flex">
|
</br>
|
</br>
|
</br>
|
</br></br></br>
|
<div id="cookieAge" style="width: 500px;height:300px;"></div>
|
<div id="cookieGender" style="width: 500px;height:300px;"></div>
|
</div>
|
|
<div class="col-sm-10">
|
</br>
|
</br>
|
</br>
|
<h2>地域分布</h2>
|
<div id="city" style="width: 1500px;height:500px;"></div>
|
</div>
|
<div class="col-sm-10">
|
<h2>运营数据</h2>
|
</br>
|
</br>
|
<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>
|
</div>
|
<div class="col-sm-10">
|
<div class="row" id="con1" style="margin-left: 100px;">
|
</br>
|
</br>
|
</br>
|
|
<div id="activity" style="width: 1280px;height:500px;"></div>
|
</div>
|
<div class="row" id="con2" style="margin-left: 100px;">
|
</br>
|
</br>
|
</br>
|
<div id="prepare" style="width: 1280px;height:500px;"></div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
<div class="row" id="content3" style="margin-left: 100px;">
|
<div class="col-sm-11">
|
<div class="form-group">
|
<div class="col-sm-10">
|
<h2>学员数据</h2>
|
</br>
|
</br>
|
<span>累计学员数:<span id="allUser"></span>人</span>
|
</br>
|
</br>
|
<div id="teach" style="width: 1280px;height:500px;"></div>
|
</div>
|
</br>
|
</br>
|
</br>
|
</br></br></br>
|
<div class="col-sm-10" style="display: flex">
|
</br>
|
</br>
|
</br>
|
</br></br></br>
|
<div id="cookieTeachAge" style="width: 500px;height:300px;"></div>
|
<div id="cookieTeachGender" style="width: 500px;height:300px;"></div>
|
</div>
|
|
<div class="col-sm-10">
|
</br>
|
</br>
|
</br>
|
<h2>课程分布</h2>
|
<div id="cookieTeachCourse" style="width: 1500px;height:500px;"></div>
|
</div>
|
<div class="col-sm-10">
|
<h2>课时数据</h2>
|
</br>
|
</br>
|
<span>现有课时总量:0小时</span>
|
</br>
|
</br>
|
<div id="courseData" style="width: 1280px;height:500px;"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</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>
|
// 仅格式化前端展示，接口返回的原始数值不作改动。
|
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();
|
// 营收卡片与收入类型卡片使用同一接口、同一时间范围，避免筛选后口径不一致。
|
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 || {});
|
renderIncomeTypePieChart('cookieCourse', '课程收入', resp.courseData);
|
renderIncomeTypePieChart('cookieBooking', '订场收入', resp.siteData);
|
});
|
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);
|
}
|
|
// 创建一个日期对象
|
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);
|
ptCourse();
|
|
|
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);
|
renderTicketIncomeChart(resp.ticketIncome || {});
|
renderIncomeTypePieChart('cookieCourse', '课程收入', resp.courseData);
|
renderIncomeTypePieChart('cookieBooking', '订场收入', resp.siteData);
|
});
|
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'
|
},
|
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();
|
|
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++){
|
document.getElementById("div"+i).style.color="#888888";//
|
document.getElementById("div"+i).style.backgroundColor ="";
|
$("#content"+i).hide();
|
}
|
//设置点击背景颜色效果
|
document.getElementById("div"+type).style.color="white";//
|
document.getElementById("div"+type).style.backgroundColor ="rgb(26, 179, 148)";
|
$("#type").val(type);
|
$("#content"+type).show();
|
if(type!=3){
|
$("#ensure").hide();
|
$("#nextB").show();
|
}else{
|
$("#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){
|
//设置点击字体颜色效果
|
for(var i=1;i<3;i++){
|
document.getElementById("d"+i).style.color="#888888";//
|
document.getElementById("d"+i).style.backgroundColor ="";
|
$("#c"+i).hide();
|
}
|
//设置点击背景颜色效果
|
document.getElementById("d"+type).style.color="white";//
|
document.getElementById("d"+type).style.backgroundColor ="rgb(26, 179, 148)";
|
$("#c"+type).show();
|
}
|
function getContent2(type){
|
//设置点击字体颜色效果
|
for(var i=1;i<3;i++){
|
document.getElementById("e"+i).style.color="#888888";//
|
document.getElementById("e"+i).style.backgroundColor ="";
|
$("#con"+i).hide();
|
}
|
//设置点击背景颜色效果
|
document.getElementById("e"+type).style.color="white";//
|
document.getElementById("e"+type).style.backgroundColor ="rgb(26, 179, 148)";
|
$("#con"+type).show();
|
}
|
function nextContent(){
|
var type = $("#type").val();
|
getContent(parseInt(type)+1);
|
if(parseInt(type)+1==3){
|
$("#ensure").show();
|
$("#nextB").hide();
|
}
|
}
|
|
$(function(){
|
|
var chartDom = document.getElementById('cookieTicket');
|
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: $("#day").val(), name: '日卡' },
|
{ value: $("#month").val(), name: '月卡' },
|
{ value: $("#quarter").val(), name: '季卡' },
|
{ value: $("#year").val(), name: '年卡' },
|
|
],
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
]
|
};
|
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++) {
|
var d = courseData[j].replace("{", "").replace("}", "").split(",");
|
if (d.length < 2) {
|
continue;
|
}
|
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 option;
|
option = {
|
title: {
|
text: '课程收入',
|
subtext: '',
|
left: 'center'
|
},
|
tooltip: {
|
trigger: 'item'
|
},
|
|
series: [
|
{
|
name: 'Access From',
|
type: 'pie',
|
radius: '50%',
|
data: a,
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
]
|
};
|
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++) {
|
var d = courseData[j].replace("{", "").replace("}", "").split(",");
|
if (d.length < 2) {
|
continue;
|
}
|
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;
|
option = {
|
title: {
|
text: '订场收入',
|
subtext: '',
|
left: 'center'
|
},
|
tooltip: {
|
trigger: 'item'
|
},
|
|
series: [
|
{
|
name: 'Access From',
|
type: 'pie',
|
radius: '50%',
|
data: a,
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
]
|
};
|
myChart.setOption(option);
|
});
|
$(function(){
|
var chartDom = document.getElementById('cookieTeachAge');
|
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: $("#age1").val(), name: '0-7岁' },
|
{ value: $("#age2").val(), name: '8-10岁' },
|
{ value:$("#age3").val(), name: '11-12岁' },
|
{ value: $("#age4").val(), name: '13岁以上' },
|
|
],
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
]
|
};
|
myChart.setOption(option);
|
});
|
$(function(){
|
var chartDom = document.getElementById('cookieTeachGender');
|
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: $("#boy").val(), name: '男' },
|
{ value: $("#girl").val(), name: '女' },
|
|
],
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
]
|
};
|
myChart.setOption(option);
|
});
|
|
</script>
|
@}
|
