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


Posted in Javascript onSeptember 25, 2019

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=[];  //?r?数组(实际用来盛放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构建弹出层折线图的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
AngularJS中的promise用法分析
May 19 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
javascript实现放大镜功能
Dec 09 Javascript
axios实现简单文件上传功能
Sep 25 #Javascript
layer弹出层取消遮罩的方法
Sep 25 #Javascript
QML实现圆环颜色选择器
Sep 25 #Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 #Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 #Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 #Javascript
layer 关闭指定弹出层的例子
Sep 25 #Javascript
You might like
php分页函数
2006/07/08 PHP
php正则校验用户名介绍
2008/07/19 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
iframe子父页面调用js函数示例
2013/11/07 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
bootstrap table小案例
2016/10/21 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
python开发中range()函数用法实例分析
2015/11/12 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
英国手机零售商:Metrofone
2019/03/18 全球购物
中医专业应届生求职信
2013/11/17 职场文书
个人简历自荐信
2013/12/05 职场文书
医药类个人求职的自我评价
2014/02/12 职场文书
家长写给孩子的评语
2014/04/18 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
小孩不笨观后感
2015/06/03 职场文书
高一军训口号
2015/12/25 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang
JavaScript实现简单计时器
2021/06/22 Javascript
Redis特殊数据类型bitmap位图
2022/06/01 Redis