Layui+SSM+echarts+IDEA

文件之间的作用及关系

参考来源：SSM各个层的作用

echarts图表的插入与运用

layui模板中有很多echarts图表，对于layui和echarts不熟悉的新手来说，通过直接对echarts自带的表格修改的方式插入表格相对简单。下面展示修改echarts表格数据的方法。

1.引入渲染图表的js文件。
layui渲染表格的js文件通常在resources/statiec.layuiadmin/modules文件夹下，先查看想要的图表效果（可通过layui演示找到想要的的图表效果），将和目标图表的渲染结果相似的js文件复制一份，引入js文件后，对js文件进行修改。
引入js文件代码：（以demo.js为例）

<script>
    layui.config({
        base: 'layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'demo']);
</script>

修改js文件代码：(此js文件为动态表格数据效果)

//折线图
  layui.use(['carousel', 'echarts'], function () {
    var $ = layui.$
        , carousel = layui.carousel
        , echarts = layui.echarts;
    var flag = 1;
    var ratedom = [];
    var timedom = [];
    $.ajax({
      type: "GET",//get方式获取
      url: "/dysafety",//设置显示图表的url
      dataType: "json",
      async: false,
      success: function (result) {
        for (var i = 0; i < 10; i++) {
          ratedom.push(result[i].rate);//开始状态：取出数据库中10个数据
          timedom.push(result[i].time);//rate、time为对应关系
        }
      },
      error: function (errorMsg) {//设置echarts获取数据失败的提示
        alert("出错了");
      }
    });

    function refresh() {//动态获取数据库中数据的函数
      $.ajax({
        url: "/refresh",
        dataType: "json",
        async: false,
        success: function (result) {
          for (var i =0;i<flag+1 && flag<50; i++) {
            ratedom.shift();//每次i增1，移出图中最左边的点，右边移进新的数据点
            ratedom.shift();
            time.push(result[i].time);
            timedom.push(result[i].timedom);
          }
        },
        error: function (errorMsg) {
          alert("获取后台数据失败！");
        }
      });
      flag++;//逐个取出数据点
    }
    var echnormline = [], normline = [
      {
        title: {
          text: '正确率'
        },
        tooltip: {
          trigger: 'axis'
        },
        calculable: true,
        itemStyle: {
          normal: {
            color: '#6cb041',
            lineStyle: {
              width: 5//设置线条粗细
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: time
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value} %',//添加的显示效果：x%
              show:true
            },
            axisLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '正确率',
            type: 'line',
            data: ratedom
          },
        ]
      }
    ]
        , elemnormline = $('#LAY-index-normline').children('div')
        , rendernormline = function (index) {
      echnormline[index] = echarts.init(elemnormline[index], layui.echartsTheme);
      echnormline[index].setOption(normline[index]);
    };
    if (!elemnormline[0]) return;
    rendernormline(0);
    var dk = window.setInterval(function () {
    //页面刷新，每3s刷新一次，每次移进一个数据点，实现数据的动态变化
      refresh();
      rendernormline(0).setOption({
        xAxis: {
          data: timedom
        },
        series: [{
          name: '正确率',
          data: id
        }]
      });
      if (flag > 1) {
        window.clearInterval(dk);
      }
    }, 3000);
  });
    exports('demo', {});
  });

最后显示图表效果。

正确率随着时间变化。(时间和正确率都是数据库中的数据)

layui表单提交

主要代码讲解如下：

<script src="layuiadmin/script/type.js"></script>//引入要使用的js文件，此js文件存放表格的各种信息，即渲染table
<script>
    layui.use(['layer', 'form','table'], function () {//使用layui中layer、form、table等模块
        var layer = layui.layer
            , form = layui.form
            ,table=layui.table;
        var $ = layui.jquery;
        form.on('submit(insert)',function(data){//触发表单提交的按钮id为insert,data为表单获取的数据
            $.post('update',data.field,function (res) {//update是controller中设置修改数据的url
                if (res==1) {//data.field为type.js中渲染表格的列名，res是设置的update后返回的数据名（返回结果为1，说明修改数据成功）
                    layer.open({//设置弹窗进行操作结果提示
                        type: 0,
                        title: '操作提示',
                        icon: 1,
                        content: "插入数据成功",
                        closeBtn: 0
                    });
                }
                else if(res==0){
                    layer.open({
                        type: 0,
                        title: '操作提示',
                        icon: 2,
                        content: "插入数据失败",
                        closeBtn: 0
                    });
                }
            });
            table.reload('search',{url:'/show'});//表格重载
            return false;
        });
    });
</script>
<script>
    //刷新表格
    function fl() {
        layui.use('table');
        var table=layui.table;
        table.reload('search',{url:'/show'});
    }
    //查询功能
    function search() {
        layui.use('table');
        var table=layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;
        layer.prompt({//查询输入框
            formType: 2,
            value: '',
            title: '输入时间',
            area: ['200px', '20px'] //自定义文本域宽高
        }, function(value, index, elem){
            table.reload('search',{url:'/select/'+value.toString()});//value.toString()获取输入的信息
            layer.close(index);
        });
    }
</script>

关于页面的美观效果的改进

1.fieldset的使用
fieldset 元素可将表单内的相关元素分组,使页面更加美观，代码简洁。

<fieldset>
        <legend>正确率</legend>
</fieldset>

2.固定div的位置

<div class="layui-input-block" style="position: fixed;left:0%;top:50%">

渲染表格—table.render()方法

layui.use('table', function(){
    var table = layui.table;
    table.render({
        elem: '#demo'//#+表格id------指明渲染的表格
        ,height: 500
        ,url: '/show' //数据接口
        ,page: false //是否开启分页
        ,cols: [[
            {field: 'id', title: '序号', width:'33%'},//分别为数据库列名、显示表格列名、某列占整个表格的宽度
            {field: 'time',title: '时间',width:'33%'},
            {field: 'rate',title: '正确率',width:'33%'}
        ]]
        ,id:'search'
    });
});

下面给出渲染数据table.render()的各种参数。

elem—指定原始table容器的选择器或DOM
cols—设置列的属性（列名、宽度、对应的数据库字段名）
data—设置已知数据。
width—设置容器宽度（百分比或宽度单位都可）。
page—是否开启分页（默认：false）
limit—开启每页后，每页显示的条数