实现f11全屏_记一次 echarts F11全屏

最新推荐文章于 2023-04-21 11:41:41 发布

爬一手好线杆

最新推荐文章于 2023-04-21 11:41:41 发布

阅读量394

点赞数

文章标签：实现f11全屏

本文链接：https://blog.csdn.net/weixin_31240035/article/details/112592443

版权

本文详细介绍了如何在Echarts图表中添加F11全屏功能，通过监听键盘事件和使用浏览器全屏API，实现一键切换全屏显示，提升用户交互体验。

摘要由CSDN通过智能技术生成

工具栏

toolbox: {
　　show: true,//是否显示
    itemSize: 20,
　　orient: 'horizontal',//方向
　　right: '1%',//距左
　　top: '0',//距上
    textStyle: {
        fontStyle: {
            fontSize: '15px'
        }
    },
    F11全屏
    feature: {
        dataView: {
            show: false,
        },
        dataZoom: {
            show: true,
            iconStyle: {
            opacity: 0,
            },
        },
        restore: { show: false },
        saveAsImage: { show: false },
        // 全屏具体实现
        myFull: {
            show: true,
            title: changeScreenTitle(),
            icon: changeIcon(),
            onclick: bigFull,
        }
    }
},

具体实现代码

// =====================  F11 放大   Start

let fullScreen = '<svg t="1601187346966" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="998" width="300" height="300"><path d="M664.035 409.382l244.223-243.378-0.837 137.922c-0.335 11.437 8.912 21.527 20.351 21.191h14.63c11.438-0.335 21.025-7.065 21.193-18.67l0.672-205.367c0-0.171 0.335-10.934 0.335-10.934 0.17-5.716-1.179-10.934-4.879-14.63-3.7-3.702-8.742-6.055-14.633-5.886l-10.428 0.171c-0.169 0-0.331 0-0.501 0.171l-203.69-0.846c-11.438 0.336-21.025 9.76-21.193 21.361v14.633c1.685 13.625 12.446 21.529 23.884 21.193l134.219 0.335-243.551 242.542c-11.101 11.104-11.101 29.095 0 40.197 11.104 11.269 29.101 11.269 40.203 0h-0.003M356.233 638.806l-244.393 242.544 0.842-137.253c0.336-11.435-8.918-21.523-20.355-21.193h-15.47c-11.438 0.335-21.025 7.065-21.193 18.672l-0.672 205.536c0 0.171-0.335 10.934-0.335 10.934-0.171 5.722 1.18 10.934 4.875 14.63 3.7 3.7 8.746 6.055 14.633 5.886l10.427-0.17c0.171 0 0.336 0 0.507-0.171l204.532 0.843c11.435-0.336 21.025-9.756 21.193-21.361v-14.63c-1.683-13.625-12.451-21.529-23.887-21.193l-134.222-0.335 243.38-242.539c11.104-11.104 11.104-29.101 0-40.203-10.929-11.268-28.757-11.268-39.857 0.001v0M964.271 947.109l-0.507-205.536c-0.336-11.438-9.76-18.335-21.194-18.672h-14.629c-11.439-0.331-20.521 9.759-20.356 21.193l0.843 137.927-244.393-243.214c-11.104-11.104-29.099-11.104-40.203 0-11.097 11.101-11.097 29.099 0 40.203l243.386 242.538-134.22 0.335c-11.438-0.335-22.034 7.739-23.887 21.193v14.633c0.335 11.437 9.76 21.025 21.193 21.361l203.69-0.843c0.17 0 0.335 0.17 0.507 0.17l10.428 0.171c5.716 0.17 10.934-2.016 14.63-5.886 3.698-3.7 5.042-8.912 4.875-14.63 0 0-0.169-10.764-0.169-10.934l0.004-0.002M152.885 126.645l134.22-0.335c11.435 0.335 22.031-7.739 23.883-21.193v-14.636c-0.336-11.437-9.753-21.025-21.193-21.36l-204.694 0.842c-0.17 0-0.336-0.171-0.509-0.171l-10.426-0.169c-5.722-0.17-10.934 2.015-14.633 5.885-3.698 3.7-5.050 8.912-4.875 14.633 0 0 0.335 10.763 0.335 10.933l0.502 205.536c0.171 11.435 9.759 18.335 21.193 18.667h15.475c11.437 0.335 20.519-9.753 20.349-21.191l-0.671-137.248 244.224 242.709c11.097 11.104 29.094 11.104 40.196 0 11.104-11.101 11.104-29.099 0-40.203l-243.38-242.703M152.885 126.645v0z" fill="#2AD5D7" p-id="999"></path></svg>'
let reduceScreen = '<svg t="1601187448691" class="icon" viewBox="0 0 1075 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1128" width="300" height="300"><path d="M938.043077 143.458462c0-18.510769-15.064615-33.575385-33.575385-33.575385H635.766154c-18.510769 0-33.575385 15.064615-33.575385 33.575385s15.064615 33.575385 33.575385 33.575384h235.126154v235.126154c0 18.510769 15.064615 33.575385 33.575384 33.575385s33.575385-15.064615 33.575385-33.575385V143.458462z m0 0M434.215385 848.738462H199.089231V613.612308c0-18.510769-15.064615-33.575385-33.575385-33.575385S131.938462 595.101538 131.938462 613.612308v268.701538c0 18.510769 15.064615 33.575385 33.575384 33.575385H434.215385c18.510769 0 33.575385-15.064615 33.575384-33.575385S452.726154 848.738462 434.215385 848.738462z m0 0M635.766154 915.889231c18.510769 0 33.575385-15.064615 33.575384-33.575385v-187.076923l211.101539 211.101539 0.295385-0.295385c6.104615 6.104615 14.473846 9.846154 23.72923 9.846154 18.510769 0 33.575385-15.064615 33.575385-33.575385 0-11.126154-5.415385-20.873846-13.686154-27.076923L716.307692 647.187692h188.16c18.510769 0 33.575385-15.064615 33.575385-33.575384s-15.064615-33.575385-33.575385-33.575385H635.766154c-18.510769 0-33.575385 15.064615-33.575385 33.575385v268.701538c-0.098462 18.510769 14.966154 33.575385 33.575385 33.575385z m0 0M434.707692 109.292308c-18.510769 0-33.575385 15.064615-33.575384 33.575384v187.076923L190.129231 118.843077l-0.295385 0.295385c-6.104615-6.104615-14.473846-9.846154-23.729231-9.846154-18.510769 0-33.575385 15.064615-33.575384 33.575384 0 11.126154 5.415385 20.873846 13.686154 27.076923l208.04923 208.049231H166.104615c-18.510769 0-33.575385 15.064615-33.575384 33.575385s15.064615 33.575385 33.575384 33.575384h268.701539c18.510769 0 33.575385-15.064615 33.575384-33.575384V142.867692c0-18.510769-15.064615-33.575385-33.673846-33.575384z m0 0" fill="#2AD5D7" p-id="1129"></path></svg>'
// 图标类型
let iconType = true
// 图标tips文字
let iconTitle = true
// Echarts文字切换
let echartsTitle = ''
// 全屏图标自定义 及切换
function changeIcon() {
	if (iconType) {
		str = fullScreen;
		iconType = false;
	} else {
		str = reduceScreen;
		iconType = true;
	}
	let icon = str
	icon = encodeURIComponent(icon)
	icon = 'data:image/svg+xml;utf8,' + icon
	icon = 'image://' + icon
	return icon
}
// 全屏tips文字切换  自定义文字
function changeScreenTitle() {
	if (iconTitle) {
		iconTitle = false;
		return '退出全屏查看';
	} else {
		iconTitle = true;
		return '全屏查看';
	}
}

