276 lines
9.6 KiB
HTML
276 lines
9.6 KiB
HTML
{extend name="base"/}
|
||
{block name="resources"}
|
||
<style>
|
||
.ns-member-block{display: flex;justify-content: space-between;}
|
||
.ns-member-block .layui-card{box-shadow: initial;margin-bottom: 0;width: calc((100% - 30px) / 3);margin-right: 9px;height: 180px;box-sizing: border-box;}
|
||
.ns-member-block .layui-card:last-child{margin-right: 0}
|
||
.ns-member-num{color: red;font-size: 24px;line-height: 50px;}
|
||
.ns-member-title{color: #666666;font-size: 16px;}
|
||
.layui-card-body{width: 100%;height: 100%;box-sizing: border-box;padding-left: 20px;display: flex;justify-content: space-between;align-items: center;}
|
||
.ns-card-member{align-items: flex-start; background-color:#f8f8f8}
|
||
#china_echart{width: 600px;height: 600px;flex-shrink: 0;margin: 0 50px}
|
||
.ns-member-table{flex: 1;padding: 10px 15px;background: #fff;}
|
||
.layui-table-view .layui-table thead tr{background-color: #F5F5F5;}
|
||
.ns-split{width: 30px;}
|
||
.ns-member-block .layui-card{border: 1px solid #f1f1f1}
|
||
.ns-member-table{max-width: 600px;}
|
||
@media screen and (max-width: 1330px){.ns-member-block .layui-card:nth-child(3){width: 420px;}
|
||
#china_echart{width: 500px;height: 500px;}}
|
||
.ns-member-block .layui-card:nth-child(1){background:#ffefe5;}
|
||
.ns-member-block .layui-card:nth-child(2){background:#eef2f8;}
|
||
.ns-member-block .layui-card:nth-child(3){background:#f8efef;}
|
||
.ns-member-block .layui-card:nth-child(1) .ns-member-num{color:#FF6200 }
|
||
.ns-member-block .layui-card:nth-child(2) .ns-member-num{color: #3D88FB }
|
||
.ns-member-block .layui-card:nth-child(3) .ns-member-num{color:#FF4042}
|
||
.ns-body-content{background-color: #f8f8f8 !important}
|
||
.layui-card-header{background-color: #f8f8f8}
|
||
</style>
|
||
{/block}
|
||
|
||
{block name="main"}
|
||
<div class="ns-member-block">
|
||
<div class="layui-card">
|
||
<div class="layui-card-body">
|
||
<div class="ns-member">
|
||
<p class="ns-member-title">累计会员数</p>
|
||
<p class="ns-member-num">{$data.total_count}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-card">
|
||
<div class="layui-card-body">
|
||
<div class="ns-member">
|
||
<p class="ns-member-title">今日新增会员数</p>
|
||
<p class="ns-member-num">{$data.newadd_count}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-card">
|
||
<div class="layui-card-body">
|
||
<div class="ns-member">
|
||
<p class="ns-member-title">下单会员数</p>
|
||
<p class="ns-member-num">{$data.buyed_count}</p>
|
||
</div>
|
||
<div id="main" style="width: 250px; height: 160px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-card ns-card-common ns-card-brief">
|
||
<div class="layui-card-header">
|
||
<span class="ns-card-title">会员分布</span>
|
||
</div>
|
||
<div class="layui-card-body ns-card-member">
|
||
<div id="china_echart"></div>
|
||
<div class="ns-split"></div>
|
||
<div class="ns-member-table">
|
||
<table id="member_list" lay-filter="member_list" class="layui-table"></table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/block}
|
||
|
||
{block name="script"}
|
||
<script src="SHOP_JS/echarts.min.js"></script>
|
||
<script src="SHOP_JS/china.js"></script>
|
||
<script>
|
||
layui.use('form', function() {
|
||
var table, form = layui.form;
|
||
form.render();
|
||
|
||
table = new Table({
|
||
elem: '#member_list',
|
||
url: ns.url("member://shop/member/areaCount"),
|
||
where: {
|
||
handle: true
|
||
},
|
||
parseData: function(res) { //res 即为原始返回的数据
|
||
return {
|
||
"code": res.code, //解析接口状态
|
||
"msg": res.message, //解析提示文本
|
||
"count": res.data.list.length, //解析数据长度
|
||
"data": res.data.list //解析数据列表
|
||
};
|
||
},
|
||
page: false,
|
||
cols: [
|
||
[
|
||
{
|
||
field: 'LAY_INDEX',
|
||
title: '排名',
|
||
unresize: 'false',
|
||
width: '20%',
|
||
templet: function (data) {
|
||
return data.LAY_INDEX;
|
||
}
|
||
}, {
|
||
field: 'name',
|
||
title: '地区',
|
||
unresize: 'false',
|
||
width: '30%'
|
||
}, {
|
||
field: 'value',
|
||
title: '会员数',
|
||
unresize: 'false',
|
||
width: '25%'
|
||
}, {
|
||
field: 'ratio',
|
||
title: '会员占比',
|
||
unresize: 'false',
|
||
width: '25%',
|
||
templet: function (data) {
|
||
return data.ratio + '%';
|
||
}
|
||
}
|
||
]
|
||
]
|
||
});
|
||
});
|
||
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
|
||
// 指定图表的配置项和数据
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
left: 0,
|
||
data: ['下单会员数', '未下单会员数']
|
||
},
|
||
color: ['#FF4042', '#FFABAC'],
|
||
series: [{
|
||
width: 120,
|
||
height: 120,
|
||
top: 30,
|
||
left: 130,
|
||
name: '',
|
||
type: 'pie',
|
||
radius: ['50%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: '12',
|
||
color: '#ff8143'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{
|
||
value: {$data.buyed_count},
|
||
name: '下单会员数',
|
||
tooltip: {
|
||
trigger: 'item',
|
||
backgroundColor: 'rgba(255, 255, 255, 0.7)',
|
||
borderColor: '#999',
|
||
borderWidth: 1,
|
||
padding: 10,
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: '#333'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
value: {$data.total_count - $data.buyed_count},
|
||
name: '未下单会员数',
|
||
tooltip: {
|
||
trigger: 'item',
|
||
backgroundColor: 'rgba(255, 255, 255, 0.7)',
|
||
borderColor: '#999',
|
||
borderWidth: 1,
|
||
padding: 10,
|
||
textStyle: {
|
||
color: '#333',
|
||
fontSize: 12
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}]
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
|
||
var china_echart = echarts.init(document.getElementById('china_echart'));
|
||
var china_option = {
|
||
tooltip: {
|
||
formatter: function(params, ticket, callback) {
|
||
return params.seriesName + '<br />' + params.name + '：' + params.value
|
||
}
|
||
},
|
||
visualMap: {
|
||
min: 0,
|
||
max: 1500,
|
||
left: 'left',
|
||
top: 'bottom',
|
||
text: ['高', '低'],
|
||
inRange: {
|
||
color: ['#FFF', '#ff8143']
|
||
},
|
||
show: false
|
||
},
|
||
geo: {
|
||
map: 'china',
|
||
roam: false,
|
||
zoom: 1.23,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
fontSize: '10',
|
||
color: 'rgba(0,0,0,0.7)'
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
borderColor: 'rgba(0, 0, 0, 0.2)'
|
||
},
|
||
emphasis: {
|
||
areaColor: '#e0ffff',
|
||
shadowOffsetX: 0,
|
||
shadowOffsetY: 0,
|
||
shadowBlur: 20,
|
||
borderWidth: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
name: '会员数',
|
||
type: 'map',
|
||
geoIndex: 0,
|
||
data: [{"name":"北京","value":0},{"name":"天津","value":0},{"name":"河北","value":0},{"name":"山西","value":0},{"name":"内蒙古","value":0},{"name":"辽宁","value":0},{"name":"吉林","value":0},{"name":"黑龙江","value":0},{"name":"上海","value":0},{"name":"江苏","value":0},{"name":"浙江","value":0},{"name":"安徽","value":0},{"name":"福建","value":0},{"name":"江西","value":0},{"name":"山东","value":0},{"name":"河南","value":0},{"name":"湖北","value":0},{"name":"湖南","value":0},{"name":"广东","value":0},{"name":"广西","value":0},{"name":"海南","value":0},{"name":"重庆","value":0},{"name":"四川","value":0},{"name":"贵州","value":0},{"name":"云南","value":0},{"name":"西藏","value":0},{"name":"陕西","value":0},{"name":"甘肃","value":0},{"name":"青海","value":0},{"name":"宁夏","value":0},{"name":"新疆","value":0},{"name":"香港","value":0},{"name":"澳门","value":0},{"name":"台湾","value":0}]
|
||
}]
|
||
};
|
||
china_echart.setOption(china_option);
|
||
|
||
function areaCount(){
|
||
$.ajax({
|
||
url: ns.url("member://shop/member/areaCount"),
|
||
dataType: 'JSON',
|
||
type: 'POST',
|
||
success : function(res) {
|
||
if (res.data.list.length > 0) {
|
||
china_option.series[0].data = res.data.list;
|
||
}
|
||
china_echart.setOption(china_option);
|
||
}
|
||
})
|
||
}
|
||
areaCount();
|
||
</script>
|
||
{/block}
|