Echarts图标增加全屏/放大功能

Posted 2023-05-03

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

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

步骤一：
在页面上放置div

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

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

tinymce插件preview改造增加全屏按钮

近期需要用到tinymce的preview插件，但preview出来的界面太小了，通过投影仪出来看的不清晰，于是想在preview的预览界面中增加全屏、放大和缩小的按钮，改造内容如下：

由于preview是在html中生成了一个iframe，要想iframe能够全屏必须在iframe的元素上加上allowfullscreen属性，iframe又是使用js构造的href与父窗口不同源不能直接通过iframe内部js修改，可以通过plugin.min.js文件中的iframe初始化函数中修改$("iframe").attr("allowfullscreen", true)。

完整js见GitHub：https://github.com/wurijie/tinymce

//全屏函数
function fullscreen(){
	var btn = document.getElementsByClassName("btn-fullscreen")[0]
	if(!window.isfullscreen){
		var el = document.documentElement;
		var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
		if(rfs){
			rfs.call(el);
		}else{
			alert("浏览器不支持全屏操作！请使用最新Chrome")
		}

		btn.innerText = "退出全屏"
		window.isfullscreen = true
	}else{
		var el = document;
        var cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
            el.mozCancelFullScreen || el.exitFullScreen;
        if (cfs) { //typeof cfs != "undefined" && cfs
            cfs.call(el);
        }else{
        	alert("浏览器不支持全屏操作！请使用最新Chrome")
        }

        btn.innerText = "全屏"
        window.isfullscreen = false
	}
	
}

//改变预览界面文字大小函数
function changeSize(type="big"){
	var bo = document.getElementsByTagName("body")[0];
	var size = window.getComputedStyle(bo).fontSize;
	size = parseInt(size);

	if(type == "big"){
		size += 5;
		bo.style.fontSize = size + "px";
	}else{
		if(size<10) {alert("再小就看不见了！"); return;}

		size -= 5;
		bo.style.fontSize = size + "px";
	}
}