// Echarts标题切换
function changeTitle(val) {
	// console.log(echartsTitle)
	if (val) {
		echartsTitle = val
		return '';
	}
	// console.log(iconTitle)
	if (iconTitle) {
		return '';
	} else {
		return echartsTitle;
	}
}

// 全屏方法
function bigFull() {
	const element = document.getElementById('#Id');
	if (element.requestFullScreen) { // HTML W3C 提议
		element.requestFullScreen();
	} else if (element.msRequestFullscreen) { // IE11
		element.msRequestFullScreen();
	} else if (element.webkitRequestFullScreen) { // Webkit (works in Safari5.1 and Chrome 15)
		element.webkitRequestFullScreen();
	} else if (element.mozRequestFullScreen) { // Firefox (works in nightly)
		element.mozRequestFullScreen();
	}
	// 退出全屏
	if (element.requestFullScreen) {
		document.exitFullscreen();
	} else if (element.msRequestFullScreen) {
		document.msExitFullscreen();
	} else if (element.webkitRequestFullScreen) {
		document.webkitCancelFullScreen();
	} else if (element.mozRequestFullScreen) {
		document.mozCancelFullScreen();
	}
	option.title.text = changeTitle();
	option.toolbox.feature.myFull.icon = changeIcon();
	option.toolbox.feature.myFull.title = changeScreenTitle();
	myChart.setOption(option)
}