功能描述：
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!
