vue + echarts 大屏显示 分辨率适配问题

问题描述： 

做的大屏，设计稿事1920*1080 的，但是在不同分辨率的电脑上，显示不同，有得太大有的太小

解决思路：

给最外面的盒子做缩放，动态获取计算的屏幕的大小，然后宽高分别与1920和1080做百分比，然后进行比例缩放

代码：

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

/**              * 入参              * @param id 自适应Box Id              * @param width 自适应原始宽度，默认1920              * @param height 自适应原始高度，默认1080              */             FullContainer(id, width = 1920, height = 1080) {                 document                     .getElementById(id)                     .setAttribute("style", `overflow: hidden;transform-origin: left top;`);                 document.getElementById(id).style.width = `${width}px`;                 document.getElementById(id).style.height = `${height}px`;                 this.id = id;                 this.width = width;                 this.height = height;                 this.allWidth = width;                 this.debounce(100, this.initWH(id));                 this.bindDomResizeCallback();             },               initWH(id, resize = true) {                 return new Promise(resolve => {                     const dom = document.getElementById(id);                       let width = dom ? dom.clientWidth : 0;                     let height = dom ? dom.clientHeight : 0;                       if (!dom) {                         console.warn(                             "DataV: Failed to get dom node, component rendering may be abnormal!",                         );                     } else if (!width || !height) {                         console.warn(                             "DataV: Component width or height is 0px, rendering abnormality may occur!",                         );                     }                       if (resize) this.onResize();                     resolve();                 });             },               onResize() {                 const {                     allWidth,                     id                 } = this;                   document.getElementById(id).style.transform = `scale(${         document.body.clientWidth / allWidth       },${document.body.clientHeight / this.height})`;             },               bindDomResizeCallback() {                 window.addEventListener("resize", () => {                     this.debounce(100, this.initWH(this.id));                 });             },               debounce(delay, callback) {                 let lastTime;                   return function() {                     clearTimeout(lastTime);                       const [that, args] = [this, arguments];                     lastTime = setTimeout(() => {                         callback.apply(that, args);                     }, delay);                 };             },

　　注： 这也是借鉴的网友的，但是博客地址找不到了，侵权请联系