初始上传
This commit is contained in:
278
addon/wechat/shop/view/stat/stat.html
Executable file
278
addon/wechat/shop/view/stat/stat.html
Executable file
@@ -0,0 +1,278 @@
|
||||
<link rel="stylesheet" href="WECHAT_CSS/wx_access_statistics.css">
|
||||
<script src="SHOP_JS/echarts.min.js"></script>
|
||||
|
||||
<div class="layui-card card-common card-brief">
|
||||
<div class="layui-card-header">
|
||||
<span class="card-title">用户分析/昨日</span>
|
||||
</div>
|
||||
<div class="layui-card-body access-statistics">
|
||||
<ul class="access-api-list ">
|
||||
<li class="access-api-item">
|
||||
<div class="access-api-item-title">
|
||||
<h3>新关注人数</h3>
|
||||
</div>
|
||||
<p class="access-api-itme-content">{if !empty($yesterday_user_data.new_user)}{$yesterday_user_data.new_user}{else/}0{/if}</p>
|
||||
</li>
|
||||
<li class="access-api-item">
|
||||
<div class="access-api-item-title">
|
||||
<h3>取消关注人数</h3>
|
||||
</div>
|
||||
<p class="access-api-itme-content">{if !empty($yesterday_user_data.cancel_user)}{$yesterday_user_data.cancel_user}{else/}0{/if}</p>
|
||||
</li>
|
||||
<li class="access-api-item">
|
||||
<div class="access-api-item-title">
|
||||
<h3>净增关注人数</h3>
|
||||
</div>
|
||||
<p class="access-api-itme-content">{if !empty($yesterday_user_data.net_growth_user)}{$yesterday_user_data.net_growth_user}{else/}0{/if}</p>
|
||||
</li>
|
||||
<li class="access-api-item">
|
||||
<div class="access-api-item-title">
|
||||
<h3>累积关注人数</h3>
|
||||
</div>
|
||||
<p class="access-api-itme-content">{if !empty($yesterday_user_data.cumulate_user)}{$yesterday_user_data.cumulate_user}{else/}0{/if}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card card-common card-brief">
|
||||
<div class="layui-card-header">
|
||||
<span class="card-title">接口分析/昨日</span>
|
||||
</div>
|
||||
<div class="layui-card-body access-statistics">
|
||||
<ul class="access-api-list">
|
||||
<li class="access-api-item">
|
||||
<div class="access-api-item-title">
|
||||
<h3>调用次数</h3>
|
||||
</div>
|
||||
<p class="access-api-itme-content">{if !empty($yesterday_interface_data.callback_count)}{$yesterday_interface_data.callback_count}{else/}--{/if}</p>
|
||||
</li>
|
||||
<li class="access-api-item">
|
||||
<div class="access-api-item-title">
|
||||
<h3>失败率</h3>
|
||||
</div>
|
||||
<p class="access-api-itme-content">{if !empty($yesterday_interface_data.fail_count)}{$yesterday_interface_data.fail_count}{else/}--{/if}</p>
|
||||
</li>
|
||||
<li class="access-api-item">
|
||||
<div class="access-api-item-title">
|
||||
<h3>平均耗时(毫秒)</h3>
|
||||
</div>
|
||||
<p class="access-api-itme-content">{if !empty($yesterday_interface_data.callback_count) && !empty($yesterday_interface_data.total_time_cost)}{php}echo round($yesterday_interface_data['total_time_cost']/$yesterday_interface_data['callback_count'],2);{/php}{else/}--{/if}</p>
|
||||
</li>
|
||||
<li class="access-api-item">
|
||||
<div class="access-api-item-title">
|
||||
<h3>最大耗时(毫秒)</h3>
|
||||
</div>
|
||||
<p class="access-api-itme-content">{if !empty($yesterday_interface_data.max_time_cost)}{$yesterday_interface_data.max_time_cost}{else/}--{/if}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card card-common card-brief">
|
||||
<div class="layui-card-header">
|
||||
<span class="card-title">趋势图</span>
|
||||
</div>
|
||||
<div class="layui-card-body access-statistics">
|
||||
<div class="layui-tab layui-tab-brief" lay-filter="chart_tab">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this" lay-id="user">用户分析</li>
|
||||
<li lay-id="interface">接口分析</li>
|
||||
</ul>
|
||||
<blockquote class="layui-elem-quote" style="margin-top:10px;" >
|
||||
<span class="layui-breadcrumb" lay-separator="|" >
|
||||
<a href="javascript:void(0)" class="layui-breadcrumb-item layui-breadcrumb-active" lay-util="week">最近7天</a>
|
||||
<a href="javascript:void(0)" class="layui-breadcrumb-item" lay-util="month">最近30天</a>
|
||||
</span>
|
||||
</blockquote>
|
||||
<div class="layui-tab-content">
|
||||
<div class="layui-tab-item layui-show">
|
||||
<div id="user_chart" style="width: 100%;height:400px;"></div>
|
||||
</div>
|
||||
<div class="layui-tab-item" id="interface_main">
|
||||
<div id="interface_chart" style="width: 100%;height:400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var is_render = true;
|
||||
var date_type = "week";
|
||||
layui.use(['element', 'util'], function(){
|
||||
var element = layui.element,
|
||||
util = layui.util;
|
||||
|
||||
usersummarystatistics();
|
||||
element.on('tab(chart_tab)', function(){
|
||||
if(this.getAttribute('lay-id') == "interface" && is_render){
|
||||
is_render = false;
|
||||
interfaceSummaryStatistics();
|
||||
}
|
||||
});
|
||||
|
||||
//按钮事件
|
||||
util.event('lay-util', {
|
||||
week: function(othis){
|
||||
$(".layui-breadcrumb-item").removeClass("layui-breadcrumb-active");
|
||||
$(othis).addClass("layui-breadcrumb-active");
|
||||
date_type = "week";
|
||||
usersummarystatistics();
|
||||
if(is_render == false){
|
||||
interfaceSummaryStatistics();
|
||||
}
|
||||
|
||||
}
|
||||
,month: function(othis){
|
||||
$(".layui-breadcrumb-item").removeClass("layui-breadcrumb-active");
|
||||
$(othis).addClass("layui-breadcrumb-active");
|
||||
date_type = "month";
|
||||
usersummarystatistics();
|
||||
if(is_render == false){
|
||||
interfaceSummaryStatistics();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
//折线图
|
||||
if($('#user_chart').length) {
|
||||
var user_chart = echarts.init(document.getElementById('user_chart'));
|
||||
}
|
||||
|
||||
//获取微信公众号用户分析统计数据(按日)
|
||||
function usersummarystatistics(){
|
||||
user_chart.showLoading();//加载视图
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "{:addon_url('wechat://shop/stat/usersummarystatistics')}",
|
||||
dataType: "JSON",
|
||||
data: {date_type : date_type},
|
||||
success: function (result) {
|
||||
var chart_data = result.data;
|
||||
var option = {
|
||||
legend: {
|
||||
data:['新关注人数','取消关注人数','净增关注人数','累积关注人数'],
|
||||
x: 'right',
|
||||
right: '20',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
left: '20',
|
||||
right: '20',
|
||||
bottom: '20',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: chart_data.date
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: chart_data.data.new_user_data,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
name: "新关注人数"
|
||||
},
|
||||
{
|
||||
data: chart_data.data.cancel_user_data,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
name: "取消关注人数"
|
||||
},
|
||||
{
|
||||
data: chart_data.data.net_growth_user_data,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
name: "净增关注人数"
|
||||
},
|
||||
{
|
||||
data: chart_data.data.cumulate_user_data,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
name: "累积关注人数"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
user_chart.setOption(option);
|
||||
user_chart.hideLoading();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//获取微信公众号接口调用统计数据(按日)
|
||||
function interfaceSummaryStatistics(){
|
||||
if(!$('#interface_chart').length) return;
|
||||
var interface_chart = echarts.init(document.getElementById('interface_chart'));
|
||||
interface_chart.showLoading();//加载视图
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: "{:addon_url('wechat://shop/stat/interfaceSummaryStatistics')}",
|
||||
dataType: "JSON",
|
||||
data: {date_type : date_type},
|
||||
success: function (result) {
|
||||
var chart_data = result.data;
|
||||
var option = {
|
||||
legend: {
|
||||
data:['调用次数','失败率','平均耗时','最大耗时'],
|
||||
x: 'right',
|
||||
right: '20',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
left: '20',
|
||||
right: '20',
|
||||
bottom: '20',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: chart_data.date
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: chart_data.data.callback_count_data,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
name: "调用次数"
|
||||
},
|
||||
{
|
||||
data: chart_data.data.fail_count_data,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
name: "失败率"
|
||||
},
|
||||
{
|
||||
data: chart_data.data.average_time_cost_data,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
name: "平均耗时"
|
||||
},
|
||||
{
|
||||
data: chart_data.data.max_time_cost_data,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
name: "最大耗时"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
interface_chart.setOption(option);
|
||||
interface_chart.hideLoading();
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user