给echarts加个“全屏展示”
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加个“全屏展示”的更多相关文章
- echarts图表自适应盒子的大小(盒子的大小是动态改变的),大到需要全屏展示
项目中用到了echarts,并且页面是自适应的,且页面中有一个[放大.缩小]功能,因此图表还需要根据盒子的大小来变化. 即:两个需求,如下: ① 图表根据窗口的大小自适应 ② 图表根据所在盒子的大小自 ...
- JavaScript 全屏展示
浏览器都有页面全屏的功能 F11 ,那么如何用JavaScript控制页面全屏呢?MDN上提供的的API , 一个小demo验证一下! <!DOCTYPE html> <html l ...
- js控制页面的全屏展示和退出全屏显示
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...
- requestFullscreen实现全屏展示
requestFullscreen实现全屏展示. var fullContainer = document.getElementById('fullScreenContainer'); //先把元素展 ...
- h5的api dom全屏展示
下面是完整的例子,暂不做分析 <!DOCTYPE html> <html> <head> <title> FullScreen API 演示</t ...
- HTML5在手机端实现视频全屏展示
最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能.测试了很久,终于找到解决办法. 第一种:将视频放大来控制. 视频在播放的时候,全屏是根据高度来的,如果设置视频 video 标签的宽度是 1 ...
- 开机自动调用.bat文件且浏览器全屏展示
1,将 .bat文件放入到以下路径中 C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Startup 或 C:\Users\Administr ...
- ECharts + Jquery 做大屏展示
HTML <!doctype html> <html> <head> <meta charset="utf-8"> <meta ...
- vmware中Ubuntu不能全屏展示的问题
依次打开system settings---------------->Displays----------------->resoluiton调整分辨率,然后右下角点击apply,然后k ...
随机推荐
- (网页)web性能优化(转)
转自CSDN: Web性能优化分为服务器端和浏览器端两个方面. 一.浏览器端,关于浏览器端优化,分很多个方面1.压缩源码和图片JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行 ...
- Java:[面向对象:继承,多态]
本文内容: 继承 多态 首发时期:2018-03-23 继承: 介绍: 如果多个类中存在相同的属性和行为,可以将这些内容抽取到单独一个类中,那么多个类(子类)无需再定义这些属性和行为,只要继承那个类( ...
- log4net 写入日志到不同的位置
某些业务需要根据不同的功能将日志记录到不同的位置,以便于区分. <?xml version="1.0" encoding="utf-8" ?> &l ...
- iOS 多线程之GCD的简单使用
在iOS开发中,遇到耗时操作,我们经常用到多线程技术.Grand Central Dispatch (GCD)是Apple开发的一个多核编程的解决方法,只需定义想要执行的任务,然后添加到适当的调度队列 ...
- python中的一等对象--函数
一等对象 什么是一等对象: 在运行时创建 能赋值给变量或数据结构中的元素 能作为参数传递给函数 能作为函数的返回结果 python中的字符串,列表什么的都是一等对象,但对如果之前只是使用c++.jav ...
- emWin及StemWin使用中关于菜单栏的应用与问题
前言:在我看来,emWin和StemWin就是基本相同的库文件,关于这个库文件的移植,网络上有很多教材,比如“ALIENTEK emWin开发手册”,他们家提供了各种STM32系列的开发手册,我这里记 ...
- (转)Spring boot(一):入门篇
https://www.cnblogs.com/ityouknow/p/5662753.html#!comments 构建微服务:Spring boot 入门篇 什么是Spring Boot Spri ...
- UOJ 【UR #5】怎样跑得更快
[UOJ#62]怎样跑得更快 题面 这个题让人有高斯消元的冲动,但肯定是不行的. 这个题算是莫比乌斯反演的一个非常巧妙的应用(不看题解不会做). 套路1: 因为\(b(i)\)能表达成一系列\(x(i ...
- luogu P4515 [COCI2009-2010#6] XOR
luogu P4515 [COCI2009-2010#6] XOR 描述 坐标系下有若干个等腰直角三角形,且每个等腰直角三角形的直角顶点都在左下方,两腰与坐标轴平行.被奇数个三角形覆盖的面 积部分为灰 ...
- P1218 [USACO1.5]特殊的质数肋骨 Superprime Rib (数论—素数 + DFS)
这大概是我写的第一个DFS 题目描述 农民约翰的母牛总是产生最好的肋骨.你能通过农民约翰和美国农业部标记在每根肋骨上的数字认出它们.农民约翰确定他卖给买方的是真正的质数肋骨,是因为从右边开始切下肋骨, ...