Echats图表大屏自适应的实现方法 Echats图表大屏自适应的实现方

描述
实现
项目目录结构如下
效果图如下
总结

描述使用图表结合数据可以很直观的视觉效应，大屏展示已经成为企业数据展示的常见场景，如何做到大屏自适应是我们需要解决的一个问题，下面是其中一种解决方案，利用css的transform属性以及设计百分比，如有不足，请批评

实现
1.准备一个容器组件，width = 100vw,height = 100%,作为大屏展示的背景：

.screen-adapter {width: 100vw; min-height: 100%; max-height: 100vh; overflow: hidden; background: #0c1a3c; }

2.根据设计同学提供的设计图可以计算出每部分区域的百分比，例如总尺寸是w*h，其中一个图标宽高是w1 * h1，实现常规切图，此时由1-->2可得：

props: {w: { // 设计图尺寸宽type: Number,default: 1600},h: { // 设计图尺寸高type: Number,default: 900}},data () {return {style: {width: this.w + 'px',height: this.h + 'px',transform: 'scale(1) translate(-50%, -50%)' // 默认不缩放，垂直水平居中}}}.content-wrap {transform-origin: 0 0; position: absolute; top: 50%; left: 50%; }

3.基于第二步，需要根据大屏具体尺寸计算缩放比例，以及设置缩放比例，需要注意的是，绑定resize事件一定别忘了防抖，页面销毁别忘了移除监听事件：

mounted () {this.setScale()this.onresize = this.debounce(() => this.setScale(), 100)window.addEventListener('resize', this.onresize)},beforeDestroy () {window.removeEventListener('resize', this.onresize)}, methods: {// 防抖debounce (fn, t) {const delay = t || 500let timerreturn function () {const args = argumentsif (timer) {clearTimeout(timer)}const context = thistimer = setTimeout(() => {timer = nullfn.apply(context, args)}, delay)}},// 获取缩放比例getScale () {const w = window.innerWidth / this.wconst h = window.innerHeight / this.hreturn w < h ? w : h},// 设置缩放比例setScale () {this.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`}}

4.至此，大概结构已经得到，只需要将各部分图标组件还原的设计图放入之前的插槽即可，各部分图标组件的尺寸按照设计提供的百分比即可，所有代码大致如下：

// ScreenAdapter.vue.screen-adapter {width: 100%; min-height: 100vh; max-height: 100vh; overflow: hidden; background: #0c1a3c; }.content-wrap {transform-origin: 0 0; position: absolute; top: 50%; left: 50%; }

项目目录结构如下