parent
bc72f0cf42
commit
0eb7710ecd
@ -1,2 +1,24 @@ |
||||
# admin前端页面 |
||||
|
||||
做到前后端分离。 |
||||
|
||||
--- |
||||
当然也可以不分离,直接把前端页面放入到server中。这样做的好处是启动服务器即可访问页面。 |
||||
|
||||
步骤如下: |
||||
|
||||
- cd到sop-admin-front目录,执行命令`mvn clean install` |
||||
- sop-admin-server工程添加maven依赖 |
||||
|
||||
``` |
||||
<dependency> |
||||
<groupId>com.gitee.sop</groupId> |
||||
<artifactId>sop-admin-front</artifactId> |
||||
<version>1.0.0-SNAPSHOT</version> |
||||
</dependency> |
||||
``` |
||||
|
||||
启动服务端,访问:http://localhost:8082 |
||||
|
||||
原理就是springboot访问webjars资源,建议在开发的时候前后端分离,开发完成后再打包成webjars。 |
||||
|
||||
|
@ -1,147 +0,0 @@ |
||||
<!DOCTYPE html> |
||||
<html class="x-admin-sm"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>欢迎页面-X-admin2.1</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="../assets/css/font.css"> |
||||
<link rel="stylesheet" href="../assets/css/xadmin.css"> |
||||
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> |
||||
<script type="text/javascript" src="../assets/lib/layui/layui.js" charset="utf-8"></script> |
||||
<script type="text/javascript" src="../assets/js/xadmin.js"></script> |
||||
<script type="text/javascript" src="../assets/js/cookie.js"></script> |
||||
<!-- 让IE8/9支持媒体查询,从而兼容栅格 --> |
||||
<!--[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="x-body"> |
||||
<form class="layui-form"> |
||||
<div class="layui-form-item"> |
||||
<label for="username" class="layui-form-label"> |
||||
<span class="x-red">*</span>登录名 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="text" id="username" name="username" required="" lay-verify="required" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
<div class="layui-form-mid layui-word-aux"> |
||||
<span class="x-red">*</span>将会成为您唯一的登入名 |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="phone" class="layui-form-label"> |
||||
<span class="x-red">*</span>手机 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="text" id="phone" name="phone" required="" lay-verify="phone" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
<div class="layui-form-mid layui-word-aux"> |
||||
<span class="x-red">*</span>将会成为您唯一的登入名 |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="L_email" class="layui-form-label"> |
||||
<span class="x-red">*</span>邮箱 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="text" id="L_email" name="email" required="" lay-verify="email" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
<div class="layui-form-mid layui-word-aux"> |
||||
<span class="x-red">*</span> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label class="layui-form-label"><span class="x-red">*</span>角色</label> |
||||
<div class="layui-input-block"> |
||||
<input type="checkbox" name="like1[write]" lay-skin="primary" title="超级管理员" checked=""> |
||||
<input type="checkbox" name="like1[read]" lay-skin="primary" title="编辑人员"> |
||||
<input type="checkbox" name="like1[write]" lay-skin="primary" title="宣传人员" checked=""> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="L_pass" class="layui-form-label"> |
||||
<span class="x-red">*</span>密码 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="password" id="L_pass" name="pass" required="" lay-verify="pass" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
<div class="layui-form-mid layui-word-aux"> |
||||
6到16个字符 |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="L_repass" class="layui-form-label"> |
||||
<span class="x-red">*</span>确认密码 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="password" id="L_repass" name="repass" required="" lay-verify="repass" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="L_repass" class="layui-form-label"> |
||||
</label> |
||||
<button class="layui-btn" lay-filter="add" lay-submit=""> |
||||
增加 |
||||
</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<script> |
||||
layui.use(['form','layer'], function(){ |
||||
$ = layui.jquery; |
||||
var form = layui.form |
||||
,layer = layui.layer; |
||||
|
||||
//自定义验证规则 |
||||
form.verify({ |
||||
nikename: function(value){ |
||||
if(value.length < 5){ |
||||
return '昵称至少得5个字符啊'; |
||||
} |
||||
} |
||||
,pass: [/(.+){6,12}$/, '密码必须6到12位'] |
||||
,repass: function(value){ |
||||
if($('#L_pass').val()!=$('#L_repass').val()){ |
||||
return '两次密码不一致'; |
||||
} |
||||
} |
||||
}); |
||||
|
||||
//监听提交 |
||||
form.on('submit(add)', function(data){ |
||||
console.log(data); |
||||
//发异步,把数据提交给php |
||||
layer.alert("增加成功", {icon: 6},function () { |
||||
// 获得frame索引 |
||||
var index = parent.layer.getFrameIndex(window.name); |
||||
//关闭当前frame |
||||
parent.layer.close(index); |
||||
// 可以对父窗口进行刷新 |
||||
x_admin_father_reload(); |
||||
}); |
||||
return false; |
||||
}); |
||||
|
||||
|
||||
}); |
||||
</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> |
@ -1,145 +0,0 @@ |
||||
<!DOCTYPE html> |
||||
<html class="x-admin-sm"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>欢迎页面-X-admin2.1</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="../assets/css/font.css"> |
||||
<link rel="stylesheet" href="../assets/css/xadmin.css"> |
||||
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> |
||||
<script type="text/javascript" src="../assets/lib/layui/layui.js" charset="utf-8"></script> |
||||
<script type="text/javascript" src="../assets/js/xadmin.js"></script> |
||||
<script type="text/javascript" src="../assets/js/cookie.js"></script> |
||||
<!-- 让IE8/9支持媒体查询,从而兼容栅格 --> |
||||
<!--[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="x-body"> |
||||
<form class="layui-form"> |
||||
<div class="layui-form-item"> |
||||
<label for="username" class="layui-form-label"> |
||||
<span class="x-red">*</span>登录名 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="text" id="username" name="username" required="" lay-verify="required" |
||||
autocomplete="off" value="admin" class="layui-input"> |
||||
</div> |
||||
<div class="layui-form-mid layui-word-aux"> |
||||
<span class="x-red">*</span>将会成为您唯一的登入名 |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="phone" class="layui-form-label"> |
||||
<span class="x-red">*</span>手机 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="text" value="18925139194" id="phone" name="phone" required="" lay-verify="phone" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
<div class="layui-form-mid layui-word-aux"> |
||||
<span class="x-red">*</span>将会成为您唯一的登入名 |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="L_email" class="layui-form-label"> |
||||
<span class="x-red">*</span>邮箱 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="text" value="113664000@qq.com" id="L_email" name="email" required="" lay-verify="email" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
<div class="layui-form-mid layui-word-aux"> |
||||
<span class="x-red">*</span> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label class="layui-form-label"><span class="x-red">*</span>角色</label> |
||||
<div class="layui-input-block"> |
||||
<input type="checkbox" name="like1[write]" lay-skin="primary" title="超级管理员" checked=""> |
||||
<input type="checkbox" name="like1[read]" lay-skin="primary" title="编辑人员"> |
||||
<input type="checkbox" name="like1[write]" lay-skin="primary" title="宣传人员" > |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="L_pass" class="layui-form-label"> |
||||
<span class="x-red">*</span>密码 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="password" id="L_pass" name="pass" required="" lay-verify="pass" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
<div class="layui-form-mid layui-word-aux"> |
||||
6到16个字符 |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="L_repass" class="layui-form-label"> |
||||
<span class="x-red">*</span>确认密码 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="password" id="L_repass" name="repass" required="" lay-verify="repass" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="L_repass" class="layui-form-label"> |
||||
</label> |
||||
<button class="layui-btn" lay-filter="add" lay-submit=""> |
||||
增加 |
||||
</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<script> |
||||
layui.use(['form','layer'], function(){ |
||||
$ = layui.jquery; |
||||
var form = layui.form |
||||
,layer = layui.layer; |
||||
|
||||
//自定义验证规则 |
||||
form.verify({ |
||||
nikename: function(value){ |
||||
if(value.length < 5){ |
||||
return '昵称至少得5个字符啊'; |
||||
} |
||||
} |
||||
,pass: [/(.+){6,12}$/, '密码必须6到12位'] |
||||
,repass: function(value){ |
||||
if($('#L_pass').val()!=$('#L_repass').val()){ |
||||
return '两次密码不一致'; |
||||
} |
||||
} |
||||
}); |
||||
|
||||
//监听提交 |
||||
form.on('submit(add)', function(data){ |
||||
console.log(data); |
||||
//发异步,把数据提交给php |
||||
layer.alert("增加成功", {icon: 6},function () { |
||||
// 获得frame索引 |
||||
var index = parent.layer.getFrameIndex(window.name); |
||||
//关闭当前frame |
||||
parent.layer.close(index); |
||||
}); |
||||
return false; |
||||
}); |
||||
|
||||
|
||||
}); |
||||
</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> |
@ -1,87 +0,0 @@ |
||||
<!DOCTYPE html> |
||||
<html class="x-admin-sm"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>欢迎页面-X-admin2.1</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="../assets/css/font.css"> |
||||
<link rel="stylesheet" href="../assets/css/xadmin.css"> |
||||
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> |
||||
<script type="text/javascript" src="../assets/lib/layui/layui.js" charset="utf-8"></script> |
||||
<script type="text/javascript" src="../assets/js/xadmin.js"></script> |
||||
<script type="text/javascript" src="../assets/js/cookie.js"></script> |
||||
<!-- 让IE8/9支持媒体查询,从而兼容栅格 --> |
||||
<!--[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="x-nav"> |
||||
<span class="layui-breadcrumb"> |
||||
<a href="">首页</a> |
||||
<a href="">演示</a> |
||||
<a> |
||||
<cite>导航元素</cite></a> |
||||
</span> |
||||
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新"> |
||||
<i class="layui-icon" style="line-height:30px">ဂ</i></a> |
||||
</div> |
||||
<div class="x-body"> |
||||
<div class="layui-row"> |
||||
<form class="layui-form layui-col-md12 layui-form-pane"> |
||||
<div class="layui-form-item" id="x-city"> |
||||
<label class="layui-form-label">城市联动</label> |
||||
<div class="layui-input-inline"> |
||||
<select name="province" lay-filter="province"> |
||||
<option value="">请选择省</option> |
||||
</select> |
||||
</div> |
||||
<div class="layui-input-inline"> |
||||
<select name="city" lay-filter="city"> |
||||
<option value="">请选择市</option> |
||||
</select> |
||||
</div> |
||||
<div class="layui-input-inline"> |
||||
<select name="area" lay-filter="area"> |
||||
<option value="">请选择县/区</option> |
||||
</select> |
||||
</div> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<blockquote class="layui-elem-quote"> </blockquote> |
||||
<pre class="layui-code" lay-title="JavaScript" lay-skin="notepad"> |
||||
//xcity城市插件 基于于jquery与layui form 模块,使用之前先确认这两者是否引入 |
||||
//插件文件为 xcity.js,引入 |
||||
select lay-filter 属性值 为必须 "province/city/area" |
||||
//初始化 |
||||
$('#x-city').xcity(); |
||||
//传默认值 |
||||
$('#x-city').xcity('广东','广州市','东山区'); |
||||
</pre> |
||||
</div> |
||||
<script type="text/javascript" src="../assets/js/xcity.js"></script> |
||||
<script> |
||||
layui.use(['form','code'], function(){ |
||||
form = layui.form; |
||||
|
||||
layui.code(); |
||||
|
||||
$('#x-city').xcity('广东','广州市','东山区'); |
||||
|
||||
}); |
||||
</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> |
@ -1,108 +0,0 @@ |
||||
<!doctype html> |
||||
<html class="x-admin-sm"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>后台登录-X-admin2.1</title> |
||||
<meta name="renderer" content="webkit|ie-comp|ie-stand"> |
||||
<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" /> |
||||
<meta http-equiv="Cache-Control" content="no-siteapp" /> |
||||
|
||||
<link rel="stylesheet" href="../assets/css/font.css"> |
||||
<link rel="stylesheet" href="../assets/css/xadmin.css"> |
||||
</head> |
||||
<body> |
||||
<div class="x-body"> |
||||
<blockquote class="layui-elem-quote"> |
||||
特别声明:ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。如需使用,详细了解可以访问官网 <a href="http://echarts.baidu.com/" style="color:red">ECharts</a>。 x-admin不承担任何版权问题。 |
||||
</blockquote> |
||||
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> |
||||
<div id="main" style="width: 100%;height:400px;"></div> |
||||
<blockquote class="layui-elem-quote"> |
||||
注意:本案例的Echarts图表库由cdn引入,需要在线才能正常使用,如想离线,请至Echarts官网下载。 |
||||
</blockquote> |
||||
</div> |
||||
<script src="//cdn.bootcss.com/echarts/3.3.2/echarts.min.js" charset="utf-8"></script> |
||||
<script type="text/javascript"> |
||||
// 基于准备好的dom,初始化echarts实例 |
||||
var myChart = echarts.init(document.getElementById('main')); |
||||
|
||||
// 指定图表的配置项和数据 |
||||
var option = { |
||||
title: { |
||||
text: '折线图堆叠' |
||||
}, |
||||
tooltip: { |
||||
trigger: 'axis' |
||||
}, |
||||
legend: { |
||||
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'] |
||||
}, |
||||
grid: { |
||||
left: '3%', |
||||
right: '4%', |
||||
bottom: '3%', |
||||
containLabel: true |
||||
}, |
||||
toolbox: { |
||||
feature: { |
||||
saveAsImage: {} |
||||
} |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
boundaryGap: false, |
||||
data: ['周一','周二','周三','周四','周五','周六','周日'] |
||||
}, |
||||
yAxis: { |
||||
type: 'value' |
||||
}, |
||||
series: [ |
||||
{ |
||||
name:'邮件营销', |
||||
type:'line', |
||||
stack: '总量', |
||||
data:[120, 132, 101, 134, 90, 230, 210] |
||||
}, |
||||
{ |
||||
name:'联盟广告', |
||||
type:'line', |
||||
stack: '总量', |
||||
data:[220, 182, 191, 234, 290, 330, 310] |
||||
}, |
||||
{ |
||||
name:'视频广告', |
||||
type:'line', |
||||
stack: '总量', |
||||
data:[150, 232, 201, 154, 190, 330, 410] |
||||
}, |
||||
{ |
||||
name:'直接访问', |
||||
type:'line', |
||||
stack: '总量', |
||||
data:[320, 332, 301, 334, 390, 330, 320] |
||||
}, |
||||
{ |
||||
name:'搜索引擎', |
||||
type:'line', |
||||
stack: '总量', |
||||
data:[820, 932, 901, 934, 1290, 1330, 1320] |
||||
} |
||||
] |
||||
}; |
||||
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。 |
||||
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> |
@ -1,106 +0,0 @@ |
||||
<!doctype html> |
||||
<html class="x-admin-sm"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>后台登录-X-admin2.1</title> |
||||
<meta name="renderer" content="webkit|ie-comp|ie-stand"> |
||||
<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" /> |
||||
<meta http-equiv="Cache-Control" content="no-siteapp" /> |
||||
|
||||
<link rel="stylesheet" href="../assets/css/font.css"> |
||||
<link rel="stylesheet" href="../assets/css/xadmin.css"> |
||||
</head> |
||||
<body> |
||||
<div class="x-body"> |
||||
<blockquote class="layui-elem-quote"> |
||||
特别声明:ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。如需使用或者详细更多案例可以访问官网 <a href="http://echarts.baidu.com/" style="color:red">ECharts</a>。 x-admin不承担任何版权问题。 |
||||
</blockquote> |
||||
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> |
||||
<div id="main" style="width: 100%;height:400px;"></div> |
||||
<blockquote class="layui-elem-quote"> |
||||
注意:本案例的Echarts图表库由cdn引入,需要在线才能正常使用,如想离线,请至Echarts官网下载。 |
||||
</blockquote> |
||||
</div> |
||||
<script src="//cdn.bootcss.com/echarts/3.3.2/echarts.min.js" charset="utf-8"></script> |
||||
<script type="text/javascript"> |
||||
// 基于准备好的dom,初始化echarts实例 |
||||
var myChart = echarts.init(document.getElementById('main')); |
||||
|
||||
// 指定图表的配置项和数据 |
||||
var labelRight = { |
||||
normal: { |
||||
position: 'right' |
||||
} |
||||
}; |
||||
option = { |
||||
title: { |
||||
text: '交错正负轴标签', |
||||
subtext: 'From ExcelHome', |
||||
sublink: 'http://e.weibo.com/1341556070/AjwF2AgQm' |
||||
}, |
||||
tooltip : { |
||||
trigger: 'axis', |
||||
axisPointer : { // 坐标轴指示器,坐标轴触发有效 |
||||
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' |
||||
} |
||||
}, |
||||
grid: { |
||||
top: 80, |
||||
bottom: 30 |
||||
}, |
||||
xAxis: { |
||||
type : 'value', |
||||
position: 'top', |
||||
splitLine: {lineStyle:{type:'dashed'}}, |
||||
}, |
||||
yAxis: { |
||||
type : 'category', |
||||
axisLine: {show: false}, |
||||
axisLabel: {show: false}, |
||||
axisTick: {show: false}, |
||||
splitLine: {show: false}, |
||||
data : ['ten', 'nine', 'eight', 'seven', 'six', 'five', 'four', 'three', 'two', 'one'] |
||||
}, |
||||
series : [ |
||||
{ |
||||
name:'生活费', |
||||
type:'bar', |
||||
stack: '总量', |
||||
label: { |
||||
normal: { |
||||
show: true, |
||||
formatter: '{b}' |
||||
} |
||||
}, |
||||
data:[ |
||||
{value: -0.07, label: labelRight}, |
||||
{value: -0.09, label: labelRight}, |
||||
0.2, 0.44, |
||||
{value: -0.23, label: labelRight}, |
||||
0.08, |
||||
{value: -0.17, label: labelRight}, |
||||
0.47, |
||||
{value: -0.36, label: labelRight}, |
||||
0.18 |
||||
] |
||||
} |
||||
] |
||||
}; |
||||
|
||||
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。 |
||||
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> |
@ -1,349 +0,0 @@ |
||||
<!doctype html> |
||||
<html class="x-admin-sm"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>后台登录-X-admin2.1</title> |
||||
<meta name="renderer" content="webkit|ie-comp|ie-stand"> |
||||
<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" /> |
||||
<meta http-equiv="Cache-Control" content="no-siteapp" /> |
||||
|
||||
<link rel="stylesheet" href="../assets/css/font.css"> |
||||
<link rel="stylesheet" href="../assets/css/xadmin.css"> |
||||
</head> |
||||
<body> |
||||
<div class="x-body"> |
||||
<blockquote class="layui-elem-quote"> |
||||
特别声明:ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。如需使用或者详细更多案例可以访问官网 <a href="http://echarts.baidu.com/" style="color:red">ECharts</a>。 x-admin不承担任何版权问题。 |
||||
</blockquote> |
||||
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> |
||||
<div id="main" style="width: 100%;height:400px;"></div> |
||||
<blockquote class="layui-elem-quote"> |
||||
注意:本案例的Echarts图表库由cdn引入,需要在线才能正常使用,如想离线,请至Echarts官网下载。 |
||||
</blockquote> |
||||
</div> |
||||
<script src="//cdn.bootcss.com/echarts/3.3.2/echarts.min.js" charset="utf-8"></script> |
||||
<script src="//cdn.bootcss.com/echarts/3.3.2/extension/bmap.min.js" type="text/javascript"></script> |
||||
<script src="http://echarts.baidu.com/asset/map/js/china.js"></script> |
||||
<script type="text/javascript"> |
||||
// 基于准备好的dom,初始化echarts实例 |
||||
var myChart = echarts.init(document.getElementById('main')); |
||||
myChart.setOption({ |
||||
series: [{ |
||||
type: 'map', |
||||
map: 'china' |
||||
}] |
||||
}); |
||||
|
||||
// 指定图表的配置项和数据 |
||||
var geoCoordMap = { |
||||
'上海': [121.4648,31.2891], |
||||
'东莞': [113.8953,22.901], |
||||
'东营': [118.7073,37.5513], |
||||
'中山': [113.4229,22.478], |
||||
'临汾': [111.4783,36.1615], |
||||
'临沂': [118.3118,35.2936], |
||||
'丹东': [124.541,40.4242], |
||||
'丽水': [119.5642,28.1854], |
||||
'乌鲁木齐': [87.9236,43.5883], |
||||
'佛山': [112.8955,23.1097], |
||||
'保定': [115.0488,39.0948], |
||||
'兰州': [103.5901,36.3043], |
||||
'包头': [110.3467,41.4899], |
||||
'北京': [116.4551,40.2539], |
||||
'北海': [109.314,21.6211], |
||||
'南京': [118.8062,31.9208], |
||||
'南宁': [108.479,23.1152], |
||||
'南昌': [116.0046,28.6633], |
||||
'南通': [121.1023,32.1625], |
||||
'厦门': [118.1689,24.6478], |
||||
'台州': [121.1353,28.6688], |
||||
'合肥': [117.29,32.0581], |
||||
'呼和浩特': [111.4124,40.4901], |
||||
'咸阳': [108.4131,34.8706], |
||||
'哈尔滨': [127.9688,45.368], |
||||
'唐山': [118.4766,39.6826], |
||||
'嘉兴': [120.9155,30.6354], |
||||
'大同': [113.7854,39.8035], |
||||
'大连': [122.2229,39.4409], |
||||
'天津': [117.4219,39.4189], |
||||
'太原': [112.3352,37.9413], |
||||
'威海': [121.9482,37.1393], |
||||
'宁波': [121.5967,29.6466], |
||||
'宝鸡': [107.1826,34.3433], |
||||
'宿迁': [118.5535,33.7775], |
||||
'常州': [119.4543,31.5582], |
||||
'广州': [113.5107,23.2196], |
||||
'廊坊': [116.521,39.0509], |
||||
'延安': [109.1052,36.4252], |
||||
'张家口': [115.1477,40.8527], |
||||
'徐州': [117.5208,34.3268], |
||||
'德州': [116.6858,37.2107], |
||||
'惠州': [114.6204,23.1647], |
||||
'成都': [103.9526,30.7617], |
||||
'扬州': [119.4653,32.8162], |
||||
'承德': [117.5757,41.4075], |
||||
'拉萨': [91.1865,30.1465], |
||||
'无锡': [120.3442,31.5527], |
||||
'日照': [119.2786,35.5023], |
||||
'昆明': [102.9199,25.4663], |
||||
'杭州': [119.5313,29.8773], |
||||
'枣庄': [117.323,34.8926], |
||||
'柳州': [109.3799,24.9774], |
||||
'株洲': [113.5327,27.0319], |
||||
'武汉': [114.3896,30.6628], |
||||
'汕头': [117.1692,23.3405], |
||||
'江门': [112.6318,22.1484], |
||||
'沈阳': [123.1238,42.1216], |
||||
'沧州': [116.8286,38.2104], |
||||
'河源': [114.917,23.9722], |
||||
'泉州': [118.3228,25.1147], |
||||
'泰安': [117.0264,36.0516], |
||||
'泰州': [120.0586,32.5525], |
||||
'济南': [117.1582,36.8701], |
||||
'济宁': [116.8286,35.3375], |
||||
'海口': [110.3893,19.8516], |
||||
'淄博': [118.0371,36.6064], |
||||
'淮安': [118.927,33.4039], |
||||
'深圳': [114.5435,22.5439], |
||||
'清远': [112.9175,24.3292], |
||||
'温州': [120.498,27.8119], |
||||
'渭南': [109.7864,35.0299], |
||||
'湖州': [119.8608,30.7782], |
||||
'湘潭': [112.5439,27.7075], |
||||
'滨州': [117.8174,37.4963], |
||||
'潍坊': [119.0918,36.524], |
||||
'烟台': [120.7397,37.5128], |
||||
'玉溪': [101.9312,23.8898], |
||||
'珠海': [113.7305,22.1155], |
||||
'盐城': [120.2234,33.5577], |
||||
'盘锦': [121.9482,41.0449], |
||||
'石家庄': [114.4995,38.1006], |
||||
'福州': [119.4543,25.9222], |
||||
'秦皇岛': [119.2126,40.0232], |
||||
'绍兴': [120.564,29.7565], |
||||
'聊城': [115.9167,36.4032], |
||||
'肇庆': [112.1265,23.5822], |
||||
'舟山': [122.2559,30.2234], |
||||
'苏州': [120.6519,31.3989], |
||||
'莱芜': [117.6526,36.2714], |
||||
'菏泽': [115.6201,35.2057], |
||||
'营口': [122.4316,40.4297], |
||||
'葫芦岛': [120.1575,40.578], |
||||
'衡水': [115.8838,37.7161], |
||||
'衢州': [118.6853,28.8666], |
||||
'西宁': [101.4038,36.8207], |
||||
'西安': [109.1162,34.2004], |
||||
'贵阳': [106.6992,26.7682], |
||||
'连云港': [119.1248,34.552], |
||||
'邢台': [114.8071,37.2821], |
||||
'邯郸': [114.4775,36.535], |
||||
'郑州': [113.4668,34.6234], |
||||
'鄂尔多斯': [108.9734,39.2487], |
||||
'重庆': [107.7539,30.1904], |
||||
'金华': [120.0037,29.1028], |
||||
'铜川': [109.0393,35.1947], |
||||
'银川': [106.3586,38.1775], |
||||
'镇江': [119.4763,31.9702], |
||||
'长春': [125.8154,44.2584], |
||||
'长沙': [113.0823,28.2568], |
||||
'长治': [112.8625,36.4746], |
||||
'阳泉': [113.4778,38.0951], |
||||
'青岛': [120.4651,36.3373], |
||||
'韶关': [113.7964,24.7028] |
||||
}; |
||||
|
||||
var BJData = [ |
||||
[{name:'北京'}, {name:'上海',value:95}], |
||||
[{name:'北京'}, {name:'广州',value:90}], |
||||
[{name:'北京'}, {name:'大连',value:80}], |
||||
[{name:'北京'}, {name:'南宁',value:70}], |
||||
[{name:'北京'}, {name:'南昌',value:60}], |
||||
[{name:'北京'}, {name:'拉萨',value:50}], |
||||
[{name:'北京'}, {name:'长春',value:40}], |
||||
[{name:'北京'}, {name:'包头',value:30}], |
||||
[{name:'北京'}, {name:'重庆',value:20}], |
||||
[{name:'北京'}, {name:'常州',value:10}] |
||||
]; |
||||
|
||||
var SHData = [ |
||||
[{name:'上海'},{name:'包头',value:95}], |
||||
[{name:'上海'},{name:'昆明',value:90}], |
||||
[{name:'上海'},{name:'广州',value:80}], |
||||
[{name:'上海'},{name:'郑州',value:70}], |
||||
[{name:'上海'},{name:'长春',value:60}], |
||||
[{name:'上海'},{name:'重庆',value:50}], |
||||
[{name:'上海'},{name:'长沙',value:40}], |
||||
[{name:'上海'},{name:'北京',value:30}], |
||||
[{name:'上海'},{name:'丹东',value:20}], |
||||
[{name:'上海'},{name:'大连',value:10}] |
||||
]; |
||||
|
||||
var GZData = [ |
||||
[{name:'广州'},{name:'福州',value:95}], |
||||
[{name:'广州'},{name:'太原',value:90}], |
||||
[{name:'广州'},{name:'长春',value:80}], |
||||
[{name:'广州'},{name:'重庆',value:70}], |
||||
[{name:'广州'},{name:'西安',value:60}], |
||||
[{name:'广州'},{name:'成都',value:50}], |
||||
[{name:'广州'},{name:'常州',value:40}], |
||||
[{name:'广州'},{name:'北京',value:30}], |
||||
[{name:'广州'},{name:'北海',value:20}], |
||||
[{name:'广州'},{name:'海口',value:10}] |
||||
]; |
||||
|
||||
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'; |
||||
|
||||
var convertData = function (data) { |
||||
var res = []; |
||||
for (var i = 0; i < data.length; i++) { |
||||
var dataItem = data[i]; |
||||
var fromCoord = geoCoordMap[dataItem[0].name]; |
||||
var toCoord = geoCoordMap[dataItem[1].name]; |
||||
if (fromCoord && toCoord) { |
||||
res.push({ |
||||
fromName: dataItem[0].name, |
||||
toName: dataItem[1].name, |
||||
coords: [fromCoord, toCoord] |
||||
}); |
||||
} |
||||
} |
||||
return res; |
||||
}; |
||||
|
||||
var color = ['#a6c84c', '#ffa022', '#46bee9']; |
||||
var series = []; |
||||
[['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach(function (item, i) { |
||||
series.push({ |
||||
name: item[0] + ' Top10', |
||||
type: 'lines', |
||||
zlevel: 1, |
||||
effect: { |
||||
show: true, |
||||
period: 6, |
||||
trailLength: 0.7, |
||||
color: '#fff', |
||||
symbolSize: 3 |
||||
}, |
||||
lineStyle: { |
||||
normal: { |
||||
color: color[i], |
||||
width: 0, |
||||
curveness: 0.2 |
||||
} |
||||
}, |
||||
data: convertData(item[1]) |
||||
}, |
||||
{ |
||||
name: item[0] + ' Top10', |
||||
type: 'lines', |
||||
zlevel: 2, |
||||
effect: { |
||||
show: true, |
||||
period: 6, |
||||
trailLength: 0, |
||||
symbol: planePath, |
||||
symbolSize: 15 |
||||
}, |
||||
lineStyle: { |
||||
normal: { |
||||
color: color[i], |
||||
width: 1, |
||||
opacity: 0.4, |
||||
curveness: 0.2 |
||||
} |
||||
}, |
||||
data: convertData(item[1]) |
||||
}, |
||||
{ |
||||
name: item[0] + ' Top10', |
||||
type: 'effectScatter', |
||||
coordinateSystem: 'geo', |
||||
zlevel: 2, |
||||
rippleEffect: { |
||||
brushType: 'stroke' |
||||
}, |
||||
label: { |
||||
normal: { |
||||
show: true, |
||||
position: 'right', |
||||
formatter: '{b}' |
||||
} |
||||
}, |
||||
symbolSize: function (val) { |
||||
return val[2] / 8; |
||||
}, |
||||
itemStyle: { |
||||
normal: { |
||||
color: color[i] |
||||
} |
||||
}, |
||||
data: item[1].map(function (dataItem) { |
||||
return { |
||||
name: dataItem[1].name, |
||||
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]) |
||||
}; |
||||
}) |
||||
}); |
||||
}); |
||||
|
||||
option = { |
||||
backgroundColor: '#404a59', |
||||
title : { |
||||
text: '模拟迁徙', |
||||
subtext: '数据纯属虚构', |
||||
left: 'center', |
||||
textStyle : { |
||||
color: '#fff' |
||||
} |
||||
}, |
||||
tooltip : { |
||||
trigger: 'item' |
||||
}, |
||||
legend: { |
||||
orient: 'vertical', |
||||
top: 'bottom', |
||||
left: 'right', |
||||
data:['北京 Top10', '上海 Top10', '广州 Top10'], |
||||
textStyle: { |
||||
color: '#fff' |
||||
}, |
||||
selectedMode: 'single' |
||||
}, |
||||
geo: { |
||||
map: 'china', |
||||
label: { |
||||
emphasis: { |
||||
show: false |
||||
} |
||||
}, |
||||
roam: true, |
||||
itemStyle: { |
||||
normal: { |
||||
areaColor: '#323c48', |
||||
borderColor: '#404a59' |
||||
}, |
||||
emphasis: { |
||||
areaColor: '#2a333d' |
||||
} |
||||
} |
||||
}, |
||||
series: series |
||||
}; |
||||
|
||||
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。 |
||||
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> |
@ -1,114 +0,0 @@ |
||||
<!doctype html> |
||||
<html class="x-admin-sm"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>后台登录-X-admin2.1</title> |
||||
<meta name="renderer" content="webkit|ie-comp|ie-stand"> |
||||
<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" /> |
||||
<meta http-equiv="Cache-Control" content="no-siteapp" /> |
||||
|
||||
<link rel="stylesheet" href="../assets/css/font.css"> |
||||
<link rel="stylesheet" href="../assets/css/xadmin.css"> |
||||
</head> |
||||
<body> |
||||
<div class="x-body"> |
||||
<blockquote class="layui-elem-quote"> |
||||
特别声明:ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。如需使用或者详细更多案例可以访问官网 <a href="http://echarts.baidu.com/" style="color:red">ECharts</a>。 x-admin不承担任何版权问题。 |
||||
</blockquote> |
||||
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> |
||||
<div id="main" style="width: 100%;height:400px;"></div> |
||||
<blockquote class="layui-elem-quote"> |
||||
注意:本案例的Echarts图表库由cdn引入,需要在线才能正常使用,如想离线,请至Echarts官网下载。 |
||||
</blockquote> |
||||
</div> |
||||
<script src="//cdn.bootcss.com/echarts/3.3.2/echarts.min.js" charset="utf-8"></script> |
||||
<script src="//cdn.bootcss.com/echarts/3.3.2/extension/bmap.min.js" type="text/javascript"></script> |
||||
<script type="text/javascript"> |
||||
// 基于准备好的dom,初始化echarts实例 |
||||
var myChart = echarts.init(document.getElementById('main')); |
||||
|
||||
// 指定图表的配置项和数据 |
||||
option = { |
||||
backgroundColor: '#2c343c', |
||||
|
||||
title: { |
||||
text: 'Customized Pie', |
||||
left: 'center', |
||||
top: 20, |
||||
textStyle: { |
||||
color: '#ccc' |
||||
} |
||||
}, |
||||
|
||||
tooltip : { |
||||
trigger: 'item', |
||||
formatter: "{a} <br/>{b} : {c} ({d}%)" |
||||
}, |
||||
|
||||
visualMap: { |
||||
show: false, |
||||
min: 80, |
||||
max: 600, |
||||
inRange: { |
||||
colorLightness: [0, 1] |
||||
} |
||||
}, |
||||
series : [ |
||||
{ |
||||
name:'访问来源', |
||||
type:'pie', |
||||
radius : '55%', |
||||
center: ['50%', '50%'], |
||||
data:[ |
||||
{value:335, name:'直接访问'}, |
||||
{value:310, name:'邮件营销'}, |
||||
{value:274, name:'联盟广告'}, |
||||
{value:235, name:'视频广告'}, |
||||
{value:400, name:'搜索引擎'} |
||||
].sort(function (a, b) { return a.value - b.value}), |
||||
roseType: 'angle', |
||||
label: { |
||||
normal: { |
||||
textStyle: { |
||||
color: 'rgba(255, 255, 255, 0.3)' |
||||
} |
||||
} |
||||
}, |
||||
labelLine: { |
||||
normal: { |
||||
lineStyle: { |
||||
color: 'rgba(255, 255, 255, 0.3)' |
||||
}, |
||||
smooth: 0.2, |
||||
length: 10, |
||||
length2: 20 |
||||
} |
||||
}, |
||||
itemStyle: { |
||||
normal: { |
||||
color: '#c23531', |
||||
shadowBlur: 200, |
||||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
||||
} |
||||
} |
||||
} |
||||
] |
||||
}; |
||||
|
||||
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。 |
||||
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> |
@ -1,80 +0,0 @@ |
||||
<!doctype html> |
||||
<html class="x-admin-sm"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>后台登录-X-admin2.1</title> |
||||
<meta name="renderer" content="webkit|ie-comp|ie-stand"> |
||||
<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" /> |
||||
<meta http-equiv="Cache-Control" content="no-siteapp" /> |
||||
|
||||
<link rel="stylesheet" href="../assets/css/font.css"> |
||||
<link rel="stylesheet" href="../assets/css/xadmin.css"> |
||||
</head> |
||||
<body> |
||||
<div class="x-body"> |
||||
<blockquote class="layui-elem-quote"> |
||||
特别声明:ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。如需使用,详细了解可以访问官网 <a href="http://echarts.baidu.com/" style="color:red">ECharts</a>。 x-admin不承担任何版权问题。 |
||||
</blockquote> |
||||
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> |
||||
<div id="main" style="width: 100%;height:400px;"></div> |
||||
<blockquote class="layui-elem-quote"> |
||||
注意:本案例的Echarts图表库由cdn引入,需要在线才能正常使用,如想离线,请至Echarts官网下载。 |
||||
</blockquote> |
||||
</div> |
||||
<script src="//cdn.bootcss.com/echarts/3.3.2/echarts.min.js" charset="utf-8"></script> |
||||
<script type="text/javascript"> |
||||
// 基于准备好的dom,初始化echarts实例 |
||||
var myChart = echarts.init(document.getElementById('main')); |
||||
|
||||
// 指定图表的配置项和数据 |
||||
var option = { |
||||
title: { |
||||
text: '基础雷达图' |
||||
}, |
||||
tooltip: {}, |
||||
legend: { |
||||
data: ['预算分配(Allocated Budget)', '实际开销(Actual Spending)'] |
||||
}, |
||||
radar: { |
||||
// shape: 'circle', |
||||
indicator: [ |
||||
{ name: '销售(sales)', max: 6500}, |
||||
{ name: '管理(Administration)', max: 16000}, |
||||
{ name: '信息技术(Information Techology)', max: 30000}, |
||||
{ name: '客服(Customer Support)', max: 38000}, |
||||
{ name: '研发(Development)', max: 52000}, |
||||
{ name: '市场(Marketing)', max: 25000} |
||||
] |
||||
}, |
||||
series: [{ |
||||
name: '预算 vs 开销(Budget vs spending)', |
||||
type: 'radar', |
||||
// areaStyle: {normal: {}}, |
||||
data : [ |
||||
{ |
||||
value : [4300, 10000, 28000, 35000, 50000, 19000], |
||||
name : '预算分配(Allocated Budget)' |
||||
}, |
||||
{ |
||||
value : [5000, 14000, 28000, 31000, 42000, 21000], |
||||
name : '实际开销(Actual Spending)' |
||||
} |
||||
] |
||||
}] |
||||
}; |
||||
|
||||
// 使用刚指定的配置项和数据显示图表。 |
||||
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> |
@ -1,343 +0,0 @@ |
||||
<!doctype html> |
||||
<html class="x-admin-sm"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>后台登录-X-admin2.1</title> |
||||
<meta name="renderer" content="webkit|ie-comp|ie-stand"> |
||||
<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" /> |
||||
<meta http-equiv="Cache-Control" content="no-siteapp" /> |
||||
|
||||
<link rel="stylesheet" href="../assets/css/font.css"> |
||||
<link rel="stylesheet" href="../assets/css/xadmin.css"> |
||||
</head> |
||||
<body> |
||||
<div class="x-body"> |
||||
<blockquote class="layui-elem-quote"> |
||||
特别声明:ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。如需使用,详细了解可以访问官网 <a href="http://echarts.baidu.com/" style="color:red">ECharts</a>。 x-admin不承担任何版权问题。 |
||||
</blockquote> |
||||
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> |
||||
<div id="main" style="width: 100%;height:400px;"></div> |
||||
<blockquote class="layui-elem-quote"> |
||||
注意:本案例的Echarts图表库由cdn引入,需要在线才能正常使用,如想离线,请至Echarts官网下载。 |
||||
</blockquote> |
||||
</div> |
||||
<script src="//cdn.bootcss.com/echarts/3.3.2/echarts.min.js" charset="utf-8"></script> |
||||
<script type="text/javascript"> |
||||
// 基于准备好的dom,初始化echarts实例 |
||||
var myChart = echarts.init(document.getElementById('main')); |
||||
|
||||
// 指定图表的配置项和数据 |
||||
// 数据意义:开盘(open),收盘(close),最低(lowest),最高(highest) |
||||
var data0 = splitData([ |
||||
['2013/1/24', 2320.26,2320.26,2287.3,2362.94], |
||||
['2013/1/25', 2300,2291.3,2288.26,2308.38], |
||||
['2013/1/28', 2295.35,2346.5,2295.35,2346.92], |
||||
['2013/1/29', 2347.22,2358.98,2337.35,2363.8], |
||||
['2013/1/30', 2360.75,2382.48,2347.89,2383.76], |
||||
['2013/1/31', 2383.43,2385.42,2371.23,2391.82], |
||||
['2013/2/1', 2377.41,2419.02,2369.57,2421.15], |
||||
['2013/2/4', 2425.92,2428.15,2417.58,2440.38], |
||||
['2013/2/5', 2411,2433.13,2403.3,2437.42], |
||||
['2013/2/6', 2432.68,2434.48,2427.7,2441.73], |
||||
['2013/2/7', 2430.69,2418.53,2394.22,2433.89], |
||||
['2013/2/8', 2416.62,2432.4,2414.4,2443.03], |
||||
['2013/2/18', 2441.91,2421.56,2415.43,2444.8], |
||||
['2013/2/19', 2420.26,2382.91,2373.53,2427.07], |
||||
['2013/2/20', 2383.49,2397.18,2370.61,2397.94], |
||||
['2013/2/21', 2378.82,2325.95,2309.17,2378.82], |
||||
['2013/2/22', 2322.94,2314.16,2308.76,2330.88], |
||||
['2013/2/25', 2320.62,2325.82,2315.01,2338.78], |
||||
['2013/2/26', 2313.74,2293.34,2289.89,2340.71], |
||||
['2013/2/27', 2297.77,2313.22,2292.03,2324.63], |
||||
['2013/2/28', 2322.32,2365.59,2308.92,2366.16], |
||||
['2013/3/1', 2364.54,2359.51,2330.86,2369.65], |
||||
['2013/3/4', 2332.08,2273.4,2259.25,2333.54], |
||||
['2013/3/5', 2274.81,2326.31,2270.1,2328.14], |
||||
['2013/3/6', 2333.61,2347.18,2321.6,2351.44], |
||||
['2013/3/7', 2340.44,2324.29,2304.27,2352.02], |
||||
['2013/3/8', 2326.42,2318.61,2314.59,2333.67], |
||||
['2013/3/11', 2314.68,2310.59,2296.58,2320.96], |
||||
['2013/3/12', 2309.16,2286.6,2264.83,2333.29], |
||||
['2013/3/13', 2282.17,2263.97,2253.25,2286.33], |
||||
['2013/3/14', 2255.77,2270.28,2253.31,2276.22], |
||||
['2013/3/15', 2269.31,2278.4,2250,2312.08], |
||||
['2013/3/18', 2267.29,2240.02,2239.21,2276.05], |
||||
['2013/3/19', 2244.26,2257.43,2232.02,2261.31], |
||||
['2013/3/20', 2257.74,2317.37,2257.42,2317.86], |
||||
['2013/3/21', 2318.21,2324.24,2311.6,2330.81], |
||||
['2013/3/22', 2321.4,2328.28,2314.97,2332], |
||||
['2013/3/25', 2334.74,2326.72,2319.91,2344.89], |
||||
['2013/3/26', 2318.58,2297.67,2281.12,2319.99], |
||||
['2013/3/27', 2299.38,2301.26,2289,2323.48], |
||||
['2013/3/28', 2273.55,2236.3,2232.91,2273.55], |
||||
['2013/3/29', 2238.49,2236.62,2228.81,2246.87], |
||||
['2013/4/1', 2229.46,2234.4,2227.31,2243.95], |
||||
['2013/4/2', 2234.9,2227.74,2220.44,2253.42], |
||||
['2013/4/3', 2232.69,2225.29,2217.25,2241.34], |
||||
['2013/4/8', 2196.24,2211.59,2180.67,2212.59], |
||||
['2013/4/9', 2215.47,2225.77,2215.47,2234.73], |
||||
['2013/4/10', 2224.93,2226.13,2212.56,2233.04], |
||||
['2013/4/11', 2236.98,2219.55,2217.26,2242.48], |
||||
['2013/4/12', 2218.09,2206.78,2204.44,2226.26], |
||||
['2013/4/15', 2199.91,2181.94,2177.39,2204.99], |
||||
['2013/4/16', 2169.63,2194.85,2165.78,2196.43], |
||||
['2013/4/17', 2195.03,2193.8,2178.47,2197.51], |
||||
['2013/4/18', 2181.82,2197.6,2175.44,2206.03], |
||||
['2013/4/19', 2201.12,2244.64,2200.58,2250.11], |
||||
['2013/4/22', 2236.4,2242.17,2232.26,2245.12], |
||||
['2013/4/23', 2242.62,2184.54,2182.81,2242.62], |
||||
['2013/4/24', 2187.35,2218.32,2184.11,2226.12], |
||||
['2013/4/25', 2213.19,2199.31,2191.85,2224.63], |
||||
['2013/4/26', 2203.89,2177.91,2173.86,2210.58], |
||||
['2013/5/2', 2170.78,2174.12,2161.14,2179.65], |
||||
['2013/5/3', 2179.05,2205.5,2179.05,2222.81], |
||||
['2013/5/6', 2212.5,2231.17,2212.5,2236.07], |
||||
['2013/5/7', 2227.86,2235.57,2219.44,2240.26], |
||||
['2013/5/8', 2242.39,2246.3,2235.42,2255.21], |
||||
['2013/5/9', 2246.96,2232.97,2221.38,2247.86], |
||||
['2013/5/10', 2228.82,2246.83,2225.81,2247.67], |
||||
['2013/5/13', 2247.68,2241.92,2231.36,2250.85], |
||||
['2013/5/14', 2238.9,2217.01,2205.87,2239.93], |
||||
['2013/5/15', 2217.09,2224.8,2213.58,2225.19], |
||||
['2013/5/16', 2221.34,2251.81,2210.77,2252.87], |
||||
['2013/5/17', 2249.81,2282.87,2248.41,2288.09], |
||||
['2013/5/20', 2286.33,2299.99,2281.9,2309.39], |
||||
['2013/5/21', 2297.11,2305.11,2290.12,2305.3], |
||||
['2013/5/22', 2303.75,2302.4,2292.43,2314.18], |
||||
['2013/5/23', 2293.81,2275.67,2274.1,2304.95], |
||||
['2013/5/24', 2281.45,2288.53,2270.25,2292.59], |
||||
['2013/5/27', 2286.66,2293.08,2283.94,2301.7], |
||||
['2013/5/28', 2293.4,2321.32,2281.47,2322.1], |
||||
['2013/5/29', 2323.54,2324.02,2321.17,2334.33], |
||||
['2013/5/30', 2316.25,2317.75,2310.49,2325.72], |
||||
['2013/5/31', 2320.74,2300.59,2299.37,2325.53], |
||||
['2013/6/3', 2300.21,2299.25,2294.11,2313.43], |
||||
['2013/6/4', 2297.1,2272.42,2264.76,2297.1], |
||||
['2013/6/5', 2270.71,2270.93,2260.87,2276.86], |
||||
['2013/6/6', 2264.43,2242.11,2240.07,2266.69], |
||||
['2013/6/7', 2242.26,2210.9,2205.07,2250.63], |
||||
['2013/6/13', 2190.1,2148.35,2126.22,2190.1] |
||||
]); |
||||
|
||||
|
||||
function splitData(rawData) { |
||||
var categoryData = []; |
||||
var values = [] |
||||
for (var i = 0; i < rawData.length; i++) { |
||||
categoryData.push(rawData[i].splice(0, 1)[0]); |
||||
values.push(rawData[i]) |
||||
} |
||||
return { |
||||
categoryData: categoryData, |
||||
values: values |
||||
}; |
||||
} |
||||
|
||||
function calculateMA(dayCount) { |
||||
var result = []; |
||||
for (var i = 0, len = data0.values.length; i < len; i++) { |
||||
if (i < dayCount) { |
||||
result.push('-'); |
||||
continue; |
||||
} |
||||
var sum = 0; |
||||
for (var j = 0; j < dayCount; j++) { |
||||
sum += data0.values[i - j][1]; |
||||
} |
||||
result.push(sum / dayCount); |
||||
} |
||||
return result; |
||||
} |
||||
|
||||
|
||||
|
||||
option = { |
||||
title: { |
||||
text: '上证指数', |
||||
left: 0 |
||||
}, |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
axisPointer: { |
||||
type: 'line' |
||||
} |
||||
}, |
||||
legend: { |
||||
data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'] |
||||
}, |
||||
grid: { |
||||
left: '10%', |
||||
right: '10%', |
||||
bottom: '15%' |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
data: data0.categoryData, |
||||
scale: true, |
||||
boundaryGap : false, |
||||
axisLine: {onZero: false}, |
||||
splitLine: {show: false}, |
||||
splitNumber: 20, |
||||
min: 'dataMin', |
||||
max: 'dataMax' |
||||
}, |
||||
yAxis: { |
||||
scale: true, |
||||
splitArea: { |
||||
show: true |
||||
} |
||||
}, |
||||
dataZoom: [ |
||||
{ |
||||
type: 'inside', |
||||
start: 50, |
||||
end: 100 |
||||
}, |
||||
{ |
||||
show: true, |
||||
type: 'slider', |
||||
y: '90%', |
||||
start: 50, |
||||
end: 100 |
||||
} |
||||
], |
||||
series: [ |
||||
{ |
||||
name: '日K', |
||||
type: 'candlestick', |
||||
data: data0.values, |
||||
markPoint: { |
||||
label: { |
||||
normal: { |
||||
formatter: function (param) { |
||||
return param != null ? Math.round(param.value) : ''; |
||||
} |
||||
} |
||||
}, |
||||
data: [ |
||||
{ |
||||
name: 'XX标点', |
||||
coord: ['2013/5/31', 2300], |
||||
value: 2300, |
||||
itemStyle: { |
||||
normal: {color: 'rgb(41,60,85)'} |
||||
} |
||||
}, |
||||
{ |
||||
name: 'highest value', |
||||
type: 'max', |
||||
valueDim: 'highest' |
||||
}, |
||||
{ |
||||
name: 'lowest value', |
||||
type: 'min', |
||||
valueDim: 'lowest' |
||||
}, |
||||
{ |
||||
name: 'average value on close', |
||||
type: 'average', |
||||
valueDim: 'close' |
||||
} |
||||
], |
||||
tooltip: { |
||||
formatter: function (param) { |
||||
return param.name + '<br>' + (param.data.coord || ''); |
||||
} |
||||
} |
||||
}, |
||||
markLine: { |
||||
symbol: ['none', 'none'], |
||||
data: [ |
||||
[ |
||||
{ |
||||
name: 'from lowest to highest', |
||||
type: 'min', |
||||
valueDim: 'lowest', |
||||
symbol: 'circle', |
||||
symbolSize: 10, |
||||
label: { |
||||
normal: {show: false}, |
||||
emphasis: {show: false} |
||||
} |
||||
}, |
||||
{ |
||||
type: 'max', |
||||
valueDim: 'highest', |
||||
symbol: 'circle', |
||||
symbolSize: 10, |
||||
label: { |
||||
normal: {show: false}, |
||||
emphasis: {show: false} |
||||
} |
||||
} |
||||
], |
||||
{ |
||||
name: 'min line on close', |
||||
type: 'min', |
||||
valueDim: 'close' |
||||
}, |
||||
{ |
||||
name: 'max line on close', |
||||
type: 'max', |
||||
valueDim: 'close' |
||||
} |
||||
] |
||||
} |
||||
}, |
||||
{ |
||||
name: 'MA5', |
||||
type: 'line', |
||||
data: calculateMA(5), |
||||
smooth: true, |
||||
lineStyle: { |
||||
normal: {opacity: 0.5} |
||||
} |
||||
}, |
||||
{ |
||||
name: 'MA10', |
||||
type: 'line', |
||||
data: calculateMA(10), |
||||
smooth: true, |
||||
lineStyle: { |
||||
normal: {opacity: 0.5} |
||||
} |
||||
}, |
||||
{ |
||||
name: 'MA20', |
||||
type: 'line', |
||||
data: calculateMA(20), |
||||
smooth: true, |
||||
lineStyle: { |
||||
normal: {opacity: 0.5} |
||||
} |
||||
}, |
||||
{ |
||||
name: 'MA30', |
||||
type: 'line', |
||||
data: calculateMA(30), |
||||
smooth: true, |
||||
lineStyle: { |
||||
normal: {opacity: 0.5} |
||||
} |
||||
}, |
||||
|
||||
] |
||||
}; |
||||
|
||||
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。 |
||||
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> |
@ -1,496 +0,0 @@ |
||||
<!doctype html> |
||||
<html class="x-admin-sm"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>后台登录-X-admin2.1</title> |
||||
<meta name="renderer" content="webkit|ie-comp|ie-stand"> |
||||
<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" /> |
||||
<meta http-equiv="Cache-Control" content="no-siteapp" /> |
||||
|
||||
<link rel="stylesheet" href="../assets/css/font.css"> |
||||
<link rel="stylesheet" href="../assets/css/xadmin.css"> |
||||
</head> |
||||
<body> |
||||
<div class="x-body"> |
||||
<blockquote class="layui-elem-quote"> |
||||
特别声明:ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。如需使用或者详细更多案例可以访问官网 <a href="http://echarts.baidu.com/" style="color:red">ECharts</a>。 x-admin不承担任何版权问题。 |
||||
</blockquote> |
||||
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> |
||||
<div id="main" style="width: 100%;height:400px;"></div> |
||||
<blockquote class="layui-elem-quote"> |
||||
注意:本案例的Echarts图表库由cdn引入,需要在线才能正常使用,如想离线,请至Echarts官网下载。 |
||||
</blockquote> |
||||
</div> |
||||
<script src="//cdn.bootcss.com/echarts/3.3.2/echarts.min.js" charset="utf-8"></script> |
||||
<script src="//cdn.bootcss.com/echarts/3.3.2/extension/bmap.min.js" type="text/javascript"></script> |
||||
<script src="http://echarts.baidu.com/asset/map/js/china.js"></script> |
||||
<script type="text/javascript"> |
||||
// 基于准备好的dom,初始化echarts实例 |
||||
var myChart = echarts.init(document.getElementById('main')); |
||||
myChart.setOption({ |
||||
series: [{ |
||||
type: 'map', |
||||
map: 'china' |
||||
}] |
||||
}); |
||||
|
||||
var geoCoordMap = { |
||||
"海门":[121.15,31.89], |
||||
"鄂尔多斯":[109.781327,39.608266], |
||||
"招远":[120.38,37.35], |
||||
"舟山":[122.207216,29.985295], |
||||
"齐齐哈尔":[123.97,47.33], |
||||
"盐城":[120.13,33.38], |
||||
"赤峰":[118.87,42.28], |
||||
"青岛":[120.33,36.07], |
||||
"乳山":[121.52,36.89], |
||||
"金昌":[102.188043,38.520089], |
||||
"泉州":[118.58,24.93], |
||||
"莱西":[120.53,36.86], |
||||
"日照":[119.46,35.42], |
||||
"胶南":[119.97,35.88], |
||||
"南通":[121.05,32.08], |
||||
"拉萨":[91.11,29.97], |
||||
"云浮":[112.02,22.93], |
||||
"梅州":[116.1,24.55], |
||||
"文登":[122.05,37.2], |
||||
"上海":[121.48,31.22], |
||||
"攀枝花":[101.718637,26.582347], |
||||
"威海":[122.1,37.5], |
||||
"承德":[117.93,40.97], |
||||
"厦门":[118.1,24.46], |
||||
"汕尾":[115.375279,22.786211], |
||||
"潮州":[116.63,23.68], |
||||
"丹东":[124.37,40.13], |
||||
"太仓":[121.1,31.45], |
||||
"曲靖":[103.79,25.51], |
||||
"烟台":[121.39,37.52], |
||||
"福州":[119.3,26.08], |
||||
"瓦房店":[121.979603,39.627114], |
||||
"即墨":[120.45,36.38], |
||||
"抚顺":[123.97,41.97], |
||||
"玉溪":[102.52,24.35], |
||||
"张家口":[114.87,40.82], |
||||
"阳泉":[113.57,37.85], |
||||
"莱州":[119.942327,37.177017], |
||||
"湖州":[120.1,30.86], |
||||
"汕头":[116.69,23.39], |
||||
"昆山":[120.95,31.39], |
||||
"宁波":[121.56,29.86], |
||||
"湛江":[110.359377,21.270708], |
||||
"揭阳":[116.35,23.55], |
||||
"荣成":[122.41,37.16], |
||||
"连云港":[119.16,34.59], |
||||
"葫芦岛":[120.836932,40.711052], |
||||
"常熟":[120.74,31.64], |
||||
"东莞":[113.75,23.04], |
||||
"河源":[114.68,23.73], |
||||
"淮安":[119.15,33.5], |
||||
"泰州":[119.9,32.49], |
||||
"南宁":[108.33,22.84], |
||||
"营口":[122.18,40.65], |
||||
"惠州":[114.4,23.09], |
||||
"江阴":[120.26,31.91], |
||||
"蓬莱":[120.75,37.8], |
||||
"韶关":[113.62,24.84], |
||||
"嘉峪关":[98.289152,39.77313], |
||||
"广州":[113.23,23.16], |
||||
"延安":[109.47,36.6], |
||||
"太原":[112.53,37.87], |
||||
"清远":[113.01,23.7], |
||||
"中山":[113.38,22.52], |
||||
"昆明":[102.73,25.04], |
||||
"寿光":[118.73,36.86], |
||||
"盘锦":[122.070714,41.119997], |
||||
"长治":[113.08,36.18], |
||||
"深圳":[114.07,22.62], |
||||
"珠海":[113.52,22.3], |
||||
"宿迁":[118.3,33.96], |
||||
"咸阳":[108.72,34.36], |
||||
"铜川":[109.11,35.09], |
||||
"平度":[119.97,36.77], |
||||
"佛山":[113.11,23.05], |
||||
"海口":[110.35,20.02], |
||||
"江门":[113.06,22.61], |
||||
"章丘":[117.53,36.72], |
||||
"肇庆":[112.44,23.05], |
||||
"大连":[121.62,38.92], |
||||
"临汾":[111.5,36.08], |
||||
"吴江":[120.63,31.16], |
||||
"石嘴山":[106.39,39.04], |
||||
"沈阳":[123.38,41.8], |
||||
"苏州":[120.62,31.32], |
||||
"茂名":[110.88,21.68], |
||||
"嘉兴":[120.76,30.77], |
||||
"长春":[125.35,43.88], |
||||
"胶州":[120.03336,36.264622], |
||||
"银川":[106.27,38.47], |
||||
"张家港":[120.555821,31.875428], |
||||
"三门峡":[111.19,34.76], |
||||
"锦州":[121.15,41.13], |
||||
"南昌":[115.89,28.68], |
||||
"柳州":[109.4,24.33], |
||||
"三亚":[109.511909,18.252847], |
||||
"自贡":[104.778442,29.33903], |
||||
"吉林":[126.57,43.87], |
||||
"阳江":[111.95,21.85], |
||||
"泸州":[105.39,28.91], |
||||
"西宁":[101.74,36.56], |
||||
"宜宾":[104.56,29.77], |
||||
"呼和浩特":[111.65,40.82], |
||||
"成都":[104.06,30.67], |
||||
"大同":[113.3,40.12], |
||||
"镇江":[119.44,32.2], |
||||
"桂林":[110.28,25.29], |
||||
"张家界":[110.479191,29.117096], |
||||
"宜兴":[119.82,31.36], |
||||
"北海":[109.12,21.49], |
||||
"西安":[108.95,34.27], |
||||
"金坛":[119.56,31.74], |
||||
"东营":[118.49,37.46], |
||||
"牡丹江":[129.58,44.6], |
||||
"遵义":[106.9,27.7], |
||||
"绍兴":[120.58,30.01], |
||||
"扬州":[119.42,32.39], |
||||
"常州":[119.95,31.79], |
||||
"潍坊":[119.1,36.62], |
||||
"重庆":[106.54,29.59], |
||||
"台州":[121.420757,28.656386], |
||||
"南京":[118.78,32.04], |
||||
"滨州":[118.03,37.36], |
||||
"贵阳":[106.71,26.57], |
||||
"无锡":[120.29,31.59], |
||||
"本溪":[123.73,41.3], |
||||
"克拉玛依":[84.77,45.59], |
||||
"渭南":[109.5,34.52], |
||||
"马鞍山":[118.48,31.56], |
||||
"宝鸡":[107.15,34.38], |
||||
"焦作":[113.21,35.24], |
||||
"句容":[119.16,31.95], |
||||
"北京":[116.46,39.92], |
||||
"徐州":[117.2,34.26], |
||||
"衡水":[115.72,37.72], |
||||
"包头":[110,40.58], |
||||
"绵阳":[104.73,31.48], |
||||
"乌鲁木齐":[87.68,43.77], |
||||
"枣庄":[117.57,34.86], |
||||
"杭州":[120.19,30.26], |
||||
"淄博":[118.05,36.78], |
||||
"鞍山":[122.85,41.12], |
||||
"溧阳":[119.48,31.43], |
||||
"库尔勒":[86.06,41.68], |
||||
"安阳":[114.35,36.1], |
||||
"开封":[114.35,34.79], |
||||
"济南":[117,36.65], |
||||
"德阳":[104.37,31.13], |
||||
"温州":[120.65,28.01], |
||||
"九江":[115.97,29.71], |
||||
"邯郸":[114.47,36.6], |
||||
"临安":[119.72,30.23], |
||||
"兰州":[103.73,36.03], |
||||
"沧州":[116.83,38.33], |
||||
"临沂":[118.35,35.05], |
||||
"南充":[106.110698,30.837793], |
||||
"天津":[117.2,39.13], |
||||
"富阳":[119.95,30.07], |
||||
"泰安":[117.13,36.18], |
||||
"诸暨":[120.23,29.71], |
||||
"郑州":[113.65,34.76], |
||||
"哈尔滨":[126.63,45.75], |
||||
"聊城":[115.97,36.45], |
||||
"芜湖":[118.38,31.33], |
||||
"唐山":[118.02,39.63], |
||||
"平顶山":[113.29,33.75], |
||||
"邢台":[114.48,37.05], |
||||
"德州":[116.29,37.45], |
||||
"济宁":[116.59,35.38], |
||||
"荆州":[112.239741,30.335165], |
||||
"宜昌":[111.3,30.7], |
||||
"义乌":[120.06,29.32], |
||||
"丽水":[119.92,28.45], |
||||
"洛阳":[112.44,34.7], |
||||
"秦皇岛":[119.57,39.95], |
||||
"株洲":[113.16,27.83], |
||||
"石家庄":[114.48,38.03], |
||||
"莱芜":[117.67,36.19], |
||||
"常德":[111.69,29.05], |
||||
"保定":[115.48,38.85], |
||||
"湘潭":[112.91,27.87], |
||||
"金华":[119.64,29.12], |
||||
"岳阳":[113.09,29.37], |
||||
"长沙":[113,28.21], |
||||
"衢州":[118.88,28.97], |
||||
"廊坊":[116.7,39.53], |
||||
"菏泽":[115.480656,35.23375], |
||||
"合肥":[117.27,31.86], |
||||
"武汉":[114.31,30.52], |
||||
"大庆":[125.03,46.58] |
||||
}; |
||||
|
||||
var convertData = function (data) { |
||||
var res = []; |
||||
for (var i = 0; i < data.length; i++) { |
||||
var geoCoord = geoCoordMap[data[i].name]; |
||||
if (geoCoord) { |
||||
res.push(geoCoord.concat(data[i].value)); |
||||
} |
||||
} |
||||
return res; |
||||
}; |
||||
|
||||
option = { |
||||
title: { |
||||
text: '全国主要城市空气质量', |
||||
subtext: 'data from PM25.in', |
||||
sublink: 'http://www.pm25.in', |
||||
left: 'center', |
||||
textStyle: { |
||||
color: '#fff' |
||||
} |
||||
}, |
||||
backgroundColor: '#404a59', |
||||
visualMap: { |
||||
min: 0, |
||||
max: 500, |
||||
splitNumber: 5, |
||||
inRange: { |
||||
color: ['#d94e5d','#eac736','#50a3ba'].reverse() |
||||
}, |
||||
textStyle: { |
||||
color: '#fff' |
||||
} |
||||
}, |
||||
geo: { |
||||
map: 'china', |
||||
label: { |
||||
emphasis: { |
||||
show: false |
||||
} |
||||
}, |
||||
roam: true, |
||||
itemStyle: { |
||||
normal: { |
||||
areaColor: '#323c48', |
||||
borderColor: '#111' |
||||
}, |
||||
emphasis: { |
||||
areaColor: '#2a333d' |
||||
} |
||||
} |
||||
}, |
||||
series: [{ |
||||
name: 'AQI', |
||||
type: 'heatmap', |
||||
coordinateSystem: 'geo', |
||||
data: convertData([ |
||||
{name: "海门", value: 9}, |
||||
{name: "鄂尔多斯", value: 12}, |
||||
{name: "招远", value: 12}, |
||||
{name: "舟山", value: 12}, |
||||
{name: "齐齐哈尔", value: 14}, |
||||
{name: "盐城", value: 15}, |
||||
{name: "赤峰", value: 16}, |
||||
{name: "青岛", value: 18}, |
||||
{name: "乳山", value: 18}, |
||||
{name: "金昌", value: 19}, |
||||
{name: "泉州", value: 21}, |
||||
{name: "莱西", value: 21}, |
||||
{name: "日照", value: 21}, |
||||
{name: "胶南", value: 22}, |
||||
{name: "南通", value: 23}, |
||||
{name: "拉萨", value: 24}, |
||||
{name: "云浮", value: 24}, |
||||
{name: "梅州", value: 25}, |
||||
{name: "文登", value: 25}, |
||||
{name: "上海", value: 25}, |
||||
{name: "攀枝花", value: 25}, |
||||
{name: "威海", value: 25}, |
||||
{name: "承德", value: 25}, |
||||
{name: "厦门", value: 26}, |
||||
{name: "汕尾", value: 26}, |
||||
{name: "潮州", value: 26}, |
||||
{name: "丹东", value: 27}, |
||||
{name: "太仓", value: 27}, |
||||
{name: "曲靖", value: 27}, |
||||
{name: "烟台", value: 28}, |
||||
{name: "福州", value: 29}, |
||||
{name: "瓦房店", value: 30}, |
||||
{name: "即墨", value: 30}, |
||||
{name: "抚顺", value: 31}, |
||||
{name: "玉溪", value: 31}, |
||||
{name: "张家口", value: 31}, |
||||
{name: "阳泉", value: 31}, |
||||
{name: "莱州", value: 32}, |
||||
{name: "湖州", value: 32}, |
||||
{name: "汕头", value: 32}, |
||||
{name: "昆山", value: 33}, |
||||
{name: "宁波", value: 33}, |
||||
{name: "湛江", value: 33}, |
||||
{name: "揭阳", value: 34}, |
||||
{name: "荣成", value: 34}, |
||||
{name: "连云港", value: 35}, |
||||
{name: "葫芦岛", value: 35}, |
||||
{name: "常熟", value: 36}, |
||||
{name: "东莞", value: 36}, |
||||
{name: "河源", value: 36}, |
||||
{name: "淮安", value: 36}, |
||||
{name: "泰州", value: 36}, |
||||
{name: "南宁", value: 37}, |
||||
{name: "营口", value: 37}, |
||||
{name: "惠州", value: 37}, |
||||
{name: "江阴", value: 37}, |
||||
{name: "蓬莱", value: 37}, |
||||
{name: "韶关", value: 38}, |
||||
{name: "嘉峪关", value: 38}, |
||||
{name: "广州", value: 38}, |
||||
{name: "延安", value: 38}, |
||||
{name: "太原", value: 39}, |
||||
{name: "清远", value: 39}, |
||||
{name: "中山", value: 39}, |
||||
{name: "昆明", value: 39}, |
||||
{name: "寿光", value: 40}, |
||||
{name: "盘锦", value: 40}, |
||||
{name: "长治", value: 41}, |
||||
{name: "深圳", value: 41}, |
||||
{name: "珠海", value: 42}, |
||||
{name: "宿迁", value: 43}, |
||||
{name: "咸阳", value: 43}, |
||||
{name: "铜川", value: 44}, |
||||
{name: "平度", value: 44}, |
||||
{name: "佛山", value: 44}, |
||||
{name: "海口", value: 44}, |
||||
{name: "江门", value: 45}, |
||||
{name: "章丘", value: 45}, |
||||
{name: "肇庆", value: 46}, |
||||
{name: "大连", value: 47}, |
||||
{name: "临汾", value: 47}, |
||||
{name: "吴江", value: 47}, |
||||
{name: "石嘴山", value: 49}, |
||||
{name: "沈阳", value: 50}, |
||||
{name: "苏州", value: 50}, |
||||
{name: "茂名", value: 50}, |
||||
{name: "嘉兴", value: 51}, |
||||
{name: "长春", value: 51}, |
||||
{name: "胶州", value: 52}, |
||||
{name: "银川", value: 52}, |
||||
{name: "张家港", value: 52}, |
||||
{name: "三门峡", value: 53}, |
||||
{name: "锦州", value: 54}, |
||||
{name: "南昌", value: 54}, |
||||
{name: "柳州", value: 54}, |
||||
{name: "三亚", value: 54}, |
||||
{name: "自贡", value: 56}, |
||||
{name: "吉林", value: 56}, |
||||
{name: "阳江", value: 57}, |
||||
{name: "泸州", value: 57}, |
||||
{name: "西宁", value: 57}, |
||||
{name: "宜宾", value: 58}, |
||||
{name: "呼和浩特", value: 58}, |
||||
{name: "成都", value: 58}, |
||||
{name: "大同", value: 58}, |
||||
{name: "镇江", value: 59}, |
||||
{name: "桂林", value: 59}, |
||||
{name: "张家界", value: 59}, |
||||
{name: "宜兴", value: 59}, |
||||
{name: "北海", value: 60}, |
||||
{name: "西安", value: 61}, |
||||
{name: "金坛", value: 62}, |
||||
{name: "东营", value: 62}, |
||||
{name: "牡丹江", value: 63}, |
||||
{name: "遵义", value: 63}, |
||||
{name: "绍兴", value: 63}, |
||||
{name: "扬州", value: 64}, |
||||
{name: "常州", value: 64}, |
||||
{name: "潍坊", value: 65}, |
||||
{name: "重庆", value: 66}, |
||||
{name: "台州", value: 67}, |
||||
{name: "南京", value: 67}, |
||||
{name: "滨州", value: 70}, |
||||
{name: "贵阳", value: 71}, |
||||
{name: "无锡", value: 71}, |
||||
{name: "本溪", value: 71}, |
||||
{name: "克拉玛依", value: 72}, |
||||
{name: "渭南", value: 72}, |
||||
{name: "马鞍山", value: 72}, |
||||
{name: "宝鸡", value: 72}, |
||||
{name: "焦作", value: 75}, |
||||
{name: "句容", value: 75}, |
||||
{name: "北京", value: 79}, |
||||
{name: "徐州", value: 79}, |
||||
{name: "衡水", value: 80}, |
||||
{name: "包头", value: 80}, |
||||
{name: "绵阳", value: 80}, |
||||
{name: "乌鲁木齐", value: 84}, |
||||
{name: "枣庄", value: 84}, |
||||
{name: "杭州", value: 84}, |
||||
{name: "淄博", value: 85}, |
||||
{name: "鞍山", value: 86}, |
||||
{name: "溧阳", value: 86}, |
||||
{name: "库尔勒", value: 86}, |
||||
{name: "安阳", value: 90}, |
||||
{name: "开封", value: 90}, |
||||
{name: "济南", value: 92}, |
||||
{name: "德阳", value: 93}, |
||||
{name: "温州", value: 95}, |
||||
{name: "九江", value: 96}, |
||||
{name: "邯郸", value: 98}, |
||||
{name: "临安", value: 99}, |
||||
{name: "兰州", value: 99}, |
||||
{name: "沧州", value: 100}, |
||||
{name: "临沂", value: 103}, |
||||
{name: "南充", value: 104}, |
||||
{name: "天津", value: 105}, |
||||
{name: "富阳", value: 106}, |
||||
{name: "泰安", value: 112}, |
||||
{name: "诸暨", value: 112}, |
||||
{name: "郑州", value: 113}, |
||||
{name: "哈尔滨", value: 114}, |
||||
{name: "聊城", value: 116}, |
||||
{name: "芜湖", value: 117}, |
||||
{name: "唐山", value: 119}, |
||||
{name: "平顶山", value: 119}, |
||||
{name: "邢台", value: 119}, |
||||
{name: "德州", value: 120}, |
||||
{name: "济宁", value: 120}, |
||||
{name: "荆州", value: 127}, |
||||
{name: "宜昌", value: 130}, |
||||
{name: "义乌", value: 132}, |
||||
{name: "丽水", value: 133}, |
||||
{name: "洛阳", value: 134}, |
||||
{name: "秦皇岛", value: 136}, |
||||
{name: "株洲", value: 143}, |
||||
{name: "石家庄", value: 147}, |
||||
{name: "莱芜", value: 148}, |
||||
{name: "常德", value: 152}, |
||||
{name: "保定", value: 153}, |
||||
{name: "湘潭", value: 154}, |
||||
{name: "金华", value: 157}, |
||||
{name: "岳阳", value: 169}, |
||||
{name: "长沙", value: 175}, |
||||
{name: "衢州", value: 177}, |
||||
{name: "廊坊", value: 193}, |
||||
{name: "菏泽", value: 194}, |
||||
{name: "合肥", value: 229}, |
||||
{name: "武汉", value: 273}, |
||||
{name: "大庆", value: 279} |
||||
]) |
||||
}] |
||||
}; |
||||
|
||||
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。 |
||||
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> |
@ -1,238 +0,0 @@ |
||||
<!doctype html> |
||||
<html class="x-admin-sm"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>后台登录-X-admin2.1</title> |
||||
<meta name="renderer" content="webkit|ie-comp|ie-stand"> |
||||
<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" /> |
||||
<meta http-equiv="Cache-Control" content="no-siteapp" /> |
||||
|
||||
<link rel="stylesheet" href="../assets/css/font.css"> |
||||
<link rel="stylesheet" href="../assets/css/xadmin.css"> |
||||
</head> |
||||
<body> |
||||
<div class="x-body"> |
||||
<blockquote class="layui-elem-quote"> |
||||
特别声明:ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。如需使用,详细了解可以访问官网 <a href="http://echarts.baidu.com/" style="color:red">ECharts</a>。 x-admin不承担任何版权问题。 |
||||
</blockquote> |
||||
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --> |
||||
<div id="main" style="width: 100%;height:400px;"></div> |
||||
<blockquote class="layui-elem-quote"> |
||||
注意:本案例的Echarts图表库由cdn引入,需要在线才能正常使用,如想离线,请至Echarts官网下载。 |
||||
</blockquote> |
||||
</div> |
||||
<script src="//cdn.bootcss.com/echarts/3.3.2/echarts.min.js" charset="utf-8"></script> |
||||
<script type="text/javascript"> |
||||
// 基于准备好的dom,初始化echarts实例 |
||||
var myChart = echarts.init(document.getElementById('main')); |
||||
|
||||
// 指定图表的配置项和数据 |
||||
option = { |
||||
tooltip : { |
||||
formatter: "{a} <br/>{c} {b}" |
||||
}, |
||||
toolbox: { |
||||
show: true, |
||||
feature: { |
||||
restore: {show: true}, |
||||
saveAsImage: {show: true} |
||||
} |
||||
}, |
||||
series : [ |
||||
{ |
||||
name: '速度', |
||||
type: 'gauge', |
||||
z: 3, |
||||
min: 0, |
||||
max: 220, |
||||
splitNumber: 11, |
||||
radius: '50%', |
||||
axisLine: { // 坐标轴线 |
||||
lineStyle: { // 属性lineStyle控制线条样式 |
||||
width: 10 |
||||
} |
||||
}, |
||||
axisTick: { // 坐标轴小标记 |
||||
length: 15, // 属性length控制线长 |
||||
lineStyle: { // 属性lineStyle控制线条样式 |
||||
color: 'auto' |
||||
} |
||||
}, |
||||
splitLine: { // 分隔线 |
||||
length: 20, // 属性length控制线长 |
||||
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式 |
||||
color: 'auto' |
||||
} |
||||
}, |
||||
title : { |
||||
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE |
||||
fontWeight: 'bolder', |
||||
fontSize: 20, |
||||
fontStyle: 'italic' |
||||
} |
||||
}, |
||||
detail : { |
||||
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE |
||||
fontWeight: 'bolder' |
||||
} |
||||
}, |
||||
data:[{value: 40, name: 'km/h'}] |
||||
}, |
||||
{ |
||||
name: '转速', |
||||
type: 'gauge', |
||||
center: ['20%', '55%'], // 默认全局居中 |
||||
radius: '35%', |
||||
min:0, |
||||
max:7, |
||||
endAngle:45, |
||||
splitNumber:7, |
||||
axisLine: { // 坐标轴线 |
||||
lineStyle: { // 属性lineStyle控制线条样式 |
||||
width: 8 |
||||
} |
||||
}, |
||||
axisTick: { // 坐标轴小标记 |
||||
length:12, // 属性length控制线长 |
||||
lineStyle: { // 属性lineStyle控制线条样式 |
||||
color: 'auto' |
||||
} |
||||
}, |
||||
splitLine: { // 分隔线 |
||||
length:20, // 属性length控制线长 |
||||
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式 |
||||
color: 'auto' |
||||
} |
||||
}, |
||||
pointer: { |
||||
width:5 |
||||
}, |
||||
title: { |
||||
offsetCenter: [0, '-30%'], // x, y,单位px |
||||
}, |
||||
detail: { |
||||
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE |
||||
fontWeight: 'bolder' |
||||
} |
||||
}, |
||||
data:[{value: 1.5, name: 'x1000 r/min'}] |
||||
}, |
||||
{ |
||||
name: '油表', |
||||
type: 'gauge', |
||||
center: ['77%', '50%'], // 默认全局居中 |
||||
radius: '25%', |
||||
min: 0, |
||||
max: 2, |
||||
startAngle: 135, |
||||
endAngle: 45, |
||||
splitNumber: 2, |
||||
axisLine: { // 坐标轴线 |
||||
lineStyle: { // 属性lineStyle控制线条样式 |
||||
width: 8 |
||||
} |
||||
}, |
||||
axisTick: { // 坐标轴小标记 |
||||
splitNumber: 5, |
||||
length: 10, // 属性length控制线长 |
||||
lineStyle: { // 属性lineStyle控制线条样式 |
||||
color: 'auto' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
formatter:function(v){ |
||||
switch (v + '') { |
||||
case '0' : return 'E'; |
||||
case '1' : return 'Gas'; |
||||
case '2' : return 'F'; |
||||
} |
||||
} |
||||
}, |
||||
splitLine: { // 分隔线 |
||||
length: 15, // 属性length控制线长 |
||||
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式 |
||||
color: 'auto' |
||||
} |
||||
}, |
||||
pointer: { |
||||
width:2 |
||||
}, |
||||
title : { |
||||
show: false |
||||
}, |
||||
detail : { |
||||
show: false |
||||
}, |
||||
data:[{value: 0.5, name: 'gas'}] |
||||
}, |
||||
{ |
||||
name: '水表', |
||||
type: 'gauge', |
||||
center : ['77%', '50%'], // 默认全局居中 |
||||
radius : '25%', |
||||
min: 0, |
||||
max: 2, |
||||
startAngle: 315, |
||||
endAngle: 225, |
||||
splitNumber: 2, |
||||
axisLine: { // 坐标轴线 |
||||
lineStyle: { // 属性lineStyle控制线条样式 |
||||
width: 8 |
||||
} |
||||
}, |
||||
axisTick: { // 坐标轴小标记 |
||||
show: false |
||||
}, |
||||
axisLabel: { |
||||
formatter:function(v){ |
||||
switch (v + '') { |
||||
case '0' : return 'H'; |
||||
case '1' : return 'Water'; |
||||
case '2' : return 'C'; |
||||
} |
||||
} |
||||
}, |
||||
splitLine: { // 分隔线 |
||||
length: 15, // 属性length控制线长 |
||||
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式 |
||||
color: 'auto' |
||||
} |
||||
}, |
||||
pointer: { |
||||
width:2 |
||||
}, |
||||
title: { |
||||
show: false |
||||
}, |
||||
detail: { |
||||
show: false |
||||
}, |
||||
data:[{value: 0.5, name: 'gas'}] |
||||
} |
||||
] |
||||
}; |
||||
|
||||
setInterval(function (){ |
||||
option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0; |
||||
option.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0; |
||||
option.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0; |
||||
option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0; |
||||
myChart.setOption(option,true); |
||||
},2000); |
||||
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。 |
||||
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> |
@ -1,33 +0,0 @@ |
||||
<!doctype html> |
||||
<html class="x-admin-sm"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>后台登录-X-admin2.1</title> |
||||
<meta name="renderer" content="webkit|ie-comp|ie-stand"> |
||||
<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" /> |
||||
<meta http-equiv="Cache-Control" content="no-siteapp" /> |
||||
|
||||
<link rel="stylesheet" href="../assets/css/font.css"> |
||||
<link rel="stylesheet" href="../assets/css/xadmin.css"> |
||||
</head> |
||||
<body> |
||||
<div class="layui-container"> |
||||
<div class="fly-panel"> |
||||
<div class="fly-none"> |
||||
<h2><i class="layui-icon layui-icon-404"></i></h2> |
||||
<p>页面或者数据被<a href=""> 纸飞机 </a>运到火星了,啥都看不到了…</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<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> |
@ -1,68 +0,0 @@ |
||||
<!doctype html> |
||||
<html class="x-admin-sm"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>后台登录-X-admin2.1</title> |
||||
<meta name="renderer" content="webkit|ie-comp|ie-stand"> |
||||
<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" /> |
||||
<meta http-equiv="Cache-Control" content="no-siteapp" /> |
||||
<link rel="stylesheet" href="../assets/css/font.css"> |
||||
<link rel="stylesheet" href="../assets/css/xadmin.css"> |
||||
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> |
||||
<script src="../assets/lib/layui/layui.js" charset="utf-8"></script> |
||||
<script type="text/javascript" src="../assets/js/xadmin.js"></script> |
||||
<script type="text/javascript" src="../assets/js/cookie.js"></script> |
||||
|
||||
</head> |
||||
<body class="login-bg"> |
||||
|
||||
<div class="login layui-anim layui-anim-up"> |
||||
<div class="message">x-admin2.0-管理登录</div> |
||||
<div id="darkbannerwrap"></div> |
||||
|
||||
<form method="post" class="layui-form" > |
||||
<input name="username" placeholder="用户名" type="text" lay-verify="required" class="layui-input" > |
||||
<hr class="hr15"> |
||||
<input name="password" lay-verify="required" placeholder="密码" type="password" class="layui-input"> |
||||
<hr class="hr15"> |
||||
<input value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit"> |
||||
<hr class="hr20" > |
||||
</form> |
||||
</div> |
||||
|
||||
<script> |
||||
$(function () { |
||||
layui.use('form', function(){ |
||||
var form = layui.form; |
||||
// layer.msg('玩命卖萌中', function(){ |
||||
// //关闭后的操作 |
||||
// }); |
||||
//监听提交 |
||||
form.on('submit(login)', function(data){ |
||||
// alert(888) |
||||
layer.msg(JSON.stringify(data.field),function(){ |
||||
location.href='index.html' |
||||
}); |
||||
return false; |
||||
}); |
||||
}); |
||||
}) |
||||
|
||||
|
||||
</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> |
@ -1,123 +0,0 @@ |
||||
<!DOCTYPE html> |
||||
<html class="x-admin-sm"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>欢迎页面-X-admin2.1</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="../assets/css/font.css"> |
||||
<link rel="stylesheet" href="../assets/css/xadmin.css"> |
||||
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> |
||||
<script type="text/javascript" src="../assets/lib/layui/layui.js" charset="utf-8"></script> |
||||
<script type="text/javascript" src="../assets/js/xadmin.js"></script> |
||||
<script type="text/javascript" src="../assets/js/cookie.js"></script> |
||||
<!-- 让IE8/9支持媒体查询,从而兼容栅格 --> |
||||
<!--[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="x-body"> |
||||
<form class="layui-form"> |
||||
<div class="layui-form-item"> |
||||
<label for="L_email" class="layui-form-label"> |
||||
<span class="x-red">*</span>邮箱 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="text" id="L_email" name="email" required="" lay-verify="email" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
<div class="layui-form-mid layui-word-aux"> |
||||
<span class="x-red">*</span>将会成为您唯一的登入名 |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="L_username" class="layui-form-label"> |
||||
<span class="x-red">*</span>昵称 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="text" id="L_username" name="username" required="" lay-verify="nikename" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="L_pass" class="layui-form-label"> |
||||
<span class="x-red">*</span>密码 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="password" id="L_pass" name="pass" required="" lay-verify="pass" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
<div class="layui-form-mid layui-word-aux"> |
||||
6到16个字符 |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="L_repass" class="layui-form-label"> |
||||
<span class="x-red">*</span>确认密码 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="password" id="L_repass" name="repass" required="" lay-verify="repass" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="L_repass" class="layui-form-label"> |
||||
</label> |
||||
<button class="layui-btn" lay-filter="add" lay-submit=""> |
||||
增加 |
||||
</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<script> |
||||
layui.use(['form','layer'], function(){ |
||||
$ = layui.jquery; |
||||
var form = layui.form |
||||
,layer = layui.layer; |
||||
|
||||
//自定义验证规则 |
||||
form.verify({ |
||||
nikename: function(value){ |
||||
if(value.length < 5){ |
||||
return '昵称至少得5个字符啊'; |
||||
} |
||||
} |
||||
,pass: [/(.+){6,12}$/, '密码必须6到12位'] |
||||
,repass: function(value){ |
||||
if($('#L_pass').val()!=$('#L_repass').val()){ |
||||
return '两次密码不一致'; |
||||
} |
||||
} |
||||
}); |
||||
|
||||
//监听提交 |
||||
form.on('submit(add)', function(data){ |
||||
console.log(data); |
||||
//发异步,把数据提交给php |
||||
layer.alert("增加成功", {icon: 6},function () { |
||||
//关闭当前frame |
||||
x_admin_close(); |
||||
|
||||
// 可以对父窗口进行刷新 |
||||
x_admin_father_reload(); |
||||
}); |
||||
return false; |
||||
}); |
||||
|
||||
|
||||
}); |
||||
</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> |
@ -1,122 +0,0 @@ |
||||
<!DOCTYPE html> |
||||
<html class="x-admin-sm"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>欢迎页面-X-admin2.1</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="../assets/css/font.css"> |
||||
<link rel="stylesheet" href="../assets/css/xadmin.css"> |
||||
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> |
||||
<script type="text/javascript" src="../assets/lib/layui/layui.js" charset="utf-8"></script> |
||||
<script type="text/javascript" src="../assets/js/xadmin.js"></script> |
||||
<script type="text/javascript" src="../assets/js/cookie.js"></script> |
||||
<!-- 让IE8/9支持媒体查询,从而兼容栅格 --> |
||||
<!--[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="x-body"> |
||||
<form class="layui-form"> |
||||
<div class="layui-form-item"> |
||||
<label for="L_email" class="layui-form-label"> |
||||
<span class="x-red">*</span>邮箱 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="text" id="L_email" name="email" required="" lay-verify="email" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
<div class="layui-form-mid layui-word-aux"> |
||||
<span class="x-red">*</span>将会成为您唯一的登入名 |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="L_username" class="layui-form-label"> |
||||
<span class="x-red">*</span>昵称 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="text" id="L_username" name="username" required="" lay-verify="nikename" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="L_pass" class="layui-form-label"> |
||||
<span class="x-red">*</span>密码 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="password" id="L_pass" name="pass" required="" lay-verify="pass" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
<div class="layui-form-mid layui-word-aux"> |
||||
6到16个字符 |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="L_repass" class="layui-form-label"> |
||||
<span class="x-red">*</span>确认密码 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="password" id="L_repass" name="repass" required="" lay-verify="repass" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="L_repass" class="layui-form-label"> |
||||
</label> |
||||
<button class="layui-btn" lay-filter="add" lay-submit=""> |
||||
增加 |
||||
</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<script> |
||||
layui.use(['form','layer'], function(){ |
||||
$ = layui.jquery; |
||||
var form = layui.form |
||||
,layer = layui.layer; |
||||
|
||||
//自定义验证规则 |
||||
form.verify({ |
||||
nikename: function(value){ |
||||
if(value.length < 5){ |
||||
return '昵称至少得5个字符啊'; |
||||
} |
||||
} |
||||
,pass: [/(.+){6,12}$/, '密码必须6到12位'] |
||||
,repass: function(value){ |
||||
if($('#L_pass').val()!=$('#L_repass').val()){ |
||||
return '两次密码不一致'; |
||||
} |
||||
} |
||||
}); |
||||
|
||||
//监听提交 |
||||
form.on('submit(add)', function(data){ |
||||
console.log(data); |
||||
//发异步,把数据提交给php |
||||
layer.alert("增加成功", {icon: 6},function () { |
||||
// 获得frame索引 |
||||
var index = parent.layer.getFrameIndex(window.name); |
||||
//关闭当前frame |
||||
parent.layer.close(index); |
||||
}); |
||||
return false; |
||||
}); |
||||
|
||||
|
||||
}); |
||||
</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> |
File diff suppressed because it is too large
Load Diff
@ -1,125 +0,0 @@ |
||||
<!DOCTYPE html> |
||||
<html class="x-admin-sm"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>欢迎页面-X-admin2.1</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="../assets/css/font.css"> |
||||
<link rel="stylesheet" href="../assets/css/xadmin.css"> |
||||
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> |
||||
<script type="text/javascript" src="../assets/lib/layui/layui.js" charset="utf-8"></script> |
||||
<script type="text/javascript" src="../assets/js/xadmin.js"></script> |
||||
<script type="text/javascript" src="../assets/js/cookie.js"></script> |
||||
<!-- 让IE8/9支持媒体查询,从而兼容栅格 --> |
||||
<!--[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 class=""> |
||||
<div class="x-nav"> |
||||
<span class="layui-breadcrumb"> |
||||
<a href="">首页</a> |
||||
<a href="">演示</a> |
||||
<a> |
||||
<cite>导航元素</cite></a> |
||||
</span> |
||||
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新"> |
||||
<i class="layui-icon" style="line-height:30px">ဂ</i></a> |
||||
</div> |
||||
<div class="x-body"> |
||||
<div class="layui-row"> |
||||
<form class="layui-form layui-col-md12 x-so"> |
||||
<input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start"> |
||||
<input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end"> |
||||
<input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input"> |
||||
<button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon"></i></button> |
||||
</form> |
||||
</div> |
||||
<table class="layui-table" lay-data="{url:'./user.json',page:true,toolbar: '#toolbarDemo',id:'test'}" lay-filter="test"> |
||||
<thead> |
||||
<tr> |
||||
<th lay-data="{type:'checkbox'}">ID</th> |
||||
<th lay-data="{field:'id', width:80, sort: true}">ID</th> |
||||
<th lay-data="{field:'username', width:120, sort: true, edit: 'text'}">用户名</th> |
||||
<th lay-data="{field:'email', edit: 'text', minWidth: 150}">邮箱</th> |
||||
<th lay-data="{field:'sex', width:80,templet: '#switchTpl'}">性别</th> |
||||
<th lay-data="{field:'city', edit: 'text', minWidth: 100}">城市</th> |
||||
<th lay-data="{field:'experience', sort: true, edit: 'text'}">积分</th> |
||||
</tr> |
||||
</thead> |
||||
</table> |
||||
|
||||
</div> |
||||
<script type="text/html" id="toolbarDemo"> |
||||
<div class="layui-btn-container"> |
||||
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button> |
||||
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button> |
||||
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> |
||||
</div> |
||||
</script> |
||||
<script type="text/html" id="switchTpl"> |
||||
<!-- 这里的 checked 的状态只是演示 --> |
||||
<input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.id == 10003 ? 'checked' : '' }}> |
||||
</script> |
||||
<script> |
||||
layui.use('laydate', function(){ |
||||
var laydate = layui.laydate; |
||||
|
||||
//执行一个laydate实例 |
||||
laydate.render({ |
||||
elem: '#start' //指定元素 |
||||
}); |
||||
|
||||
//执行一个laydate实例 |
||||
laydate.render({ |
||||
elem: '#end' //指定元素 |
||||
}); |
||||
|
||||
|
||||
}); |
||||
</script> |
||||
<script> |
||||
layui.use('table', function(){ |
||||
var table = layui.table; |
||||
|
||||
//监听单元格编辑 |
||||
table.on('edit(test)', function(obj){ |
||||
var value = obj.value //得到修改后的值 |
||||
,data = obj.data //得到所在行所有键值 |
||||
,field = obj.field; //得到字段 |
||||
layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为:'+ value); |
||||
}); |
||||
|
||||
//头工具栏事件 |
||||
table.on('toolbar(test)', function(obj){ |
||||
var checkStatus = table.checkStatus(obj.config.id); |
||||
switch(obj.event){ |
||||
case 'getCheckData': |
||||
var data = checkStatus.data; |
||||
layer.alert(JSON.stringify(data)); |
||||
break; |
||||
case 'getCheckLength': |
||||
var data = checkStatus.data; |
||||
layer.msg('选中了:'+ data.length + ' 个'); |
||||
break; |
||||
case 'isAll': |
||||
layer.msg(checkStatus.isAll ? '全选': '未全选'); |
||||
break; |
||||
}; |
||||
}); |
||||
}); |
||||
</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> |
@ -1,103 +0,0 @@ |
||||
<!DOCTYPE html> |
||||
<html class="x-admin-sm"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>欢迎页面-X-admin2.1</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="../assets/css/font.css"> |
||||
<link rel="stylesheet" href="../assets/css/xadmin.css"> |
||||
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> |
||||
<script type="text/javascript" src="../assets/lib/layui/layui.js" charset="utf-8"></script> |
||||
<script type="text/javascript" src="../assets/js/xadmin.js"></script> |
||||
<script type="text/javascript" src="../assets/js/cookie.js"></script> |
||||
<!-- 让IE8/9支持媒体查询,从而兼容栅格 --> |
||||
<!--[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="x-body"> |
||||
<form class="layui-form"> |
||||
<div class="layui-form-item"> |
||||
<label for="L_username" class="layui-form-label"> |
||||
昵称 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="text" id="L_username" name="username" disabled="" value="小明" class="layui-input"> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="L_repass" class="layui-form-label"> |
||||
<span class="x-red">*</span>旧密码 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="password" id="L_repass" name="oldpass" required="" lay-verify="required" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="L_pass" class="layui-form-label"> |
||||
<span class="x-red">*</span>新密码 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="password" id="L_pass" name="newpass" required="" lay-verify="required" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
<div class="layui-form-mid layui-word-aux"> |
||||
6到16个字符 |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="L_repass" class="layui-form-label"> |
||||
<span class="x-red">*</span>确认密码 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="password" id="L_repass" name="repass" required="" lay-verify="required" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="L_repass" class="layui-form-label"> |
||||
</label> |
||||
<button class="layui-btn" lay-filter="save" lay-submit=""> |
||||
增加 |
||||
</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<script> |
||||
layui.use(['form','layer'], function(){ |
||||
$ = layui.jquery; |
||||
var form = layui.form |
||||
,layer = layui.layer; |
||||
|
||||
//监听提交 |
||||
form.on('submit(save)', function(data){ |
||||
console.log(data); |
||||
//发异步,把数据提交给php |
||||
layer.alert("修改成功", {icon: 6},function () { |
||||
// 获得frame索引 |
||||
var index = parent.layer.getFrameIndex(window.name); |
||||
//关闭当前frame |
||||
parent.layer.close(index); |
||||
}); |
||||
return false; |
||||
}); |
||||
|
||||
|
||||
}); |
||||
</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> |
@ -1,185 +0,0 @@ |
||||
<!DOCTYPE html> |
||||
<html class="x-admin-sm"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>欢迎页面-X-admin2.1</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="../assets/css/font.css"> |
||||
<link rel="stylesheet" href="../assets/css/xadmin.css"> |
||||
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> |
||||
<script type="text/javascript" src="../assets/lib/layui/layui.js" charset="utf-8"></script> |
||||
<script type="text/javascript" src="../assets/js/xadmin.js"></script> |
||||
<script type="text/javascript" src="../assets/js/cookie.js"></script> |
||||
<!-- 让IE8/9支持媒体查询,从而兼容栅格 --> |
||||
<!--[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="x-body"> |
||||
<form class="layui-form"> |
||||
<div class="layui-form-item"> |
||||
<label for="username" class="layui-form-label"> |
||||
<span class="x-red">*</span>用户名 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="text" id="username" name="username" required="" lay-verify="required" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="username" class="layui-form-label"> |
||||
<span class="x-red">*</span>收货人 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="text" id="username" name="username" required="" lay-verify="required" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="phone" class="layui-form-label"> |
||||
<span class="x-red">*</span>手机 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="text" id="phone" name="phone" required="" lay-verify="phone" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="username" class="layui-form-label"> |
||||
<span class="x-red">*</span>收货地址 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="text" id="username" name="username" required="" lay-verify="required" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="username" class="layui-form-label"> |
||||
<span class="x-red">*</span>配送物流 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<select id="shipping" name="shipping" class="valid"> |
||||
<option value="shentong">申通物流</option> |
||||
<option value="shunfeng">顺丰物流</option> |
||||
</select> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="username" class="layui-form-label"> |
||||
<span class="x-red">*</span>支付方式 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<select name="contrller"> |
||||
<option>支付方式</option> |
||||
<option>支付宝</option> |
||||
<option>微信</option> |
||||
<option>货到付款</option> |
||||
</select> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="L_email" class="layui-form-label"> |
||||
<span class="x-red">*</span>发票抬头 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="text" id="L_email" name="email" required="" lay-verify="email" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
<div class="layui-form-mid layui-word-aux"> |
||||
<span class="x-red">*</span> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item layui-form-text"> |
||||
<label for="desc" class="layui-form-label"> |
||||
商品增加 |
||||
</label> |
||||
<div class="layui-input-block"> |
||||
<table class="layui-table"> |
||||
<tbody> |
||||
<tr> |
||||
<td>haier海尔 BC-93TMPF 93升单门冰箱</div></td> |
||||
<td>0.01</div></td> |
||||
<td>984</div></td> |
||||
<td>1</td> |
||||
<td>删除</td> |
||||
</tr> |
||||
<tr> |
||||
<td>haier海尔 BC-93TMPF 93升单门冰箱</div></td> |
||||
<td>0.01</div></td> |
||||
<td>984</div></td> |
||||
<td>1</td> |
||||
<td>删除</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item layui-form-text"> |
||||
<label for="desc" class="layui-form-label"> |
||||
描述 |
||||
</label> |
||||
<div class="layui-input-block"> |
||||
<textarea placeholder="请输入内容" id="desc" name="desc" class="layui-textarea"></textarea> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<label for="L_repass" class="layui-form-label"> |
||||
</label> |
||||
<button class="layui-btn" lay-filter="add" lay-submit=""> |
||||
增加 |
||||
</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<script> |
||||
layui.use(['form','layer'], function(){ |
||||
$ = layui.jquery; |
||||
var form = layui.form |
||||
,layer = layui.layer; |
||||
|
||||
//自定义验证规则 |
||||
form.verify({ |
||||
nikename: function(value){ |
||||
if(value.length < 5){ |
||||
return '昵称至少得5个字符啊'; |
||||
} |
||||
} |
||||
,pass: [/(.+){6,12}$/, '密码必须6到12位'] |
||||
,repass: function(value){ |
||||
if($('#L_pass').val()!=$('#L_repass').val()){ |
||||
return '两次密码不一致'; |
||||
} |
||||
} |
||||
}); |
||||
|
||||
//监听提交 |
||||
form.on('submit(add)', function(data){ |
||||
console.log(data); |
||||
//发异步,把数据提交给php |
||||
layer.alert("增加成功", {icon: 6},function () { |
||||
// 获得frame索引 |
||||
var index = parent.layer.getFrameIndex(window.name); |
||||
//关闭当前frame |
||||
parent.layer.close(index); |
||||
}); |
||||
return false; |
||||
}); |
||||
|
||||
|
||||
}); |
||||
</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> |
@ -1,147 +0,0 @@ |
||||
<!DOCTYPE html> |
||||
<html class="x-admin-sm"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>欢迎页面-X-admin2.1</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="../assets/css/font.css"> |
||||
<link rel="stylesheet" href="../assets/css/xadmin.css"> |
||||
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> |
||||
<script type="text/javascript" src="../assets/lib/layui/layui.js" charset="utf-8"></script> |
||||
<script type="text/javascript" src="../assets/js/xadmin.js"></script> |
||||
<script type="text/javascript" src="../assets/js/cookie.js"></script> |
||||
<!-- 让IE8/9支持媒体查询,从而兼容栅格 --> |
||||
<!--[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="x-body"> |
||||
<form action="" method="post" class="layui-form layui-form-pane"> |
||||
<div class="layui-form-item"> |
||||
<label for="name" class="layui-form-label"> |
||||
<span class="x-red">*</span>角色名 |
||||
</label> |
||||
<div class="layui-input-inline"> |
||||
<input type="text" id="name" name="name" required="" lay-verify="required" |
||||
autocomplete="off" class="layui-input"> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item layui-form-text"> |
||||
<label class="layui-form-label"> |
||||
拥有权限 |
||||
</label> |
||||
<table class="layui-table layui-input-block"> |
||||
<tbody> |
||||
<tr> |
||||
<td> |
||||
<input type="checkbox" name="like1[write]" lay-skin="primary" lay-filter="father" title="用户管理"> |
||||
</td> |
||||
<td> |
||||
<div class="layui-input-block"> |
||||
<input name="id[]" lay-skin="primary" type="checkbox" title="用户停用" value="2"> |
||||
<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="用户删除"> |
||||
<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="用户修改"> |
||||
<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="用户改密"> |
||||
<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="用户列表"> |
||||
<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="用户改密"> |
||||
<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="用户列表"> |
||||
<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="用户改密"> |
||||
<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="用户列表"> |
||||
</div> |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td> |
||||
|
||||
<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="文章管理" lay-filter="father"> |
||||
</td> |
||||
<td> |
||||
<div class="layui-input-block"> |
||||
<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="文章添加"> |
||||
<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="文章删除"> |
||||
<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="文章修改"> |
||||
<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="文章改密"> |
||||
<input name="id[]" lay-skin="primary" type="checkbox" value="2" title="文章列表"> |
||||
</div> |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
<div class="layui-form-item layui-form-text"> |
||||
<label for="desc" class="layui-form-label"> |
||||
描述 |
||||
</label> |
||||
<div class="layui-input-block"> |
||||
<textarea placeholder="请输入内容" id="desc" name="desc" class="layui-textarea"></textarea> |
||||
</div> |
||||
</div> |
||||
<div class="layui-form-item"> |
||||
<button class="layui-btn" lay-submit="" lay-filter="add">增加</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<script> |
||||
layui.use(['form','layer'], function(){ |
||||
$ = layui.jquery; |
||||
var form = layui.form |
||||
,layer = layui.layer; |
||||
|
||||
//自定义验证规则 |
||||
form.verify({ |
||||
nikename: function(value){ |
||||
if(value.length < 5){ |
||||
return '昵称至少得5个字符啊'; |
||||
} |
||||
} |
||||
,pass: [/(.+){6,12}$/, '密码必须6到12位'] |
||||
,repass: function(value){ |
||||
if($('#L_pass').val()!=$('#L_repass').val()){ |
||||
return '两次密码不一致'; |
||||
} |
||||
} |
||||
}); |
||||
|
||||
//监听提交 |
||||
form.on('submit(add)', function(data){ |
||||
console.log(data); |
||||
//发异步,把数据提交给php |
||||
layer.alert("增加成功", {icon: 6},function () { |
||||
// 获得frame索引 |
||||
var index = parent.layer.getFrameIndex(window.name); |
||||
//关闭当前frame |
||||
parent.layer.close(index); |
||||
}); |
||||
return false; |
||||
}); |
||||
|
||||
|
||||
form.on('checkbox(father)', function(data){ |
||||
|
||||
if(data.elem.checked){ |
||||
$(data.elem).parent().siblings('td').find('input').prop("checked", true); |
||||
form.render(); |
||||
}else{ |
||||
$(data.elem).parent().siblings('td').find('input').prop("checked", false); |
||||
form.render(); |
||||
} |
||||
}); |
||||
|
||||
|
||||
}); |
||||
</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> |
File diff suppressed because it is too large
Load Diff
@ -1,95 +0,0 @@ |
||||
{ |
||||
"code": 0 |
||||
,"msg": "" |
||||
,"count": 3000000 |
||||
,"data": [{ |
||||
"id": "10001" |
||||
,"username": "杜甫" |
||||
,"email": "xianxin@layui.com" |
||||
,"sex": "男" |
||||
,"city": "浙江杭州" |
||||
,"sign": "点击此处,显示更多。当内容超出时,点击单元格会自动显示更多内容。" |
||||
,"experience": "116" |
||||
,"ip": "192.168.0.8" |
||||
,"logins": "108" |
||||
,"joinTime": "2016-10-14" |
||||
}, { |
||||
"id": "10002" |
||||
,"username": "李白" |
||||
,"email": "xianxin@layui.com" |
||||
,"sex": "男" |
||||
,"city": "浙江杭州" |
||||
,"sign": "君不见,黄河之水天上来,奔流到海不复回。 君不见,高堂明镜悲白发,朝如青丝暮成雪。 人生得意须尽欢,莫使金樽空对月。 天生我材必有用,千金散尽还复来。 烹羊宰牛且为乐,会须一饮三百杯。 岑夫子,丹丘生,将进酒,杯莫停。 与君歌一曲,请君为我倾耳听。(倾耳听 一作:侧耳听) 钟鼓馔玉不足贵,但愿长醉不复醒。(不足贵 一作:何足贵;不复醒 一作:不愿醒/不用醒) 古来圣贤皆寂寞,惟有饮者留其名。(古来 一作:自古;惟 通:唯) 陈王昔时宴平乐,斗酒十千恣欢谑。 主人何为言少钱,径须沽取对君酌。 五花马,千金裘,呼儿将出换美酒,与尔同销万古愁。" |
||||
,"experience": "12" |
||||
,"ip": "192.168.0.8" |
||||
,"logins": "106" |
||||
,"joinTime": "2016-10-14" |
||||
,"LAY_CHECKED": true |
||||
}, { |
||||
"id": "10003" |
||||
,"username": "王勃" |
||||
,"email": "xianxin@layui.com" |
||||
,"sex": "男" |
||||
,"city": "浙江杭州" |
||||
,"sign": "人生恰似一场修行" |
||||
,"experience": "65" |
||||
,"ip": "192.168.0.8" |
||||
,"logins": "106" |
||||
,"joinTime": "2016-10-14" |
||||
}, { |
||||
"id": "10004" |
||||
,"username": "李清照" |
||||
,"email": "xianxin@layui.com" |
||||
,"sex": "女" |
||||
,"city": "浙江杭州" |
||||
,"sign": "人生恰似一场修行" |
||||
,"experience": "666" |
||||
,"ip": "192.168.0.8" |
||||
,"logins": "106" |
||||
,"joinTime": "2016-10-14" |
||||
}, { |
||||
"id": "10005" |
||||
,"username": "冰心" |
||||
,"email": "xianxin@layui.com" |
||||
,"sex": "女" |
||||
,"city": "浙江杭州" |
||||
,"sign": "人生恰似一场修行" |
||||
,"experience": "86" |
||||
,"ip": "192.168.0.8" |
||||
,"logins": "106" |
||||
,"joinTime": "2016-10-14" |
||||
}, { |
||||
"id": "10006" |
||||
,"username": "贤心" |
||||
,"email": "xianxin@layui.com" |
||||
,"sex": "男" |
||||
,"city": "浙江杭州" |
||||
,"sign": "人生恰似一场修行" |
||||
,"experience": "12" |
||||
,"ip": "192.168.0.8" |
||||
,"logins": "106" |
||||
,"joinTime": "2016-10-14" |
||||
}, { |
||||
"id": "10007" |
||||
,"username": "贤心" |
||||
,"email": "xianxin@layui.com" |
||||
,"sex": "男" |
||||
,"city": "浙江杭州" |
||||
,"sign": "人生恰似一场修行" |
||||
,"experience": "16" |
||||
,"ip": "192.168.0.8" |
||||
,"logins": "106" |
||||
,"joinTime": "2016-10-14" |
||||
}, { |
||||
"id": "10008" |
||||
,"username": "贤心" |
||||
,"email": "xianxin@layui.com" |
||||
,"sex": "男" |
||||
,"city": "浙江杭州" |
||||
,"sign": "人生恰似一场修行" |
||||
,"experience": "106" |
||||
,"ip": "192.168.0.8" |
||||
,"logins": "106" |
||||
,"joinTime": "2016-10-14" |
||||
}] |
||||
} |
@ -0,0 +1,33 @@ |
||||
package com.gitee.sop.adminserver.config; |
||||
|
||||
import org.springframework.context.annotation.Configuration; |
||||
import org.springframework.stereotype.Controller; |
||||
import org.springframework.web.bind.annotation.GetMapping; |
||||
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; |
||||
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; |
||||
|
||||
@Configuration |
||||
public class WebConfig extends WebMvcConfigurerAdapter { |
||||
|
||||
@Override |
||||
public void addResourceHandlers(ResourceHandlerRegistry registry) { |
||||
//配置映射关系
|
||||
registry.addResourceHandler("/conf/**").addResourceLocations("classpath:/META-INF/resources/webjars/sop-admin-front/1.0.0-SNAPSHOT/"); |
||||
} |
||||
|
||||
@Controller |
||||
public static class ConfController { |
||||
|
||||
private static final String REDIRECT_INDEX = "redirect:/conf/index.html"; |
||||
|
||||
@GetMapping("/") |
||||
public String index() { |
||||
return REDIRECT_INDEX; |
||||
} |
||||
|
||||
@GetMapping("/conf") |
||||
public String conf() { |
||||
return REDIRECT_INDEX; |
||||
} |
||||
} |
||||
} |
Loading…
Reference in new issue