330 lines
12 KiB
HTML
330 lines
12 KiB
HTML
{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> |