echarts的工具箱并没有提供放大/全屏的功能,

查找文档发现可自定义工具https://www.echartsjs.com/option.html#toolbox.feature

show代码

toolbox: {
feature: {
myFull: {
show: true,
title: '全屏查看',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
onclick: function (e){
var opts = e.getOption()
opts.toolbox[0].feature.myFull.show=false
//window.top表示最顶层iframe 如果在当页面全屏打开 删去window.top即可
window.top.layer.open({
title:false,
type:1,
content:'<div class="fullChart" style="height:100%;width:100%;padding:30px 0px"></div>",
success:function(){
var fullchart = echarts.init(window.top.document.getElementById('fullChart'))
fullchart.setOption(opts)
}
})
}
}
}
}

思路:

  1、在点击自定义全屏后,插入一个dom外框,将已存在的echarts图表dom复制并插入到外框,发现复制dom可能无法获取echart实例对象,需要放大resize()无法进行,便放弃

  2、插入一个dom全屏外框,获取当前echart图的option,在全屏内用option重新生成echart图表,关闭时删除dom结构即可

  3、发现项目中有layer,于是获取echart的option后,用layer打开一个弹窗,重新生成echart,由于iframe嵌套,所以将弹窗在最外层打开。

  

给echarts加个“全屏展示”的更多相关文章

  1. echarts图表自适应盒子的大小(盒子的大小是动态改变的),大到需要全屏展示

    项目中用到了echarts,并且页面是自适应的,且页面中有一个[放大.缩小]功能,因此图表还需要根据盒子的大小来变化. 即:两个需求,如下: ① 图表根据窗口的大小自适应 ② 图表根据所在盒子的大小自 ...

  2. JavaScript 全屏展示

    浏览器都有页面全屏的功能 F11 ,那么如何用JavaScript控制页面全屏呢?MDN上提供的的API , 一个小demo验证一下! <!DOCTYPE html> <html l ...

  3. js控制页面的全屏展示和退出全屏显示

    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...

  4. requestFullscreen实现全屏展示

    requestFullscreen实现全屏展示. var fullContainer = document.getElementById('fullScreenContainer'); //先把元素展 ...

  5. h5的api dom全屏展示

    下面是完整的例子,暂不做分析 <!DOCTYPE html> <html> <head> <title> FullScreen API 演示</t ...

  6. HTML5在手机端实现视频全屏展示

    最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能.测试了很久,终于找到解决办法. 第一种:将视频放大来控制. 视频在播放的时候,全屏是根据高度来的,如果设置视频 video 标签的宽度是 1 ...

  7. 开机自动调用.bat文件且浏览器全屏展示

    1,将 .bat文件放入到以下路径中 C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Startup 或 C:\Users\Administr ...

  8. ECharts + Jquery 做大屏展示

    HTML <!doctype html> <html> <head> <meta charset="utf-8"> <meta ...

  9. vmware中Ubuntu不能全屏展示的问题

    依次打开system settings---------------->Displays----------------->resoluiton调整分辨率,然后右下角点击apply,然后k ...

随机推荐

  1. (其他)最常用的15大Eclipse开发快捷键技巧

    转自CSDNJava我人生(陈磊兴)   原文出处 引言 做java开发的,经常会用Eclipse或者MyEclise集成开发环境,一些实用的Eclipse快捷键和使用技巧,可以在平常开发中节约出很多 ...

  2. [Linux.NET]在CentOS 7.x中编译方式安装Nginx

    Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.由俄罗斯的程序设计师Igor Sysoev所开发,供俄罗斯大型的 ...

  3. [20170705]diff比较执行结果的内容.txt

    [20170705]diff比较执行结果的内容.txt --//有时候需要比较2个命令输出的结果进行比较,比较笨的方法如下,例子: $  lsnrctl status LISTENER_SCAN2 & ...

  4. python-Tkinter整理总结

    笔者学习Tkinter模块也有好久时间了,现将学习的做以整理. tkinter简介(一) tkinter中lable标签控件(二) tkinter中button按钮控件(三) tkinter中entr ...

  5. linux查找某段时间修改的文件的总大小

    1.统计 2017-10-25 16:30:00 至 2017-10-25 19:30:00 修改的文件的总大小 b= for i in `find -type f \( -newermt '2017 ...

  6. 浅谈sql server聚集索引与非聚集索引

    今天同事的服务程序在执行批量插入数据操作时,会超时失败,代码debug了几遍一点问题都没有,SQL单条插入也可以正常录入数据,调试了一上午还是很迷茫,场面一度很尴尬,最后还是发现了问题的根本,原来是另 ...

  7. Asp.net MVC通过自定义特性实现Action日志记录

    一.自定义特性 /// <summary> /// 描述特性 /// </summary> [AttributeUsage(AttributeTargets.Method)] ...

  8. PL/SQL 删除主键 ORA-02443: 无法删除约束条件-不存在的约束条件

    在PL/SQL developer中删除一个表的主键,然后把另外一个字段设置成主键,删除的过程中报错:ORA-02443 我遇到这个问题出现的背景是: alter table saleqtya dro ...

  9. Http协议响应状态类别及说明

    HTTP响应由三个部分组成,分别是:状态行.消息报头.响应正文  状态行格式如下: HTTP-VersionStatus-Code Reason-Phrase CRLF 其中,HTTP-Version ...

  10. 使用kibana操作elasticsearch实现增删改查

    本篇博客,本人写的是方法,大家将对应的字段放入对应的位置就可以了 注:elasticsearch中,索引相当于MySQL中的数据库,类型相当于数据库中的表,即索引名就为数据库库名,类型就为表名 1.创 ...