<template>
<div>
<div ref="chartRef" class="chart"></div>
</div>
<div @click="handleFullScreen">全屏</div>
</template>
<script lang="ts" setup>
const chartRef = ref()
const handleFullScreen = () => {
let element = chartRef.value
if (!element) {
return
}
// 全屏查看
if (element.requestFullScreen) {
// HTML W3C 提议
element.requestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// Webkit
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
// Firefox
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();
}
}
</script>
echarts5图表全屏功能
最新推荐文章于 2024-06-12 09:33:10 发布