大屏的适配方案二 zoom 缩放

1、使用zoom缩放，效果是给最外层div加上 {zoom:xxx,--zoom--:xxx},xxx是缩放值，这种按照宽度比例缩放的方式，会有出现纵向滚动条，或者下面空白的情况，看客户是否接受。

  //designDraftWidth 设计稿尺寸 (一般, pc端: 1920, 移动端: 750/375)
  let getFullWidth = () => window.innerWidth
  const resize = (): void => {
        /** zoom 的缩放性能更好, 能用zoom就用zoom */
      const testEl = document.createElement('div');
      const supportZoom: boolean = 'zoom' in testEl.style;
      const minScaleSize: number = 0.2;
        /** 计算缩放比例 */
    let scale: number = getFullWidth() / designDraftWidth
    scale = scale > minScaleSize ? scale : minScaleSize
   if (!supportZoom) {
      c.style.transform = `scale(${scale})`
      c.style.transformOrigin = 'left top'
      c.style.overflow = 'hidden'
    } else {
      c.setAttribute('style', `--zoom--: ${scale}`)
      c.style['zoom'] = `${scale}`
    }

  }
  const destory = (): void => {
    window.removeEventListener('resize', resize)
  }
  window.addEventListener('resize', resize)
  resize()

2、echarts图表会出现，焦点错位的情况，解决方案如下这里的--zoom--就是上面定义的css变量 --zoom--,原理就是取消zoom缩放，使用transform的scale进行缩放，这样图表上的焦点就不会偏移了。

.chart {
  width: 100%;
  height: 100%;
  /deep/ canvas {
    zoom: calc(1 / var(--zoom--, 1));
    transform: scale(var(--zoom--, 1));
    transform-origin: left top;
  }
}