echarts 弹出放大_Echarts图标增加全屏/放大功能

需求描述：

客户爸爸在看某个echarts图表时，图标的数据很多，字看着很小，客户爸爸希望能双击放大某个图表。如下面这个图表字太小，太密。

image.png

解决方式：

网上有不少方式是用Echarts的tool工具先上自定义工具箱来实现，其实本质上差不多。本文采用构建两个div，一个用来做遮罩层，一个用来放Echarts内容。

步骤一：

在页面上放置div

中间的省略，这里每人都不一样，我的项目里有一个放大按钮

放大

步骤二：

给这连个的div设置属性,主要display默认设置为none，z-index为9999，最上层。

#fullScreenMask {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

display: none;

z-index:9999999;

background-color: #ffffff;

}

#fullScreen {

width: 80%;

height: 80%;

}

步骤三：

增加myfullscreen()函数,函数很简单，先获取原来的options参数，然后判断fullScreenMask的状态，做互斥操作。

myfullscreen = function dofull()

{

var options = rootchart.getOption();

setFullScreenToolBox(options);

}

//全屏显示 toolbox回调

//@param option echarts的配置项

function setFullScreenToolBox(option) {

if ($('#fullScreenMask').css('display') === 'block') {

$('#fullScreenMask').hide();

ChartScreen = null;

return false;

}

$('#fullScreenMask').show();

chartScreen = echarts.init(document.getElementById('fullScreen'));

chartScreen.setOption(option);

return true;

}

echarts 弹出放大_Echarts图标增加全屏/放大功能相关推荐

为所有弹窗增加全屏切换功能
1.现状在开发两个管理系统,现在的页面20+,其中包含不少的弹窗.在项目开发过程中没人提过弹窗要全屏的事情,且在数据量较大的位置已经增加了可全屏的入口.但老板两次说为什么不给所有的弹窗增加全屏的功能 ...
echarts toolbox工具栏设置自定义feature属性设置弹窗和全屏放大
1.如果是多个图表,那就创建一个公共组件(子组件),如下: <template> //自定义弹窗<el-dialogtop="150px"width=" ...
微信html 全屏显示,关于微信上网页图片点击全屏放大效果
实现微信上网页的图片点击后全屏还可以可以缩放,这个功能是别人做的,可是捏点击后屏幕直接黑屏了,图片没有显示出来.这个代码在网上搜一下,挺多类似的. 先上代码. 调用微信图片浏览器的函数 functio ...
vue框架中使用iframe内嵌网页，并且双击实现网页全屏放大
vue框架中使用iframe内嵌网页,并且双击实现网页全屏放大利用Iframe插入网页 <iframe ref="iframe" src="https://www ...
h5点击图片自动放大_关于微信上网页图片点击全屏放大效果
实现微信上网页的图片点击后全屏还可以可以缩放,这个功能是别人做的,可是捏点击后屏幕直接黑屏了,图片没有显示出来.这个代码在网上搜一下,挺多类似的. 先上代码. function arrayToJson ...
jQuery炫酷点击变形全屏放大的模态窗口
这是一款效果非常炫酷的点击变形全屏放大的 jQuery模态窗口插件.该模态窗口插件当用户点击某个按钮时,按钮先变形缩小变为圆形,然后在由小圆到大圆全屏放大,效果非常酷. 最后在生成模态窗口的时候的动画 ...
Android9全屏手势,国行三星S9系列开始推送安卓9.0 原生全屏手势功能来了
原标题:国行三星S9系列开始推送安卓9.0 原生全屏手势功能来了最近几天不少三星手机用户终于等来了跳票依旧的更新:包括三星S9.三星S9+.三星Note 9的国行版本终于获得了安卓9.0(Andro ...
MFC 单文档弹出对话框标题图标
创建MFC时 1.应用程序类型:以单个文档->项目样式选择MFC标准菜单关联对话框 2.菜单关联->资源视图中的Menu->IDR_MAINFRAME(此处看想关联谁,如果是想关 ...
ASP.NET弹出窗口技术之增加网站流量方法
作为Microsoft的最新建立动态Web网站的工具,ASP.NET相对于ASP和JSP在改变原始的Web编程方式方面有了长足的长进.它的代码与页面分离技术(CodeBehind)以及完善的Web服务 ...

echarts 弹出放大_Echarts图标增加全屏/放大功能

echarts 弹出放大_Echarts图标增加全屏/放大功能相关推荐

最新文章

热门文章