Layer+Echarts构建弹出层折线图的方法
layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验。
在中国可视化生态系统中，ECharts 通过提供方便丰富的可视化图表，极大缩短了用户与数据的距离。个人认为是最好用的可用来生成图表的插件。
现在使用Layer和Echarts构建弹出层折线图。
下载好所需要用到的工具包，Echarts下载为echarts.min.js，Layer在layer官网下载之后将layer文件夹放到项目之中。
在HTML文件中引入
<script src="js/jquery-1.11.1.min.js"></script> <!-- 你必须先引入jQuery1.8或以上版本 --> <script src="js/layer/layer.js"></script> <script src="js/bootstrap.min.js"></script> <!-- 引入 ECharts 文件 --> <script src="js/echarts.min.js"></script>
页面内容
<body>
<button id="test2">Layer+Echarts构建弹出层折线图</button>
<div id="speedChart" style="display: none;">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="speedChartMain" style="width: 600px; height: 400px;"></div>
</div>
<div id="dfd">
<span>Layer+Echarts构建弹出层折线图</span>
<p>Layer+Echarts构建弹出层折线图</p>
</div>
</body>
js脚本
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('speedChartMain'));
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'邮件营销',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'line',
stack: '总量',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接访问',
type:'line',
stack: '总量',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'line',
stack: '总量',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//弹出一个页面层
$('#test2').on('click', function() {
layer.open({
title:'hello world',
type: 1,
shade: false,
area: ['620px', '460px'],
shadeClose: false, //点击遮罩关闭
content: $("#speedChart")
});
});
</script>
预览
当然以上是静态加载，我们平常使用最多的是异步加载，修改一下代码即可：
<div id="speedChart" style="display: none;">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="speedChartMain" style="width: 600px; height: 400px;"></div>
</div>
$(document).ready(function() {
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data:[]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value'
},
series: []
};
//按钮提交表单数据
$("#subSpeed").click(function(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('speedChartMain'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
var url=$("#speedFrom").attr("action");
var times=[]; //時間数组（实际用来盛放X轴坐标值）
var speeds=[]; //速度数组（实际用来盛放Y坐标值）
$.post(url,$("#speedFrom").serialize(),
function(data, status){
if(data!=null){
for (var i = 0; i < data.length; i++) {
times.push(data[i].timeStamp);
speeds.push(data[i].speed);
}
//之前option中legend和 XAxis的data,series 为空，所以现在将数据填充进去
myChart.setOption({ //加载数据图表
legend: {
data:[$("#roads").val()]
},
xAxis: {
data: times
},
series: [{
// 根据名字对应到相应的系列
name: $("#roads").val(),
type:'line',
data: speeds
}]
});
}
layer.open({
title:'折线图',
type: 1,
shade: false,
area: ['620px', '460px'],
shadeClose: true, //点击遮罩关闭
content: $("#speedChart")
});
},"json");
});
});
以上这篇Layer+Echarts构建弹出层折线图的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
layer弹出层自适应高度,垂直水平居中的实现
1.高度自适应: success: function(layero, index) { layer.iframeAuto(index); }, 2.layer垂直居中 进入layer.js,增加几行代码.具体如图: 以上这篇layer弹出层自适应高度,垂直水平居中的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http://layer.layui.com/ 二.多个iframe弹出层(非嵌套) 1.打开iframe弹出层js代码 (1)示例一: layer.open({ type: 2, title: 'layer mobile页', shadeClose: true, shade: 0.8, area: ['380p
-
解决layer弹出层自适应页面大小的问题
前两天在Vue中引入了Vue-layer插件,实现了弹出层效果.不过由于是在22寸屏下开发的,没多想,弹出层的area的长宽就设定的都是800px,效果还很好.结果那给用户看,他们是12寸的笔记本.弹出层直接撑爆了页面,无法关闭... 网上的解决方案大都是以下几种: 1.改成百分比形式.有bug,下面细说. 2.改成em,rem等.同上 3.采用area:auto.可能是因为采用了swiper的原因吧,这样设置会导致弹出层出现"顶天立地"的效果 4.采用iframeAuto.这个没太搞
-
解决layui弹出层layer的area过大被遮挡的问题
layer弹出窗口在弹出时指定了area,弹出后,如果当前页面(iframe)大小比弹出的窗口小,那么就会出现无法操作弹出窗口的尴尬情况. 如图: 弹出窗口比当前页面大,这时,唯有放大整个页面才能看到完全的弹出窗口,才可以操作. layui 为我们提供了 layer.style(); 方法来重新跳整窗口的大小 , 然后我们只需要写一个函数,得到当前document的宽度和高度, 判断弹出框是否大于document来调整窗口大小 <!DOCTYPE html> <html lang=&qu
-
echarts多条折线图动态分层的实现方法
1.关于Echarts 大家可以到这个网址看一下,还是比较详细的. http://echarts.baidu.com/doc/example.html 这个功能还是很强大的,对于喜欢做数据统计来说是美味的. 2.echarts多条折线图动态分层 var xData = param.xData; var data = param.yData let option = []; let num =param.num ? param.num : 0; let max = num ? num *100 :
-
layer弹出层取消遮罩的方法
layer 只是作为 layui 的一个弹层模块 layer弹出层取消遮罩 笔者认为 跟 layer弹出层非模态对话框类似 layer.open({ title: '在线调试', content: '可以填写任意的layer代码', shade:0 }); shade - 遮罩 类型:String/Array/Boolean,默认:0.3 即弹层外区域.默认是0.3透明度的黑色背景('#000').如果你想定义别的颜色,可以shade: [0.8, '#393D49']:如果你不想显示遮罩,可以
-
layer 关闭指定弹出层的例子
首先,弹出某个层时需要给层取名(赋值),如: var mylay = layer.open({ type: 2, content: 'layer.html', title: false, area: ['500px', '500px'] }); 需要关闭指定的弹出层时,直接: layer.close(mylay) 如果在弹出层中写js,将弹出层自身关闭,可以先获取到弹出层名字,再将其关闭 var mylay = parent.layer.getFrameIndex(window.name); p
-
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
昨天layer插件弹出层关闭问题弄的我直挠头,短短几行代码,用了我将近2个钟头才解决.我的使用场景是这样.在页面中用layer.open弹出一个层,在层内是微信支付二维码,客户扫码支付.支付成功后关闭此弹出层,并提示项目投递成功,然后再跳转到其他页面.为了监控微信二维码扫码支付是否成功.我利用了每隔三秒,查询下支付订单,查看支付订单的支付状态是否改变.在实际操作中由于使用的是location.href做跳转,然而跳转执行的非常慢,要10几秒才能成功,这不能忍.只能退而求其次,只是提示投递成功,然
-
Layer+Echarts构建弹出层折线图的方法
layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验. 在中国可视化生态系统中,ECharts 通过提供方便丰富的可视化图表,极大缩短了用户与数据的距离.个人认为是最好用的可用来生成图表的插件. 现在使用Layer和Echarts构建弹出层折线图. 下载好所需要用到的工具包,Echarts下载为echarts.min.js,Layer在layer官网下载之后将layer文件夹放到项目之中. 在HTML文件中引入
-
layer实现关闭弹出层刷新父界面功能详解
本文实例讲述了layer实现关闭弹出层刷新父界面功能.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 最近一个项目采用的是hui前端框架,他的弹出层就是用的layer插件,对于弹出层,有一个操作体验大家都知道,就是关闭弹出层,需要刷新父页面.开始写的时候,我陷入了自己的误区,在弹出层处理成功之后,我调用的是: var index = parent.layer.getF
-
获取layer.open弹出层的返回值方法
正在开发的车联网项目用到了layer API.当我在开发"新建电子围栏"的时候需要弹出地图,用户在地图中画一个区域,最后将这个弹出层的数据返回给原页面.下面是我的实现过:程: 触发弹出层的代码: layer.open({ type: 2, title: "设置围栏", shadeClose: true, shade: 0.4, area: ['90%', '90%'], content: "/ElectronicFence/Map?id=" +
-
layer.open回调获取弹出层参数的实现方法
如下所示: layer.open({ type : 2, title : '重命名', maxmin : true, shadeClose : true, // 点击遮罩关闭层 area : [ '200px', '150px' ], content : getContext() + "/node/torenamenode?nodeName="+nodeName, btn: ['确定'], yes: function(index, layero){ //do something/ /c
-
浅谈layer弹出层按钮颜色修改方法
layer弹出层有多种格式的弹出,使用方法也不细述. 在弹出确认框可使用confirm或open方式 在open中 layer.open({ content: '确认提交?', btn: ["确认", "取消"], yes: function (index) { somefunciton... layer.close(index) }, btn2: function (index) { } }); layer中确认按钮在第一个位置,展示也是按顺序展示 如果和自己项目
-
layer弹出层扩展主题的方法
弹出层插件layer确实很强大,官方提供主题太少,但是提供扩展的方式,由于项目使用统一颜色风格,就想扩展一下.官方默认的三种: 1.白蓝(默认) layer.alert('内容');//默认 2.墨绿 layer.alert('内容', { icon: 1, skin: 'layui-layer-molv' }) 3.深蓝 layer.alert('内容', { icon: 1, skin: 'layui-layer-lan' }) ==========重点啦==================
-
使用layui的layer组件做弹出层的例子
官方文档地址: http://www.layui.com/doc/modules/layer.html 本例演示效果: 当点击申请提现时,出现申请提现框,并根据用户输入进行一些判断,给出友好提示,比如: 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹出层</title> <link