219 lines
7.6 KiB
HTML
219 lines
7.6 KiB
HTML
<!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="/x_admin/css/font.css">
|
||
<link rel="stylesheet" href="/x_admin/css/xadmin.css">
|
||
<script src="/x_admin/lib/layui/layui.js" charset="utf-8"></script>
|
||
<script type="text/javascript" src="/x_admin/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>
|
||
</body>
|
||
</html> |