Layer+Echarts如何构建弹出层折线图
小编给大家分享一下Layer+Echarts如何构建弹出层折线图,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
成都创新互联是一家集网站建设,合肥企业网站建设,合肥品牌网站建设,网站定制,合肥网站建设报价,网络营销,网络优化,合肥网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验。
在中国可视化生态系统中,ECharts 通过提供方便丰富的可视化图表,极大缩短了用户与数据的距离。个人认为是最好用的可用来生成图表的插件。
现在使用Layer和Echarts构建弹出层折线图。
下载好所需要用到的工具包,Echarts下载为echarts.min.js,Layer在layer官网下载之后将layer文件夹放到项目之中。
在HTML文件中引入
页面内容
Layer+Echarts构建弹出层折线图Layer+Echarts构建弹出层折线图
js脚本
预览
当然以上是静态加载,我们平常使用最多的是异步加载,修改一下代码即可:
$(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如何构建弹出层折线图
标题网址:http://scyanting.com/article/gdpdgs.html