可视化大屏适配scale方案
正常大小100%：
缩小到30%的视图：
使用css来实现页面的方法缩小：
view层：
<div
class="AllEchartsBox"
ref="AllEchartsBox"
:style="{
width: width + 'px',
height:height + 'px'
}"
>
<div class="boxChild">
<v-top></v-top>
<div class="echartsBody">
<el-row :gutter="10">
<!-- 左侧 -->
<el-col :span="6" class="el-colleft">
<v-left class="left"></v-left>
</el-col>
<!-- 右侧 -->
<el-col :span="18">
<v-right class="right"></v-right>
</el-col>
</el-row>
</div>
</div>
</div>
</template>
逻辑层：
<script>
import vTop from "./children/Top";
import vLeft from "./children/Left";
import vRight from "./children/Right";
export default {
name: "AllEcharts",
components: {
vTop,
vLeft,
vRight
},
data() {
return {
scale: 1,
width: 1920,
height: 1080
// 头部的高
// topHeight: 70
};
},
methods: {
getScale() {
const {
width, height } = this;
let ww = window.innerWidth / width;
// let wh = (window.innerHeight - this.topHeight) / height;
let wh = window.innerHeight / height;
return `${
ww},${
wh}`;
// 不是 16 ： 9的情况下
// if ((window.innerHeight-this.topHeight) < height) {
// return `${ww},${wh}`;
// }
// return ww < wh ? wh : ww;
},
setScale() {
this.scale = this.getScale();
if (this.$refs.AllEchartsBox) {
this.$refs.AllEchartsBox.style.setProperty("--scale", this.scale);
}
},
debounce(fn, delay) {
const delays = delay || 200;
let timer;
return function() {
const th = this;
const args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
timer = null;
fn.apply(th, args);
}, delays);
};
}
},
mounted() {
this.setScale();
window.addEventListener("resize", this.setScale);
// 防抖
// window.addEventListener("resize", this.debounce(this.setScale));
}
};
</script>
css层：
<style lang="less" scoped>
.AllEchartsBox {
position: relative;
height: 1080px;
width: 1920px;
.boxChild {
width: 100%;
height: 100%;
position: absolute;
transform-origin: left top 0px;
transform: scale(var(--scale));
transition: 0s;
z-index: 999;
}
.echartsBody {
// 减去99 == 79头部高 + 上下 20 px的间隙
height: calc(1080px - 99px);
padding-bottom: 10px;
margin: 10px 20px;
.el-row {
height: 100%;
.el-colleft {
padding-left: 0px !important;
}
.el-col {
height: 100%;
.left {
background-image: url("../../assets/img/AllEcharts/leftBoxBorder.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: calc(1080px - 99px);
}
.right {
height: calc(1080px - 99px);
}
}
}
}
}
</style>
20230615补充一个博主的npm包，原理和上面介绍的一致：
可视化大屏：autofit.js 一行搞定自适应
