1002 lines
25 KiB
HTML
1002 lines
25 KiB
HTML
{extend name="common/base"/}
|
|
{block name="style"}
|
|
<style type="text/css">
|
|
.dashboard-num table {width: 100%;}
|
|
.dashboard-num td {text-align: center; padding: 16px 0; width: 20%;border-left: 1px solid #f1f1f1; position: relative;}
|
|
.dashboard-num td:nth-child(1) { border-left: none}
|
|
.dashboard-num .num-title { padding-bottom: 10px; color: #999;}
|
|
.dashboard-num .blue {font-size: 20px; font-weight: 300;}
|
|
.dashboard-num td .badge {position: absolute;top: 0; right: 0;}
|
|
.dashboard-num td .badge span { padding: 2px 4px; font-size: 12px; border-radius: 0 0 0 4px;}
|
|
.dashboard-total td {border-top: 1px solid #f1f1f1}
|
|
.dashboard-logs .layui-timeline-item {padding-bottom: 1px;}
|
|
.info-td { width: 90px; text-align: right;background-color: #fafafa; color: #999; padding: 5px 3px;}
|
|
.info-td {width: 90px; text-align: right;background-color: #fafafa; color: #999; padding: 5px 3px;}
|
|
.layui-card-body .layui-timeline-title {
|
|
padding-bottom: 0;
|
|
font-size: 14px;
|
|
}
|
|
.layui-card-body .layui-timeline-item {
|
|
padding-bottom: 5px;
|
|
}
|
|
.layui-card-header span {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
}
|
|
.layui-sales {
|
|
margin-bottom: 0;
|
|
overflow: hidden;
|
|
color: rgba(0,0,0,.85);
|
|
font-size: 30px;
|
|
}
|
|
|
|
.layui-sales-info {
|
|
padding-top: 16px;
|
|
color: rgba(0,0,0,.65);
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
fieldset.layui-field-title {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
|
|
.select_time {
|
|
width: 350px;
|
|
/* border-radius: 5px; */
|
|
float: right;
|
|
/*background: #1e3d64;*/
|
|
/*left: 74%;*/
|
|
/*top: 221%;*/
|
|
position: relative;
|
|
z-index: 11;
|
|
}
|
|
|
|
.select_time span {
|
|
display: block;
|
|
width: 60px;
|
|
height: 25px;
|
|
float: left;
|
|
/*background: #4095e5;*/
|
|
text-align: center;
|
|
line-height: 25px;
|
|
position: relative;
|
|
top:-28px;
|
|
right: -30%;
|
|
border-left: 1px solid #dcdfe6;
|
|
border-radius: 4px 0 0 4px;
|
|
box-shadow: none!important;
|
|
cursor:pointer;
|
|
}
|
|
.select_time .active {
|
|
color: #fff;
|
|
background-color: #6394f9;
|
|
border-color: #6394f9;
|
|
box-shadow: -1px 0 0 0 #6394f9;
|
|
}
|
|
|
|
#btsspan{
|
|
position: relative;
|
|
width: 250px;
|
|
left:33%;
|
|
z-index: 11;
|
|
}
|
|
|
|
#btsspan span{
|
|
display: block;
|
|
width: 60px;
|
|
height: 25px;
|
|
float: left;
|
|
/*background: #4095e5;*/
|
|
text-align: center;
|
|
line-height: 25px;
|
|
position: relative;
|
|
border-left: 1px solid #dcdfe6;
|
|
border-radius: 4px 0 0 4px;
|
|
box-shadow: none!important;
|
|
cursor:pointer;
|
|
}
|
|
.el-row .active {
|
|
color: #fff;
|
|
background-color: #6394f9;
|
|
border-color: #6394f9;
|
|
box-shadow: -1px 0 0 0 #6394f9;
|
|
}
|
|
</style>
|
|
{/block}
|
|
<!-- 主体 -->
|
|
{block name="body"}
|
|
<div class="p-3">
|
|
<div class="layui-row layui-col-space12">
|
|
<div class="">
|
|
<div class="layui-row layui-col-space12">
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card dashboard-num">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<div class="num-title">总会员数</div>
|
|
<div class="blue">{$totaluser}</div>
|
|
</td>
|
|
<td>
|
|
<div class="num-title">老人人数</div>
|
|
<div class="blue">{$old_num}</div>
|
|
</td>
|
|
<td>
|
|
<div class="num-title">儿童人数</div>
|
|
<div class="blue">{$children_num}</div>
|
|
</td>
|
|
<td>
|
|
<div class="num-title">未婚男</div>
|
|
<div class="blue">{$unmarried_man_num}</div>
|
|
</td>
|
|
<td>
|
|
<div class="num-title">未婚女</div>
|
|
<div class="blue">{$unmarried_woman_num}</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
|
|
<td>
|
|
<div class="num-title">残疾人数</div>
|
|
<div class="blue">{$whether_disabled_num}</div>
|
|
</td>
|
|
<td>
|
|
<div class="num-title">参保人数</div>
|
|
<div class="blue">{$insurance_type_num}</div>
|
|
</td>
|
|
<td>
|
|
<div class="num-title">少数名族人数</div>
|
|
<div class="blue">{$nation_s_num}</div>
|
|
</td>
|
|
<td>
|
|
<div class="num-title">汉族人数</div>
|
|
<div class="blue">{$nation_h_num}</div>
|
|
</td>
|
|
<td>
|
|
<div class="num-title">工作人员数</div>
|
|
<div class="blue">{$work_num}</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="layui-card dashboard-num">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<div class="num-title">土地总面积</div>
|
|
<div class="blue">{$land_area_num}</div>
|
|
</td>
|
|
<td>
|
|
<div class="num-title">荒地</div>
|
|
<div class="blue">{$waste_land_area}</div>
|
|
</td>
|
|
<td>
|
|
<div class="num-title">农田水利</div>
|
|
<div class="blue">{$sum_218}</div>
|
|
</td>
|
|
<td>
|
|
<div class="num-title">坑塘</div>
|
|
<div class="blue">{$sum_217}</div>
|
|
</td>
|
|
<td>
|
|
<div class="num-title">养殖</div>
|
|
<div class="blue">{$sum_216}</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="num-title">牧草地</div>
|
|
<div class="blue">{$sum_215}</div>
|
|
</td>
|
|
<td>
|
|
<div class="num-title">林地</div>
|
|
<div class="blue">{$sum_214}</div>
|
|
</td>
|
|
<td>
|
|
<div class="num-title">耕地</div>
|
|
<div class="blue">{$sum_70}</div>
|
|
</td>
|
|
<td>
|
|
<div class="num-title">园地</div>
|
|
<div class="blue">{$sum_69}</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-3">
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-xs6 layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">支付金额<span class="layui-badge layui-badge-blue pull-right" style="background-color:#6394f9">今日</span></div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-sales" id="pay1">0</div>
|
|
<div class="layui-sales-info" style="height: 125px;">
|
|
周同比 <span id="pay2">0%</span>
|
|
|
|
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 66px;"></fieldset>
|
|
<div>昨日数据 <span id="pay3">0</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs6 layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">支付人数<span class="layui-badge layui-badge-blue pull-right" style="background-color:#6394f9">今日</span></div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-sales" id="pay4">0</div>
|
|
<div class="layui-sales-info" style="height: 125px;">
|
|
周环比 <span id="pay5">0%</span>
|
|
|
|
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 66px;"></fieldset>
|
|
<div>昨日数据 <span id="pay6">0</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs6 layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">访客<span class="layui-badge layui-badge-green pull-right" style="background-color:#6394f9">今日</span></div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-sales" id="pay7">0</div>
|
|
<div class="layui-sales-info" >
|
|
周环比 <span id="pay8">0%</span>
|
|
|
|
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 66px;"></fieldset>
|
|
<div>昨日数据 <span id="pay9">0</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-xs6 layui-col-md3">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">关注店铺 <span class="layui-badge pull-right" style="background-color:#6394f9">今日</span></div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-sales" id="pay10">0</div>
|
|
<div class="layui-sales-info" >
|
|
周环比 <span id="pay11">0%</span>
|
|
|
|
<fieldset class="layui-elem-field layui-field-title" style="position: relative;margin-top: 66px;"></fieldset>
|
|
<div>昨日数据 <span id="pay12">0</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-row">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header" style="position: relative">
|
|
<div style="font-size: 28;font-weight: 700;line-height: 36px;">
|
|
支付订单
|
|
</div>
|
|
<div class="select_time" id="select_time1">
|
|
<span data-type="lately7">近七天</span>
|
|
<span class="active" data-type="lately30">近30天</span>
|
|
<span data-type="month">本月</span>
|
|
<span data-type="year">本年</span>
|
|
</div>
|
|
</div>
|
|
<div class="layui-card-body">
|
|
<div id="main" style="height: 350px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-col-xs6 layui-col-md8">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header" style="font-size: 28;font-weight: 700;line-height: 36px;">成交用户</div>
|
|
<div class="select_time" id="select_time2">
|
|
<span data-type="lately7">近七天</span>
|
|
<span class="active" data-type="lately30">近30天</span>
|
|
<span data-type="month">本月</span>
|
|
<span data-type="year">本年</span>
|
|
</div>
|
|
<div class="layui-card">
|
|
<div id="chartView2" style="width: 100%;height:500px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-col-xs6 layui-col-md4">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header" style="font-size: 28;font-weight: 700;line-height: 36px;">用户统计</div>
|
|
<div class="select_time" id="select_time3">
|
|
<span data-type="lately7">近七天</span>
|
|
<span class="active" data-type="lately30">近30天</span>
|
|
<span data-type="month">本月</span>
|
|
<span data-type="year">本年</span>
|
|
</div>
|
|
<div data-v-5dd143d3="" class="pieChart-switch el-row">
|
|
<div class="bts" id="btsspan">
|
|
<span class="active" data-type="money">金额</span>
|
|
<span data-type="user">客户数</span>
|
|
</div>
|
|
</div>
|
|
<div class="layui-card">
|
|
<div id="chartView3" style="width: 100%;height:500px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="p-3">
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-xs6 layui-col-md4">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header" style="font-size: 28;font-weight: 700;line-height: 36px;">商品支付排行</div>
|
|
<div class="select_time" id="select_time4">
|
|
<span data-type="lately7">近七天</span>
|
|
<span data-type="lately30">近30天</span>
|
|
<span data-type="month">本月</span>
|
|
<span class="active" data-type="year">本年</span>
|
|
</div>
|
|
<div class="layui-card">
|
|
<table class="layui-hide" id="goods1" lay-filter="admin"></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-col-xs6 layui-col-md4">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header" style="font-size: 28;font-weight: 700;line-height: 36px;">商品访客排行</div>
|
|
<div class="select_time" id="select_time5">
|
|
<span data-type="lately7">近七天</span>
|
|
<span data-type="lately30">近30天</span>
|
|
<span data-type="month">本月</span>
|
|
<span class="active" data-type="year">本年</span>
|
|
</div>
|
|
<div class="layui-card">
|
|
<table class="layui-hide" id="goods2" lay-filter="admin"></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="layui-col-xs6 layui-col-md4">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header" style="font-size: 28;font-weight: 700;line-height: 36px;">商品加购排行</div>
|
|
<div class="select_time" id="select_time6">
|
|
<span data-type="lately7">近七天</span>
|
|
<span data-type="lately30">近30天</span>
|
|
<span data-type="month">本月</span>
|
|
<span class="active" data-type="year">本年</span>
|
|
</div>
|
|
<div class="layui-card">
|
|
<table class="layui-hide" id="goods3" lay-filter="admin"></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{/block}
|
|
<!-- /主体 -->
|
|
|
|
<!-- 脚本 -->
|
|
{block name="script"}
|
|
<script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
|
|
<script src="{__GOUGU__}/third_party/echart/china.js"></script>
|
|
<script src="/static/assets/js/jquery.min.js"></script>
|
|
<script>
|
|
const moduleInit = ['tool','admin'];
|
|
function gouguInit() {
|
|
var table = layui.table, tool = layui.tool, form = layui.form;
|
|
// 年月日的切换
|
|
var that = this
|
|
$("#select_time1").on("click", "span", function() {
|
|
// 此时要注意这个索引号的问题
|
|
index = $(this).index() - 1;
|
|
// 点击当前a 高亮显示 调用active
|
|
$(this)
|
|
.addClass("active")
|
|
.siblings("span")
|
|
.removeClass("active");
|
|
get_order(this.dataset.type);
|
|
|
|
});
|
|
$("#select_time2").on("click", "span", function() {
|
|
// 此时要注意这个索引号的问题
|
|
index = $(this).index() - 1;
|
|
// 点击当前a 高亮显示 调用active
|
|
$(this)
|
|
.addClass("active")
|
|
.siblings("span")
|
|
.removeClass("active");
|
|
get_view_data(this.dataset.type);
|
|
|
|
});
|
|
$("#select_time3").on("click", "span", function() {
|
|
// 此时要注意这个索引号的问题
|
|
index = $(this).index() - 1;
|
|
// 点击当前a 高亮显示 调用active
|
|
$(this)
|
|
.addClass("active")
|
|
.siblings("span")
|
|
.removeClass("active");
|
|
var type = $('#btsspan').children('.active').attr('data-type');
|
|
get_view_data2(this.dataset.type,type);
|
|
|
|
});
|
|
$("#btsspan").on("click", "span", function() {
|
|
// 此时要注意这个索引号的问题
|
|
index = $(this).index() - 1;
|
|
// 点击当前a 高亮显示 调用active
|
|
$(this)
|
|
.addClass("active")
|
|
.siblings("span")
|
|
.removeClass("active");
|
|
var date = $('#select_time3').children('.active').attr('data-type');
|
|
var type = this.dataset.type;
|
|
get_view_data2(date,type);
|
|
});
|
|
|
|
$("#select_time4").on("click", "span", function() {
|
|
// 此时要注意这个索引号的问题
|
|
index = $(this).index() - 1;
|
|
// 点击当前a 高亮显示 调用active
|
|
$(this)
|
|
.addClass("active")
|
|
.siblings("span")
|
|
.removeClass("active");
|
|
get_goods1(table,this.dataset.type);
|
|
|
|
});
|
|
|
|
$("#select_time5").on("click", "span", function() {
|
|
// 此时要注意这个索引号的问题
|
|
index = $(this).index() - 1;
|
|
// 点击当前a 高亮显示 调用active
|
|
$(this)
|
|
.addClass("active")
|
|
.siblings("span")
|
|
.removeClass("active");
|
|
get_goods2(table,this.dataset.type);
|
|
|
|
});
|
|
|
|
$("#select_time6").on("click", "span", function() {
|
|
// 此时要注意这个索引号的问题
|
|
index = $(this).index() - 1;
|
|
// 点击当前a 高亮显示 调用active
|
|
$(this)
|
|
.addClass("active")
|
|
.siblings("span")
|
|
.removeClass("active");
|
|
get_goods3(table,this.dataset.type);
|
|
|
|
});
|
|
|
|
get_main();
|
|
get_order('lately30');
|
|
get_view_data('lately30');
|
|
get_view_data2('lately30','money');
|
|
get_goods1(table,'year');
|
|
get_goods2(table,'year');
|
|
get_goods3(table,'year');
|
|
}
|
|
|
|
function get_main() {
|
|
$.ajax({
|
|
url: "/admin/api/main",
|
|
type: 'get',
|
|
data: {},
|
|
success: function (e) {
|
|
if (e.code == 0) {
|
|
$('#pay1').html(e.data.today.payPrice);
|
|
$('#pay2').html(e.data.lastWeekRate.payPrice);
|
|
$('#pay3').html(e.data.yesterday.payPrice);
|
|
$('#pay4').html(e.data.today.payUser);
|
|
$('#pay5').html(e.data.lastWeekRate.payUser);
|
|
$('#pay6').html(e.data.yesterday.payUser);
|
|
$('#pay7').html(e.data.today.visitNum);
|
|
$('#pay8').html(e.data.lastWeekRate.visitNum);
|
|
$('#pay9').html(e.data.yesterday.visitNum);
|
|
$('#pay10').html(e.data.today.visitUserNum);
|
|
$('#pay11').html(e.data.lastWeekRate.visitUserNum);
|
|
$('#pay12').html(e.data.yesterday.visitUserNum);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
function get_order(date) {
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|
$.ajax({
|
|
url: "/admin/api/order?date="+date,
|
|
type: 'get',
|
|
data: {},
|
|
success: function (e) {
|
|
if (e.code == 0) {
|
|
var option;
|
|
|
|
option = {
|
|
title: {
|
|
text: ''
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
left:0,
|
|
data: ['订单数', '支付人数', '支付金额']
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data:e.data.day
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '订单/支付人数',
|
|
axisLine: {
|
|
symbol: 'arrow',
|
|
lineStyle: {
|
|
type: 'dashed'
|
|
// ...
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '支付金额',
|
|
axisLine: {
|
|
symbol: 'arrow',
|
|
lineStyle: {
|
|
type: 'dashed'
|
|
// ...
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
],
|
|
series: [
|
|
{
|
|
name: '订单数',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: e.data.total
|
|
},
|
|
{
|
|
name: '支付人数',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: e.data.user
|
|
},
|
|
{
|
|
name: '支付金额',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
data: e.data.pay_price
|
|
},
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
var chartView2 = echarts.init(document.getElementById('chartView2'));
|
|
var chartView3 = echarts.init(document.getElementById('chartView3'));
|
|
function get_view_data(date) {
|
|
$.ajax({
|
|
url: "/admin/api/user?date="+date,
|
|
type: 'get',
|
|
data: {},
|
|
success: function (e) {
|
|
if (e.code == 0) {
|
|
var visitUser = e.data.visitUser; //访客人数
|
|
var payOrderUser = e.data.payOrderUser;//支付人数
|
|
var orderUser = e.data.orderUser;//下单人数
|
|
var payOrderPrice = e.data.payOrderPrice;//支付金额
|
|
var payOrderRate = e.data.payOrderRate;//下单-支付转化率
|
|
var userRate = e.data.userRate;//客单价
|
|
var orderRate = e.data.orderRate;//访客-下单转化率
|
|
var orderPrice = e.data.orderPrice;//下单金额
|
|
var colors = ['#5b8ff9', '#5ad8a6', '#5d7092'];
|
|
// { value: payOrderUser, name: '支付' },
|
|
// { value: orderUser, name: '下单' },
|
|
// { value: visitUser, name: '访问' }
|
|
var lineargroup = [
|
|
{
|
|
value: 60,
|
|
name: '访客人数',
|
|
number: visitUser,
|
|
oriname: '访客',
|
|
color: ['#eff4fe'],
|
|
text1: '',
|
|
value1: '',
|
|
text2: '',
|
|
value2: '',
|
|
},
|
|
{
|
|
value: 40,
|
|
name: '下单人数',
|
|
number: orderUser,
|
|
oriname: '下单',
|
|
color: ['#effbf6'],
|
|
text1: '下单金额',
|
|
value1: orderPrice,
|
|
text2: '',
|
|
value2: '',
|
|
},
|
|
{
|
|
value: 20,
|
|
name: '支付人数',
|
|
number: payOrderUser,
|
|
oriname: '支付',
|
|
color: ['#eff4fe'],
|
|
text1: '支付金额',
|
|
value1: payOrderPrice,
|
|
text2: '客单价',
|
|
value2: userRate,
|
|
},
|
|
];
|
|
var data1 = [];
|
|
var data2 = [];
|
|
for (var i = 0; i < lineargroup.length; i++) {
|
|
var obj1 = {
|
|
value: lineargroup[i].value,
|
|
num: lineargroup[i].number,
|
|
name: lineargroup[i].oriname,
|
|
|
|
};
|
|
var obj2 = {
|
|
value: lineargroup[i].value,
|
|
name: lineargroup[i].name,
|
|
data: lineargroup[i],
|
|
itemStyle: {
|
|
normal: {
|
|
color: lineargroup[i].color[0],
|
|
borderWidth: 0,
|
|
opacity: 1,
|
|
},
|
|
},
|
|
};
|
|
data1.push(obj1);
|
|
data2.push(obj2);
|
|
}
|
|
var option = {
|
|
backgroundColor: '#ffffff',
|
|
color: colors,
|
|
// tooltip: {
|
|
// trigger: 'item',
|
|
// formatter: '{b}-下单转换率: {c}%',
|
|
// },
|
|
xAxis: [
|
|
{
|
|
show: false,
|
|
inverse: true,
|
|
position: 'top',
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
position: 'left',
|
|
top: '120',
|
|
show: false,
|
|
boundaryGap: false,
|
|
inverse: true,
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
top: 0,
|
|
type: 'funnel',
|
|
height: '400',
|
|
gap: 10,
|
|
minSize: 150,
|
|
left: '30%',
|
|
width: '60%',
|
|
z: 3,
|
|
markLine :{
|
|
symbol:'none',
|
|
data:[
|
|
[
|
|
{ x: '83%', y: '27%' },
|
|
{
|
|
x: '85%',
|
|
y: '27%',
|
|
value: '访客-下单转化率：'+orderRate*100+'%',
|
|
lineStyle: { color: '#333' },
|
|
},
|
|
],
|
|
[
|
|
{ x: '76%', y: '55%' },
|
|
{
|
|
x: '80%',
|
|
y: '55%',
|
|
value: '下单-支付转化率：'+payOrderRate*100+'%',
|
|
lineStyle: { color: '#333' },
|
|
},
|
|
],
|
|
]
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'inside',
|
|
fontSize: '14',
|
|
formatter: function (d) {
|
|
var ins = d.name;
|
|
return ins;
|
|
},
|
|
rich: {
|
|
aa: {
|
|
padding: [8, 0, 6, 0],
|
|
},
|
|
},
|
|
},
|
|
|
|
data: data1,
|
|
},
|
|
{
|
|
top: 0,
|
|
type: 'funnel',
|
|
height: '400',
|
|
gap: 10,
|
|
minSize: 400,
|
|
left: '12%',
|
|
width: '55%',
|
|
z: 2,
|
|
label: {
|
|
normal: {
|
|
color: '#333',
|
|
position: 'insideLeft',
|
|
padding: [11, 25],
|
|
formatter: function (d) {
|
|
let ins =
|
|
'{aa|}' +
|
|
d.name +
|
|
'{aa|}' +
|
|
d.data.data.text1 +
|
|
'{aa|}' +
|
|
d.data.data.text2 +
|
|
'\n{bb|}' +
|
|
d.data.data.number +
|
|
'{bb|}' +
|
|
d.data.data.value1 +
|
|
'{bb|}' +
|
|
d.data.data.value2 +
|
|
'';
|
|
return ins;
|
|
},
|
|
rich: {
|
|
aa: {
|
|
align: 'right',
|
|
color: '#666',
|
|
fontSize: '12',
|
|
lineHeight: '30',
|
|
padding: [0, 20, 0, 0],
|
|
},
|
|
bb: {
|
|
align: 'right',
|
|
color: '#333',
|
|
fontSize: '12',
|
|
padding: [0, 25, 0, 0],
|
|
},
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
data: data2,
|
|
},
|
|
],
|
|
};
|
|
|
|
chartView2.setOption(option);
|
|
|
|
setTimeout(function () {
|
|
window.onresize = function () {
|
|
chartView.resize();
|
|
myChart.resize();
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
|
|
function get_view_data2(date,type) {
|
|
$.ajax({
|
|
url: "/admin/api/userRate?date="+date,
|
|
type: 'post',
|
|
data: {},
|
|
success: function (e) {
|
|
if (e.code == 0) {
|
|
if(type == 'user'){
|
|
var newUser = e.data.newUser;
|
|
var oldUser = e.data.oldUser;
|
|
var title = '客户数';
|
|
}else{
|
|
var newUser = e.data.newTotalPrice;
|
|
var oldUser = e.data.oldTotalPrice;
|
|
var title = '金额';
|
|
}
|
|
var newTotalPrice = e.data.newTotalPrice;
|
|
var oldTotalPrice = e.data.oldTotalPrice;
|
|
var totalPrice = e.data.totalPrice;
|
|
var user = e.data.user;
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
top: '5%',
|
|
x: 'left',
|
|
y:'bottom',
|
|
},
|
|
series: [
|
|
{
|
|
name: title,
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
color:['#5b8ff9','#FFBF26'],
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: 40,
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{ value: newUser, name: '新用户'},
|
|
{ value: oldUser, name: '老用户'},
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
chartView3.setOption(option);
|
|
|
|
setTimeout(function () {
|
|
window.onresize = function () {
|
|
chartView.resize();
|
|
myChart.resize();
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
function get_goods1(table,date){
|
|
layui.pageTable = table.render({
|
|
elem: '#goods1',
|
|
title: '列表',
|
|
toolbar: '#toolbarDemo',
|
|
defaultToolbar: [],// 去掉“筛选列”，“导出”，“打印”，
|
|
url: '/admin/api/product?date='+date, //数据接口
|
|
page: false, //开启分页
|
|
limit: 10,
|
|
cols: [
|
|
[
|
|
{
|
|
title: '排名',
|
|
align: 'center',
|
|
templet: function (d) {
|
|
return d.LAY_TABLE_INDEX+1;
|
|
}
|
|
},{
|
|
field: 'store_name',
|
|
title: '名称',
|
|
templet: function (d) {
|
|
var html = '<div><img src="'+d.image+'" style="width:30px; height:30px;"> '+d.store_name+'</div>';
|
|
return html;
|
|
}
|
|
}, {
|
|
field: 'total',
|
|
title: '支付数',
|
|
align: 'center',
|
|
}
|
|
]
|
|
]
|
|
});
|
|
}
|
|
function get_goods2(table,date){
|
|
layui.pageTable = table.render({
|
|
elem: '#goods2',
|
|
title: '列表',
|
|
toolbar: '#toolbarDemo',
|
|
defaultToolbar: [],// 去掉“筛选列”，“导出”，“打印”，
|
|
url: '/admin/api/productVisit?date='+date, //数据接口
|
|
page: false, //开启分页
|
|
limit: 10,
|
|
cols: [
|
|
[
|
|
{
|
|
title: '排名',
|
|
align: 'center',
|
|
templet: function (d) {
|
|
return d.LAY_TABLE_INDEX+1;
|
|
}
|
|
},{
|
|
field: 'store_name',
|
|
title: '名称',
|
|
templet: function (d) {
|
|
var html = '<div><img src="'+d.image+'" style="width:30px; height:30px;"> '+d.store_name+'</div>';
|
|
return html;
|
|
}
|
|
|
|
}, {
|
|
field: 'total',
|
|
title: '支付数',
|
|
align: 'center',
|
|
}
|
|
]
|
|
]
|
|
});
|
|
}
|
|
|
|
function get_goods3(table,date){
|
|
layui.pageTable = table.render({
|
|
elem: '#goods3',
|
|
title: '列表',
|
|
toolbar: '#toolbarDemo',
|
|
defaultToolbar: [],// 去掉“筛选列”，“导出”，“打印”，
|
|
url: '/admin/api/productCart?date='+date, //数据接口
|
|
page: false, //开启分页
|
|
limit: 10,
|
|
cols: [
|
|
[
|
|
{
|
|
title: '排名',
|
|
align: 'center',
|
|
templet: function (d) {
|
|
return d.LAY_TABLE_INDEX+1;
|
|
}
|
|
},{
|
|
field: 'store_name',
|
|
title: '名称',
|
|
templet: function (d) {
|
|
var html = '<div><img src="'+d.image+'" style="width:30px; height:30px;"> '+d.store_name+'</div>';
|
|
return html;
|
|
}
|
|
}, {
|
|
field: 'total',
|
|
title: '支付数',
|
|
align: 'center',
|
|
}
|
|
]
|
|
]
|
|
});
|
|
}
|
|
|
|
</script>
|
|
{/block}
|
|
<!-- /脚本 --> |