<!DOCTYPE html>
|
<html class="x-admin-sm">
|
<head>
|
<meta charset="UTF-8">
|
<title>欢迎页面-X-admin2.2</title>
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
|
<link rel="stylesheet" href="./css/font.css">
|
<link rel="stylesheet" href="./css/xadmin.css">
|
<script src="./lib/layui/layui.js" charset="utf-8"></script>
|
<script type="text/javascript" src="./js/xadmin.js"></script>
|
<!--[if lt IE 9]>
|
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
|
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
|
<![endif]-->
|
</head>
|
<body>
|
<div class="layui-fluid">
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-sm12 layui-col-md6">
|
<div class="layui-card">
|
<div class="layui-card-header">最新一周新增用户</div>
|
<div class="layui-card-body" style="min-height: 280px;">
|
<div id="main1" class="layui-col-sm12" style="height: 300px;"></div>
|
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md6">
|
<div class="layui-card">
|
<div class="layui-card-header">最新一周PV/UV量</div>
|
<div class="layui-card-body" style="min-height: 280px;">
|
<div id="main2" class="layui-col-sm12" style="height: 300px;"></div>
|
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md6">
|
<div class="layui-card">
|
<div class="layui-card-header">用户来源</div>
|
<div class="layui-card-body" style="min-height: 280px;">
|
<div id="main3" class="layui-col-sm12" style="height: 300px;"></div>
|
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md6">
|
<div class="layui-card">
|
<div class="layui-card-header">硬盘使用量</div>
|
<div class="layui-card-body" style="min-height: 280px;">
|
<div id="main4" class="layui-col-sm12" style="height: 300px;"></div>
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
|
<script type="text/javascript">
|
// 基于准备好的dom，初始化echarts实例
|
var myChart = echarts.init(document.getElementById('main1'));
|
|
// 指定图表的配置项和数据
|
var option = {
|
grid: {
|
top: '5%',
|
right: '1%',
|
left: '1%',
|
bottom: '10%',
|
containLabel: true
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
xAxis: {
|
type: 'category',
|
data: ['周一','周二','周三','周四','周五','周六','周日']
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [{
|
name:'用户量',
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
type: 'line',
|
smooth: true
|
}]
|
};
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.setOption(option);
|
|
// 基于准备好的dom，初始化echarts实例
|
var myChart = echarts.init(document.getElementById('main2'));
|
|
// 指定图表的配置项和数据
|
var option = {
|
tooltip : {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'cross',
|
label: {
|
backgroundColor: '#6a7985'
|
}
|
}
|
},
|
grid: {
|
top: '5%',
|
right: '2%',
|
left: '1%',
|
bottom: '10%',
|
containLabel: true
|
},
|
xAxis : [
|
{
|
type : 'category',
|
boundaryGap : false,
|
data : ['周一','周二','周三','周四','周五','周六','周日']
|
}
|
],
|
yAxis : [
|
{
|
type : 'value'
|
}
|
],
|
series : [
|
{
|
name:'PV',
|
type:'line',
|
areaStyle: {normal: {}},
|
data:[120, 132, 101, 134, 90, 230, 210],
|
smooth: true
|
},
|
{
|
name:'UV',
|
type:'line',
|
areaStyle: {normal: {}},
|
data:[45, 182, 191, 234, 290, 330, 310],
|
smooth: true,
|
|
}
|
]
|
};
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.setOption(option);
|
|
|
// 基于准备好的dom，初始化echarts实例
|
var myChart = echarts.init(document.getElementById('main3'));
|
|
// 指定图表的配置项和数据
|
var option = {
|
tooltip : {
|
trigger: 'item',
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
},
|
legend: {
|
orient: 'vertical',
|
left: 'left',
|
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
|
},
|
series : [
|
{
|
name: '访问来源',
|
type: 'pie',
|
radius : '55%',
|
center: ['50%', '60%'],
|
data:[
|
{value:335, name:'直接访问'},
|
{value:310, name:'邮件营销'},
|
{value:234, name:'联盟广告'},
|
{value:135, name:'视频广告'},
|
{value:1548, name:'搜索引擎'}
|
],
|
itemStyle: {
|
emphasis: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
]
|
};
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.setOption(option);
|
|
// 基于准备好的dom，初始化echarts实例
|
var myChart = echarts.init(document.getElementById('main4'));
|
|
// 指定图表的配置项和数据
|
var option = {
|
tooltip : {
|
formatter: "{a} <br/>{b} : {c}%"
|
},
|
series: [
|
{
|
name: '硬盘使用量',
|
type: 'gauge',
|
detail: {formatter:'{value}%'},
|
data: [{value: 88, name: '已使用'}]
|
}
|
]
|
};
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.setOption(option);
|
</script>
|
<script>
|
var _hmt = _hmt || [];
|
(function() {
|
var hm = document.createElement("script");
|
hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
|
var s = document.getElementsByTagName("script")[0];
|
s.parentNode.insertBefore(hm, s);
|
})();
|
</script>
|
</body>
|
</html>
|
