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

简介: 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!

相关文章
|
6月前
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
235 1
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
|
6月前
|
搜索推荐 前端开发 数据可视化
基于Python协同过滤的旅游景点推荐系统,采用Django框架,MySQL数据存储,Bootstrap前端,echarts可视化实现
本文介绍了一个基于Python协同过滤算法的旅游景点推荐系统,该系统采用Django框架、MySQL数据库、Bootstrap前端和echarts数据可视化技术,旨在为用户提供个性化的旅游推荐服务,提升用户体验和旅游市场增长。
612 9
基于Python协同过滤的旅游景点推荐系统,采用Django框架,MySQL数据存储,Bootstrap前端,echarts可视化实现
|
6月前
|
前端开发 数据挖掘 关系型数据库
基于Python的哔哩哔哩数据分析系统设计实现过程,技术使用flask、MySQL、echarts,前端使用Layui
本文介绍了一个基于Python的哔哩哔哩数据分析系统,该系统使用Flask框架、MySQL数据库、echarts数据可视化技术和Layui前端框架,旨在提取和分析哔哩哔哩用户行为数据,为平台运营和内容生产提供科学依据。
400 9
|
8月前
|
数据可视化 数据挖掘
ECharts综合案例一:近七天跑步数据
使用ECharts进行一周跑步数据分析,通过雷达图展示多维度指标(如距离、速度、时间),颜色对比体现个人与平均表现。折线图则清晰显示每日里程趋势,代码示例展示了自定义的`radar`和`line`图表配置。图表交互性强,支持点击高亮,动画流畅,提供完整代码资源。#ECharts #跑步数据 #数据可视化
187 3
ECharts综合案例一:近七天跑步数据
|
8月前
|
数据可视化 数据挖掘
ECharts综合案例一:近七天跑步数据
使用ECharts展示近七天跑步数据,结合雷达图和折线图揭示运动表现。雷达图多维度呈现全程距离、速度和时间,对比平均指标;折线图清晰展示里程趋势。图表具有交互性和动画效果,通过[代码地址](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454698)可获取详情。#ECharts #跑步数据 #数据可视化 #雷达图 #折线图
131 3
ECharts综合案例一:近七天跑步数据
|
8月前
|
数据采集 自然语言处理 数据可视化
ECharts 词云案例四—电影《千与千寻》部分短评
**使用ECharts和电影《千与千寻》短评创建的词云案例展示了数据可视化的力量。通过Python处理评论,提取关键词并计算频率,利用jieba和WordCloud生成词云,ECharts进一步增强了视觉效果。词云突出了角色如“千寻”、“无脸男”及关键词“勇气”、“成长”,揭示了观众的情感共鸣。示例代码和资源可在链接中获取。**
72 0
 ECharts 词云案例四—电影《千与千寻》部分短评
|
8月前
|
JavaScript 前端开发 数据可视化
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
365 0
|
4月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
145 1
|
5月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
6月前
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
603 1
微信小程序使用echarts图表(ec-canvas)

热门文章

最新文章