Layer+Echarts构建弹出层折线图的方法

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

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

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

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

在HTML文件中引入

页面内容

    Layer+Echarts构建弹出层折线图
    

                  
                  

                
    

      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构建弹出层折线图的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。