613 Unstar Star 2.4K Fork 745

大牛学院 / X-adminHTML

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
Clone or download
welcome1.html 7.86 KB
Copy Edit Web IDE Raw Blame History
zhibinm authored 2019-04-15 11:55 . 修改 ie浏览器的支持
<!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>

Comment ( 0 )

Sign in for post a comment

HTML
1
https://gitee.com/daniuit/X-admin.git
git@gitee.com:daniuit/X-admin.git
daniuit
X-admin
X-admin
master

Search

131423 f1aaba0b 1899542 094922 1c74bed3 1899542