Layer+Echarts如何构建弹出层折线图-创新互联

小编给大家分享一下Layer+Echarts如何构建弹出层折线图，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联服务项目包括汉阳网站建设、汉阳网站制作、汉阳网页制作以及汉阳网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，汉阳网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到汉阳省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验。

在中国可视化生态系统中，ECharts 通过提供方便丰富的可视化图表，极大缩短了用户与数据的距离。个人认为是最好用的可用来生成图表的插件。

现在使用Layer和Echarts构建弹出层折线图。

下载好所需要用到的工具包，Echarts下载为echarts.min.js，Layer在layer官网下载之后将layer文件夹放到项目之中。

在HTML文件中引入

页面内容


    Layer+Echarts构建弹出层折线图

Layer+Echarts构建弹出层折线图

// 基于准备好的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") }); });

当然以上是静态加载，我们平常使用最多的是异步加载，修改一下代码即可：

$(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+Echarts如何构建弹出层折线图-创新互联

其他资讯