{layout name="layout1" /}
<div class="wrapper">
<div class="layui-form" lay-filter="">
<div class="layui-card" >
<div class="layui-card-body">
<div class="layui-inline">
<label class="layui-form-label">汇总时间:</label>
<div class="layui-input-inline">
<div class="layui-input-inline">
<input type="text" name="start_time" class="layui-input" id="start_time"
placeholder="" autocomplete="off">
</div>
</div>
<div class="layui-input-inline" style="margin-right: 5px;width: 20px;">
<label class="layui-form-mid">至</label>
</div>
<div class="layui-input-inline">
<input type="text" name="end_time" class="layui-input" id="end_time"
placeholder="" autocomplete="off">
</div>
</div>
<div class="layui-inline">
<button class="layui-btn layui-btn-sm layuiadmin-btn-ad {$view_theme_color}" lay-submit
lay-filter="menber-search">查询
</button>
<button class="layui-btn layui-btn-sm layuiadmin-btn-ad layui-btn-primary " lay-submit
lay-filter="menber-clear-search">重置
</button>
</div>
</div>
</div>
<div class="layui-row layui-col-space15">
<div class="layui-col-sm6 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">
会员数量（人）
</div>
<div class="layui-card-body layuiadmin-card-list">
<p class="layuiadmin-big-font" id="user_num">0</p>
</div>
</div>
</div>
<div class="layui-col-sm6 layui-col-md3" >
<div class="layui-card" >
<div class="layui-card-header" >
新增会员数量（人）
</div>
<div class="layui-card-body layuiadmin-card-list" >
<p class="layuiadmin-big-font" id="user_add">0</p>
</div>
</div>
</div>
</div>
<!--新增会员数量分析图-->
<div class="layui-card" style="margin-top:20px">
<div class="layui-card-body">
<div class="layui-form-item">
<div class="layui-input-inline layui-card-header" style="">近15天新增会员数量（人）</div>
</div>
<div class="layui-form-item">
<div id="memberCharts" style="width: 100%;height: 80vh;"></div>
</div>
</div>
</div>
</div>
</div>
<script>
layui.config({
version:"{$front_version}",
base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index','table','like','echarts','form'], function(){
var $ = layui.$
,form = layui.form
,like = layui.like
,echarts = layui.echarts
,laydate = layui.laydate;
//日期时间范围
laydate.render({
elem: '#start_time'
, type: 'datetime'
});
laydate.render({
elem: '#end_time'
, type: 'datetime'
});
//监听搜索
form.on('submit(menber-search)', function (data) {
graphData();
});
//清空查询
form.on('submit(menber-clear-search)', function () {
$('#start_time').val('');
$('#end_time').val('');
graphData();
});
const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
graphData();
function graphData(){
var start_time = $('#start_time').val();
var end_time = $('#end_time').val();
like.ajax({
url:'{:url("statistics/member")}',
data: {'start_time':start_time,'end_time':end_time},
type: "post",
success: function (res) {
$('#user_num').text(res.data.user_num);
$('#user_add').text(res.data.user_add);
// 默认选中七天内时间
$('#start_time').val(res.data.start_time);
$('#end_time').val(res.data.end_time);
start_time = res.data.start_time;
end_time = res.data.end_time;
var memberNum = res.data.echarts_count;
var newMember = res.data.echarts_add;
var xData = res.data.days;
var option = setOption(memberNum, newMember, xData);
let chart = document.getElementById('memberCharts');
let memberChart = echarts.init(chart);
memberChart.setOption(option, true);
window.addEventListener('resize', function () {
memberChart.resize()
});
}
});
}
//新增会员数量-图标设置
function setOption(memberNum, newMember, xData) {
option = {
backgroundColor: '#fff',
legend: {
icon: 'circle',
top: '5%',
right: '5%',
itemWidth: 6,
itemGap: 20,
textStyle: {
color: '#556677'
}
},
tooltip: {
trigger: 'axis',
backgroundColor: '#fff',
textStyle: {
color: '#5c6c7c'
},
padding: [10, 10],
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
},
grid: {
top: '15%'
},
xAxis: [{
type: 'category',
name: '(日期)',
data: xData,
axisLine: {
lineStyle: {
color: 'rgba(107,107,107,0.37)', //x轴颜色
}
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
textStyle: {
color: '#999' //坐标轴字颜色
},
margin: 15
},
axisPointer: {
label: {
padding: [11, 5, 7],
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#fff' // 0% 处的颜色
}, {
offset: 0.9,
color: '#fff' // 0% 处的颜色
}, {
offset: 0.9,
color: '#33c0cd' // 0% 处的颜色
}, {
offset: 1,
color: '#33c0cd' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
},
boundaryGap: false
}],
yAxis: [{
type: 'value',
name: '(人)',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(107,107,107,0.37)', //y轴颜色
}
},
axisLabel: {
textStyle: {
color: '#999'
}
},
splitLine: {
show: false
}
}],
series: [{
name: '新增会员数量',
type: 'line',
data: newMember,
symbolSize: 1,
symbol: 'circle',
smooth: true,
yAxisIndex: 0,
showSymbol: false,
lineStyle: {
width: 5,
color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
offset: 0,
color: '#73DD39'
},
{
offset: 1,
color: '#73DDFF'
}
]),
shadowColor: 'rgba(115,221,255, 0.3)',
shadowBlur: 10,
shadowOffsetY: 20
},
itemStyle: {
normal: {
color: colorList[1],
borderColor: colorList[1]
}
}
}]
};
return option;
}
});
</script>
<script type="text/javascript">
(function(){
var tab_tit = document.getElementById('think_page_trace_tab_tit').getElementsByTagName('span');
var tab_cont = document.getElementById('think_page_trace_tab_cont').getElementsByTagName('div');
var open = document.getElementById('think_page_trace_open');
var close = document.getElementById('think_page_trace_close').children[0];
var trace = document.getElementById('think_page_trace_tab');
var cookie = document.cookie.match(/thinkphp_show_page_trace=(\d\|\d)/);
var history = (cookie && typeof cookie[1] != 'undefined' && cookie[1].split('|')) || [0,0];
open.onclick = function(){
trace.style.display = 'block';
this.style.display = 'none';
close.parentNode.style.display = 'block';
history[0] = 1;
document.cookie = 'thinkphp_show_page_trace='+history.join('|')
}
close.onclick = function(){
trace.style.display = 'none';
this.parentNode.style.display = 'none';
open.style.display = 'block';
history[0] = 0;
document.cookie = 'thinkphp_show_page_trace='+history.join('|')
}
for(var i = 0; i < tab_tit.length; i++){
tab_tit[i].onclick = (function(i){
return function(){
for(var j = 0; j < tab_cont.length; j++){
tab_cont[j].style.display = 'none';
tab_tit[j].style.color = '#999';
}
tab_cont[i].style.display = 'block';
tab_tit[i].style.color = '#000';
history[1] = i;
document.cookie = 'thinkphp_show_page_trace='+history.join('|')
}
})(i)
}
parseInt(history[0]) && open.click();
tab_tit[history[1]].click();
})();
</script>
</body>
</html>