layui框架实战案例(4)：echarts数据可视化大屏联动钻取实例：基于layui.layer的筛选&隐藏/显示&弹出层缩放图表功能开发

​功能描述：​

1.echarts单例柱状图展示开发；

2.筛选按钮接口开发；

3.隐藏和显示echarts图表层开发；

4.点击弹出缩放图表功能开发(基于layui.layer弹出层插件);

代码如下：

一、引入文件：

<meta charset="UTF-8">
    <title>漏刻有时组建开发实例：Echarts联动钻取功能，筛选&隐藏/显示&弹出层</title>
    <script src="js/jquery.js">//官网下载;</script>
    <!--layui 弹出层-->
    <script src="js/layer/layer.js">//官网下载;</script>
    <script src="js/echarts.min.js">//官网下载;</script>
    <script src="js/visual.js"></script>
    <script src="js/run.js"></script>
    <link rel="stylesheet" href="css/common.css">

二、css 层叠样式表文件：common.css

body{
    margin: 0;
    padding: 0;
}
.main {
    width: 450px;
    margin: 10px auto;
}

#menu {
    height: 40px;
    line-height: 40px;
    background-color: #393D49;
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid #b7b7b7;
}

#menu span {
    float: right;
    color: #fff;
    margin: 0 10px;
    cursor: pointer;
}

#search {
    border: 2px solid #4b505f;
    height: 42px;
    line-height: 42px;
    position: relative;
    z-index: 9999;
    background-color: #4b505f;
    display: none;
}

#search span {
    margin: 0 5px;
}

#search span input {
    border: 1px solid #4b505f;
    background-color: #fff;
    border-radius: 5px;
    padding-left: 5px;
    height: 28px;
    width: 150px;
    color: #00A5BB;
    font-weight: bold;
    outline: none;
}

#search span button {
    border: 1px solid #4b505f;
    background-color: #00A5BB;
    border-radius: 5px;
    height: 32px;
    width: 80px;
    color: #fff;
    outline: none;
}

#echart1 {
    height: 400px;
    width: 100%;
    background-color: #393D49;
    border-radius: 0 0 5px 5px;
    position: relative;
}

三、筛选、隐藏和弹出层操作文件:run.js

/**
 * Created by PoLeung on 2020-02-15.
 */
$(function () {
    //显示与隐藏切换；
    var isShow = true;
    $('#hideIt').click(function () {
        if (isShow == true) {
            isShow = false;
            $('#echart1').fadeOut();
            $('#hideIt').html('<img src=\"images/open.png\">');
        } else {
            isShow = true;
            $('#echart1').fadeIn();
            $('#hideIt').html('<img src=\"images/retract.png\">');
        }
    })

    //筛选框；
    var isSearch = true;
    $('#refreshIt').click(function () {
        if (isSearch == true) {
            isSearch = false;
            $('#search').fadeIn('slow').css('display', 'block');
            $('#echart1').css('top', '-46px');
            $('#refreshIt').html('<img src=\"images/zoom.png\">');
        } else {
            isSearch = true;
            $('#search').fadeIn('slow').css('display', 'none');
            $('#echart1').css('top', '0');
            $('#refreshIt').html('<img src=\"images/search.png\">');
        }
    })

    //layui弹出层调用;
    $('#zoomIt').click(function () {
        layer.open({
            type: 2,
            title: false,
            maxmin: false,//最大最小化,对type1和2有效;
            area: ['800px', '450px'],
            closeBtn: 1,//关闭按钮，0不显示，1和2两种风格;
            /*缺省模式 -Beging*/
            shadeClose: false,
            anim: 3,//弹出动画,0~6;
            isOutAnim: true,//关闭过渡动画
            /*缺省模式 -End*/
            content: ['zoom_echart1.html', 'no'],//页面
            //content: $('#echart1'),//dom;
            end: function () {
                //layer.tips('Hi', '#about', {tips: 1})
            }
        });
    })

    //筛选数据按钮;
    $('#tooltip').click(function () {
        var starttime = $('#starttime').val();
        var endtime = $('#endtime').val();

        if (starttime == "") {
            alert('开始时间不能为空!');
            $('#starttime').focus();
            return false;
        }

        if (endtime == "") {
            alert('结束时间不能为空!');
            $('#endtime').focus();
            return false;
        }

        alert('API接口测试完毕!');
    })
})

四、echarts核心图表库文件visual.js

/**
 * Created by PoLeung on 2020-02-15.
 */
$(function () {
    //执行函数;
    getEcharts1();

    function getEcharts1() {
        var dom = document.getElementById("echart1");
        var myChart = echarts.init(dom);
        var option = {
            title:{
                text:'漏刻有时联动钻取数据指标',
                x:'center',
                top:'5%',
                textStyle:{
                    color:'#fff',
                    fontSize:'16'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer:{
                    type:'line'
                },
                confine:true,
                //extraCssText:'width:150px!important;height:150px'
            },
            gird: {
                right: '2%',
                left: '5%',
                top:'3%',
                containLabel:true
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                }
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'bar',
                label:{
                    show:true,
                    position:'top',
                    textStyle:{
                        color:'#fff'
                    }
                }
            }]
        };

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

})

五、HTML文件:

<div class="main">
    <div id="menu"><span id="zoomIt"><img src="images/detail.png"></span><span id="hideIt"><img
            src="images/retract.png"></span><span id="refreshIt"><img src="images/search.png"></span></div>
    <!--筛选菜单-->
    <div id="search"><span><input type="text" id="starttime" placeholder="开始时间"></span>
        <span><input type="text" id="endtime" placeholder="截至时间"></span>
        <span><button id="tooltip">搜索</button></span></div>
    <div id="echart1"></div>
</div>

Done!