网页设计框架
bootstrap与layUI对比
- layui是国人开发的一套框架，2016年出来的，现在已更新到2.X版本了。比较新，轻量级，样式简单好看。
- bootstrap 相对来说是比较成熟的一个框架，现在已经更新到4.X版本。是一个很成熟的框架，这个大部分人一般都用过。
- layui 其实更偏向与后端开发人员使用，在服务端页面上有非常好的效果。
适合做后台框架。layui是提供给后端开发人员最好的ui框架，基于DOM驱动，在实现前端交互上比较麻烦，页面的增删改查都需要查询DOM元素。所以在不需要交互的时候，用layui还是不错的。 - bootstrap 在前端响应式方面做得很好，PC端和移动端表现都不错。做网站不错。
如果是类似官网，且需要同时满足PC端和移动端效果，bs表现很好。但是如果是要交互的网站，比如商城之类，vue显然更好，前后端分离。
安装与使用
可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。
layUI官网文档：https://www.layui.com/doc/
地址：http://www.layui.com/
下载完成后，可以看到如下架构：
├─css //css目录
│ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含layui.js和所有模块的合并文件layui后台模板下载地址：https://github.com/sentsin/layui/
layer和echarts插件
- layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验。
- 在中国可视化生态系统中，ECharts 通过提供方便丰富的可视化图表，极大缩短了用户与数据的距离。个人认为是最好用的可用来生成图表的插件。
案例
js文件引入：
<script src="js/jquery-1.11.1.min.js"></script>
<!-- 你必须先引入jQuery1.8或以上版本 -->
<script src="js/layer/layer.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.min.js"></script>页面内容：
<body>
<button id="test2">Layer+Echarts构建弹出层折线图</button>
<div id="speedChart" style="display: none;">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="speedChartMain" style="width: 600px; height: 400px;"></div>
</div>
<div id="dfd">
<span>Layer+Echarts构建弹出层折线图</span>
<p>Layer+Echarts构建弹出层折线图</p>
</div>
</body>js脚本：
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('speedChartMain'));
option = {
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);
//弹出一个页面层
$('#test2').on('click', function() {
layer.open({
title:'hello world',
type: 1,
shade: false,
area: ['620px', '460px'],
shadeClose: false, //点击遮罩关闭
content: $("#speedChart")
});
});
</script>预览：
当然以上是静态加载，我们平常使用最多的是异步加载，修改一下代码即可：
<div id="speedChart" style="display: none;">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="speedChartMain" style="width: 600px; height: 400px;"></div>
</div>
$(document).ready(function() {
option = {
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: []
};
//按钮提交表单数据
$("#subSpeed").click(function(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('speedChartMain'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
var url=$("#speedFrom").attr("action");
var times=[]; //時間数组（实际用来盛放X轴坐标值）
var speeds=[]; //速度数组（实际用来盛放Y坐标值）
$.post(url,$("#speedFrom").serialize(),
function(data, status){
if(data!=null){
for (var i = 0; i < data.length; i++) {
times.push(data[i].timeStamp);
speeds.push(data[i].speed);
}
//之前option中legend和 XAxis的data,series 为空，所以现在将数据填充进去
myChart.setOption({ //加载数据图表
legend: {
data:[$("#roads").val()]
},
xAxis: {
data: times
},
series: [{
// 根据名字对应到相应的系列
name: $("#roads").val(),
type:'line',
data: speeds
}]
});
}
layer.open({
title:'折线图',
type: 1,
shade: false,
area: ['620px', '460px'],
shadeClose: true, //点击遮罩关闭
content: $("#speedChart")
});
},"json");
});
});
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
