<!DOCTYPE html>
|
<html>
|
|
<head>
|
<title>首页</title>
|
<meta charset="utf-8"/>
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<script type="text/javascript" src="../assets/libs/echarts.min.js"></script>
|
<style>
|
.layui-card-header {
|
text-align:left;
|
}
|
.layuiadmin-badge {
|
float:right;
|
margin-top:12px;
|
}
|
.big-font {
|
text-align:left;
|
font-size: 250%;
|
height: 30px;
|
}
|
</style>
|
</head>
|
<body>
|
|
<div class="layui-card-body" style="text-align: center;">
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm2 layui-col-md2">
|
<div class="layui-card">
|
<div class="layui-card-header">在线人数
|
<span class="layui-badge layui-bg-cyan layuiadmin-badge">时</span>
|
</div>
|
<div class="layui-card-body layuiadmin-card-list">
|
<p class="big-font" id="userCnt"></p>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-sm2 layui-col-md2">
|
<div class="layui-card">
|
<div class="layui-card-header">PV
|
<span class="layui-badge layui-bg-green layuiadmin-badge">天</span>
|
</div>
|
<div class="layui-card-body layuiadmin-card-list">
|
<p class="big-font" id="pv"></p>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-sm2 layui-col-md2">
|
<div class="layui-card">
|
<div class="layui-card-header">UV
|
<span class="layui-badge layui-bg-green layuiadmin-badge">天</span>
|
</div>
|
<div class="layui-card-body layuiadmin-card-list">
|
<p class="big-font" id="uv"></p>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-sm3 layui-col-md3">
|
<div class="layui-card">
|
<div class="layui-card-header">周访问量
|
<span class="layui-badge layui-bg-blue layuiadmin-badge">周</span>
|
</div>
|
<div class="layui-card-body layuiadmin-card-list">
|
<p class="big-font" id="weekPv"></p>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-sm3 layui-col-md3">
|
<div class="layui-card">
|
<div class="layui-card-header">月访问量
|
<span class="layui-badge layui-bg-orange layuiadmin-badge">月</span>
|
</div>
|
<div class="layui-card-body layuiadmin-card-list">
|
<p class="big-font" id="monthPv"></p>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-lg12 layui-col-md12">
|
<div class="layui-card">
|
<div class="card-block">
|
<div id="week-container" style="height:350px"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-lg6 layui-col-md6">
|
<div class="layui-card">
|
<div class="card-block">
|
<div id="browser-container" style="height:300px"></div>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-lg6 layui-col-lg6">
|
<div class="layui-card">
|
<div class="card-block">
|
<div id="operatingSystem-container" style="height:300px"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<script type="text/javascript">
|
layui.use(['admin'], function () {
|
let admin = layui.admin;
|
|
let browserChart = echarts.init(document.getElementById("browser-container"));
|
browserChart.setOption({
|
title : {
|
text: '浏览器分布',
|
subtext: '',
|
x:'center'
|
},
|
tooltip : {
|
trigger: 'item',
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
},
|
legend: {},
|
series : []
|
});
|
browserChart.showLoading();
|
|
let osChart = echarts.init(document.getElementById("operatingSystem-container"));
|
osChart.setOption({
|
title : {
|
text: '系统分布',
|
subtext: '',
|
x:'center'
|
},
|
tooltip : {
|
trigger: 'item',
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
},
|
legend: {},
|
series : []
|
});
|
osChart.showLoading();
|
|
let weekChart = echarts.init(document.getElementById("week-container"));
|
weekChart.setOption({
|
title: {
|
text: '流量趋势'
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'cross',
|
label: {
|
backgroundColor: '#6a7985'
|
}
|
}
|
},
|
legend: {
|
data: ['访问量(PV)', '独立用户(UV)']
|
},
|
xAxis: [
|
{
|
type: 'category',
|
boundaryGap: false,
|
data: []
|
}
|
],
|
yAxis: [
|
{
|
type: 'value'
|
}
|
],
|
series: []
|
});
|
weekChart.showLoading();
|
|
admin.req('api-log/requestStat', {}, function (data) {
|
$('#pv').html(data.currDate_pv);
|
$('#uv').html(data.currDate_uv);
|
$('#weekPv').html(data.currWeek_pv);
|
$('#monthPv').html(data.currMonth_pv);
|
$('#userCnt').html(data.currHour_uv);
|
|
browserChart.hideLoading()
|
browserChart.setOption({
|
legend: {
|
orient: 'vertical',
|
left: 'left',
|
data: data.browser_legendData
|
},
|
series : [
|
{
|
name: '浏览器',
|
type: 'pie',
|
radius : '55%',
|
center: ['50%', '60%'],
|
data: data.browser_datas,
|
itemStyle: {
|
emphasis: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
]
|
});
|
|
osChart.hideLoading()
|
osChart.setOption({
|
legend: {
|
orient: 'vertical',
|
left: 'left',
|
data: data.operatingSystem_legendData
|
},
|
series : [
|
{
|
name: '操作系统',
|
type: 'pie',
|
radius : '55%',
|
center: ['50%', '60%'],
|
data: data.operatingSystem_datas,
|
itemStyle: {
|
emphasis: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
]
|
});
|
|
weekChart.hideLoading()
|
weekChart.setOption({
|
xAxis: [
|
{
|
type: 'category',
|
boundaryGap: false,
|
data: data.statWeek_items
|
}
|
],
|
series: [
|
{
|
name: '访问量(PV)',
|
type: 'line',
|
areaStyle: {},
|
label: {
|
normal: {
|
show: true,
|
position: 'top'
|
}
|
},
|
data: data.statWeek_pv
|
},
|
{
|
name: '独立用户(UV)',
|
type: 'line',
|
areaStyle: {},
|
data: data.statWeek_uv
|
}
|
]
|
});
|
}, 'GET');
|
});
|
</script>
|
</body>
|
</html>
|
