<div class="app-container">
<div class="resize-container" id="reportResizeContainer">
<!-- 图表内容 -->
</div>
</div>
/* 根据浏览器大小推断缩放比例 */
getScale(width = 1920, height = 1080) {
let ww = window.innerWidth / width
let wh = window.innerHeight / height
return ww < wh ? ww : wh
}
mounted() {
let dom = document.getElementById('reportResizeContainer') as HTMLElement
dom.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`
dom.style.width = `1920px`
dom.style.height = `1080px`
window.addEventListener('resize', () => {
if (dom) dom.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`
})
}
.app-container {
height: 100%;
width: 100%;
}
.resize-container {
position: fixed;
top: 50%;
left: 50%;
z-index: 999;
display: flex;
flex-direction: column;
overflow: hidden;
transition: all 0.3s;
transform-origin: left top;
}
