脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Layer+Echarts构建弹出层折线图

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

 更新时间：2019年09月25日 09:45:47   作者：vili_sky  
今天小编就为大家分享一篇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构建弹出层折线图的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js/jquery获取文本框输入焦点的方法

    js/jquery获取文本框输入焦点的方法

    本篇文章主要是对js/jquery获取文本框输入焦点的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-03-03
  • 微信小程序实现虎年春节头像制作

    微信小程序实现虎年春节头像制作

    春节来临之际，看到有网友分享了网页版的虎年头像制作工具。本文将为大家介绍一个虎年春节头像制作小程序，文中的示例代码讲解详细，需要的可以参考一下
    2022-02-02
  • 基于canvasJS在PHP中制作动态图表

    基于canvasJS在PHP中制作动态图表

    这篇文章主要介绍了基于canvasJS在PHP中制作动态图表,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • 写了10年的Javascript也未必全了解的连续赋值运算

    写了10年的Javascript也未必全了解的连续赋值运算

    很喜欢 蔡蔡 的这个标题，实际蔡蔡已经分析过了，这里借用了。或许有点标题党的意思。看完就知了。
    2011-03-03
  • Javascript中Math.max和Math.max.apply的区别和用法详解

    Javascript中Math.max和Math.max.apply的区别和用法详解

    这篇文章主要介绍了Javascript中Math.max和Math.max.apply的区别和用法,本文给大家啊介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-08-08
  • 浅析JavaScript中的隐式类型转换

    浅析JavaScript中的隐式类型转换

    这篇文章主要是对JavaScript中的隐式类型转换进行了详细分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • Js自动截取字符串长度,添加省略号(……)的实现方法

    Js自动截取字符串长度,添加省略号(……)的实现方法

    下面小编就为大家带来一篇Js自动截取字符串长度,添加省略号(……)的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • Javascript中call的两种用法实例

    Javascript中call的两种用法实例

    这篇文章主要介绍了Javascript中call的两种用法实例，有需要的朋友可以参考一下
    2013-12-12
  • js保留两位小数最简单的实现方法

    js保留两位小数最简单的实现方法

    JS数据格式化是在进行web前端开发时常碰到的事情,特别是在数据类型为Float的数据就需要特殊处理,如保留两位小数、小数点后的数据是否需要四舍五入等等,下面这篇文章主要给大家介绍了关于js保留两位小数最简单的实现方法,需要的朋友可以参考下
    2023-05-05
  • JavaScript制作简易计算器（不用eval）

    JavaScript制作简易计算器（不用eval）

    这篇文章主要为大家详细介绍了JavaScript制作简易计算器的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02

最新评论