321 lines
12 KiB
HTML
Executable File
321 lines
12 KiB
HTML
Executable File
{layout name="layout1" /}
|
|
|
|
|
|
<div class="layui-col-md12">
|
|
<div class="layui-fluid">
|
|
|
|
<div class="layui-form" lay-filter="">
|
|
<div class="layui-card" >
|
|
<div class="layui-card-body">
|
|
<div class="layui-input-inline">
|
|
<div class="layui-card-header" >概况</div>
|
|
</div>
|
|
|
|
<div class="layui-input-inline" style="left: 50px">
|
|
<div class="layui-input-inline">
|
|
<select name="day" lay-verify="required" lay-filter="days">
|
|
<option value="today" >今日实时</option>
|
|
<option value="ago_seven" >近7天</option>
|
|
<option value="ago_fifteen" >近15天</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-input-inline " id="days" style="white-space: nowrap;left:70px">
|
|
{$res.start} 至 {$res.end}
|
|
</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="goods_click">{$res.goods_click}</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_click">{$res.user_click}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-card" style="width: 100%;margin-top:20px">
|
|
<div class="layui-card-body">
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-inline layui-card-header" style="">访问趋势分析</div>
|
|
<div class="layui-input-inline" style="right: 100px">
|
|
<select lay-verify="required" lay-filter="goods">
|
|
<option value="ago_seven">近7天</option>
|
|
<option value="ago_fifteen">近15天</option>
|
|
</select>
|
|
</div>
|
|
<div class="layui-input-inline" id="goods_days" style="white-space: nowrap;top:8px;right:80px">
|
|
{$res.start_seven} 至 {$res.end_seven}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<div id="visitCharts" style="width: 100%;height: 80vh;"> </div>
|
|
</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;
|
|
|
|
const color = ["#FFC005", "#00CA69","#0090FF"];
|
|
const hexToRgba = (hex, opacity) => {
|
|
let rgbaColor = "";
|
|
let reg = /^#[\da-f]{6}$/i;
|
|
if (reg.test(hex)) {
|
|
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
|
|
"0x" + hex.slice(3, 5)
|
|
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
|
|
}
|
|
return rgbaColor;
|
|
};
|
|
|
|
like.ajax({
|
|
url: '{:url("statistics/visit")}',
|
|
data: {'goods':'ago_seven'},
|
|
type: "post",
|
|
success: function (res) {
|
|
var xData = res.data.days;
|
|
var pvData = res.data.echarts_goods_click;
|
|
var collectData = res.data.echarts_user_click;
|
|
|
|
var option = setOption(xData, pvData, collectData);
|
|
var visitCharts = echarts.init(document.getElementById('visitCharts'));
|
|
visitCharts.setOption(option, true);
|
|
window.addEventListener('resize', function () {
|
|
visitCharts.resize()
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
form.on('select(goods)', function(data){
|
|
like.ajax({
|
|
url: '{:url("statistics/visit")}',
|
|
data: {'goods':data.value},
|
|
type: "post",
|
|
success: function (res) {
|
|
$('#goods_days').html(res.data.start+ ' 至 ' +res.data.end );
|
|
var xData = res.data.days;
|
|
var pvData = res.data.echarts_goods_click;
|
|
var collectData = res.data.echarts_user_click;
|
|
var saleData = res.data.echarts_goods_sale;
|
|
var option = setOption(xData, pvData, collectData, saleData);
|
|
var visitCharts = echarts.init(document.getElementById('visitCharts'));
|
|
visitCharts.setOption(option, true);
|
|
window.addEventListener('resize', function () {
|
|
visitCharts.resize()
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
|
|
form.on('select(days)', function(data){
|
|
like.ajax({
|
|
url:'{:url("statistics/visit")}',
|
|
data:{'days':data.value},
|
|
type:"post",
|
|
success:function(res)
|
|
{
|
|
$('#days').html(res.data.start+ ' 至 ' +res.data.end );
|
|
$('#goods_click').html(res.data.goods_click);
|
|
$('#user_click').html(res.data.user_click);
|
|
}
|
|
});
|
|
});
|
|
|
|
//图表设置
|
|
function setOption(xData, pvData, collectData) {
|
|
option = {
|
|
backgroundColor: '#fff',
|
|
color: color,
|
|
legend: {
|
|
top: 20,
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
formatter: function(params) {
|
|
let html = '';
|
|
params.forEach(v => {
|
|
html += `<div style="color: #666;font-size: 14px;line-height: 24px">
|
|
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
|
|
${v.seriesName}${v.name}
|
|
<span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px;margin-left:5px">${v.value}</span>
|
|
次`;
|
|
})
|
|
return html
|
|
},
|
|
extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
shadowStyle: {
|
|
color: '#ffffff',
|
|
shadowColor: 'rgba(225,225,225,1)',
|
|
shadowBlur: 5
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
top: 100,
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: "category",
|
|
name: '(日期)',
|
|
boundaryGap: false,
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "#333"
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#D9D9D9"
|
|
}
|
|
},
|
|
data: xData,
|
|
}],
|
|
yAxis: [{
|
|
type: "value",
|
|
name: '(次)',
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "#666"
|
|
}
|
|
},
|
|
nameTextStyle: {
|
|
color: "#666",
|
|
fontSize: 12,
|
|
lineHeight: 40
|
|
},
|
|
// 分割线
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "#E9E9E9"
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
}],
|
|
series: [{
|
|
name: "商品浏览量",
|
|
type: "line",
|
|
smooth: true,
|
|
symbolSize: 8,
|
|
zlevel: 3,
|
|
lineStyle: {
|
|
normal: {
|
|
color: color[0],
|
|
shadowBlur: 3,
|
|
shadowColor: hexToRgba(color[0], 0.5),
|
|
shadowOffsetY: 8
|
|
}
|
|
},
|
|
symbol: 'circle',//数据交叉点样式
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[{
|
|
offset: 0,
|
|
color: hexToRgba(color[0], 0.3)
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: hexToRgba(color[0], 0.1)
|
|
}
|
|
],
|
|
false
|
|
),
|
|
shadowColor: hexToRgba(color[0], 0.1),
|
|
shadowBlur: 10
|
|
}
|
|
},
|
|
data: pvData
|
|
}, {
|
|
name: "用户浏览量",
|
|
type: "line",
|
|
smooth: true,
|
|
symbolSize: 8,
|
|
zlevel: 3,
|
|
lineStyle: {
|
|
normal: {
|
|
color: color[1],
|
|
shadowBlur: 3,
|
|
shadowColor: hexToRgba(color[1], 0.5),
|
|
shadowOffsetY: 8
|
|
}
|
|
},
|
|
symbol: 'circle',
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[{
|
|
offset: 0,
|
|
color: hexToRgba(color[1], 0.3)
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: hexToRgba(color[1], 0.1)
|
|
}
|
|
],
|
|
false
|
|
),
|
|
shadowColor: hexToRgba(color[1], 0.1),
|
|
shadowBlur: 10
|
|
}
|
|
},
|
|
data: collectData
|
|
}]
|
|
};
|
|
return option;
|
|
}
|
|
|
|
});
|
|
|
|
</script> |