layui框架实战案例(2)：LayUI表格与Echarts图表交互展示及PHP后台数据管理(搜索、翻页、动态显示)

引入外部文件

 <link rel="stylesheet" href="js/layui/css/layui.css" media="all">
    <script src="js/jquery.js" charset="utf-8"></script>
    <script src="js/echarts.min.js" charset="utf-8"></script>
    <script src="js/visual.js" charset="utf-8"></script>
    <script src="js/layui/layui.js" charset="utf-8"></script>

创建容器

<div class="demoTable">
    搜索ID：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>

<table class="layui-hide" id="test"></table>

执行代码

layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table;
        var util = layui.util;

        table.render({
            elem: '#test'
            , url: 'data.php'
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
            , limits: [5, 10, 15, 20]
            , toolbar: true
            , even: true
            , page: true
            , id: 'searchTable'
            , cols: [[
                {type: 'numbers'}
                , {field: 'vid', title: 'Id', sort: true}
                , {field: 'vname', title: '姓名', sort: true}
                , {field: 'vdata', title: '销量'}
                , {field: 'vtask', title: '任务'}
                , {field: 'vctime', title: '时间', templet: function (d) {return util.toDateString(d.vctime * 1000, "yyyy-MM-dd HH:mm:ss")}}

            ]]
            , done: function (res, curr, count) {
                console.log(res);
                var dataName = [], dataList = [];
                for (var i = 0; i < res.data.length; i++) {
                    dataName.push(res.data[i].vname);
                    dataList.push(res.data[i].vdata);
                }
                //渲染图表;
                echart1Str(dataName, dataList);
            }
        });

        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('searchTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        keys: demoReload.val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });

Echarts柱图函数

/**
 * Created by Administrator on 2020-08-02.
 */
function echart1Str(vname, dataList) {
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        grid: {
            top: '5%',
            right: '2%',
            left: '2%',
            bottom: '5%'
        },
        tooltip: {
            trigger: 'item',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        xAxis: [{
            type: 'category',
            data: vname,
            axisPointer: {
                type: 'line'
            },
            axisLine: {
                lineStyle: {
                    color: '#272456'
                }
            },
            axisLabel: {
                textStyle: {
                    fontSize: 12,
                    color: 'rgba(0,0,0,0.5)',
                }
            },
        }],
        yAxis: [{
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    fontSize: 12,
                    color: 'rgba(0,0,0,0.5)',
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#272456'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(0,0,0,0.2)'
                }
            }
        }],
        series: [{
            type: 'bar',
            data: dataList,
            barWidth: '50%',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#39e7d7'
                    }, {
                        offset: 1,
                        color: '#10A7DB'
                    }], false),
                    barBorderRadius: [5, 5, 0, 0],
                    /*shadowColor: 'rgba(0,255,225,1)',
                     shadowBlur: 4,*/
                }
            }
        }]
    };


    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });

}

PHP后台数据

<?php
//处理前台页面传过来的数据
@$p = $_GET['page'];//获取用户选择的页码
@$pagesize = $_GET['limit'];//获取用户选择的每页显示多少条数据
@$keys = $_GET['keys'];//获取用户选择的每页显示多少条数据

/*echo $p;
echo $pagesize;*/

//连接数据库
$dsn  = 'mysql:dbname=daishan;host=127.0.0.1';
$user = 'root';
$pass = 'root';
$pdo  = new PDO($dsn, $user, $pass);

/*总记录数*/
$sql1 = "select * from po_demo";
if ($keys != "") {
	$sql1 .= " WHERE vid =" . $keys;
}
$stmt1 = $pdo->query($sql1);


//查询数据
$res   = [];
$limit = ($p - 1) * $pagesize;//偏移量
$sql   = "select * from po_demo";
if ($keys != "") {
	$sql .= " WHERE vid =" . $keys;
}
$sql .= " order by vid";

if ($p != "") {
	$sql .= "  limit $limit,$pagesize";
}

$stmt         = $pdo->query($sql);
$res['code']  = 0;
$res['count'] = $stmt1->rowCount();
$res['msg']   = "";
$data         = $stmt->fetchAll("4");
$res['data']  = $data;
echo json_encode($res);

Done!