大屏项目Echarts不同屏幕之间适配-526互联

1.解决方案：使用缩放，前提：需要严格按照设计图提供的像素大小，尽可能少使用百分比以及尽可能少使用rem插件（会导致rem和缩放同时生效反而比例不对）,如发现细节不对，需对该处细节精确去按照比例去调整大小，并配合echarts方法解决

2.解决方法：

　　2.1给最外层盒子设置缩放样式：

.large-screen-body {
  transform-origin: 0 0;  // 必备
  left: 50%;   // 因为下面计算公示向左移动了-50%，因此需要重新定圆心
  position: absolute;
  height: 100vh;
  box-sizing: border-box;
}

　　2.2通过设置设计稿大小，设置缩放计算公式

export const designHeight = 1080 // 设计稿 height
export const designWidth = 1920 // 设计稿 width

// 获取宽高比例
export const getScale = () => {
  const ww = window.innerWidth / designWidth
  const wh = window.innerHeight / designHeight
  const scale = ww < wh ? ww : wh
  const dWidth = window.innerWidth / scale
  const dHeight = window.innerHeight / scale
  // 目前缩放支持两种方案，一种是不等比（那么宽度和高度均可铺平。就是图片会出现拉伸的情况）
  return [scale, scale, dWidth, dHeight]
  // 另一种是等比，宽度可以铺平，但是高度在一些极端屏幕下会出现空白
  // return [ww, wh, dWidth]
}

const largeScreenStyle = computed(() => {
  return {
    transform: `scale(${getScale()[0]}, ${getScale()[1]}) translateX(-50%)`,
    height: `${designHeight}px`,
    width: `${getScale()[2]}px`
  }
})