网页设计框架前台Bootstrap、后端LayUI，常用插件Layer+Echarts。

最新推荐文章于 2024-06-17 09:47:08 发布

weixin_45664706

最新推荐文章于 2024-06-17 09:47:08 发布

阅读量1.4k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_45664706/article/details/103823441

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

网页设计框架

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");
            });
        });

weixin_45664706

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
网页设计框架前台Bootstrap、后端LayUI，常用插件Layer+Echarts。

网页设计框架bootstrap与layUI对比layui是国人开发的一套框架，2016年出来的，现在已更新到2.X版本了。比较新，轻量级，样式简单好看。bootstrap 相对来说是比较成熟的一个框架，现在已经更新到4.X版本。是一个很成熟的框架，这个大部分人一般都用过。layui 其实更偏向与后端开发人员使用，在服务端页面上有非常好的效果。适合做后台框架。layui是提供给后端开发人...
复制链接

扫一扫