关于可视化大屏适配-Toy模板网

这篇具有很好参考价值的文章主要介绍了关于可视化大屏适配。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、目前市场上适配方案有两种；

vw、vh方案：

原理：按照设计稿的尺寸，将px按比例计算转为vw和vh；

优点：不会存在失真情况、可以动态计算图表的宽高，字体等，灵活性较高，当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况；

缺点：类似第三方echart图表都需要单独做字体、间距、位移的适配，比较麻烦

核心代码以sass为例

/*util.scss*/
@use 'sass:math';
//默认设计稿的宽度
$designWidth: 1920;
//默认设计稿的高度
$designHeight: 1080;

//px转为vw的函数
@function vw($px) {
  @return math.div($px, $designWidth) * 100vw;
}

//px转为vh的函数
@function vh($px) {
  @return math.div($px, $designHeight) * 100vh;
}

然后页面中引入util.scss、将20px更换为vh(20)

@import '@/assets/style/util.scss';
 .dateText {
   padding-top: vh(20);
  }
 .weatherText {
    padding-top: vh(32);
  }

在js中使用到尺寸可以用下面这个工具方法去做转换

const styleUtil = {
  // px转vw
  px2vw: function (_px, unit) {
    if (unit) {
      return (_px * 100.0) / designWidth + unit;
    }
    return (_px * 100.0) / designWidth + 'vw';
  },
  // px转vh
  px2vh: function (_px, unit) {
    if (unit) {
      return (_px * 100.0) / designHeight + unit;
    }
    return (_px * 100.0) / designHeight + 'vh';
  },
};

chart 图表中的适配用以下方法、需要注意的是、在resize的时候、让echart也resize一下

const fitChartSize = (size, defaultHeight = 1080) => {
  // 默认宽高问设计
  let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  console.log('clientHeight::: ', clientHeight);
  if (!clientHeight) return size;

  let scale = clientHeight / defaultHeight;
  return Number((size * scale).toFixed(3));
};

缩放方案

原理：按照设计稿的尺寸布局，采用等比例缩放、在不同屏幕尺寸中将其通过放大缩小最外层的dom为一定比例、来保持原本布局；

优点：代码量少，适配简单、一次处理后不需要在各个图表中再去单独适配；

缺点：如果缩放比例超过一定程度，字体图片等就会失真、会留白

核心代码

  const usePreviewFitScale = (width, height, scaleDom, callback) => {
  // * 画布尺寸（px）
  const baseWidth = width;
  const baseHeight = height;

  // * 默认缩放值
  const scale = {
    width: 1,
    height: 1,
  };

  // * 需保持的比例
  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));
  const calcRate = () => {
    // 当前屏幕宽高比
    const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5));

    if (scaleDom) {
      if (currentRate > baseProportion) {
        // 表示更宽 以高度为基准 需要保持比例的宽
        scale.width = parseFloat(((window.innerHeight * baseProportion) / baseWidth).toFixed(5));
        scale.height = parseFloat((window.innerHeight / baseHeight).toFixed(5));
        const offsetW = ((window.innerWidth - window.innerHeight * baseProportion) / 2).toFixed(5);
        scaleDom.style.transform = `translateX(${offsetW}px) scale(${scale.width}, ${scale.height})`;
      } else {
        // 表示更高 以宽度为基准 需要保持比例的高
        scale.width = parseFloat((window.innerWidth / baseWidth).toFixed(5));
        scale.height = parseFloat((window.innerWidth / baseProportion / baseHeight).toFixed(5));
        scaleDom.style.transform = `translateX(0px) scale(${scale.width}, ${scale.height})`;
      }
      if (callback) callback(scale);
    }
  };

  const resize = throttle(() => {
    calcRate();
  }, 200);

  // * 改变窗口大小重新绘制
  const windowResize = () => {
    window.addEventListener('resize', resize);
  };

  // * 卸载监听
  const unWindowResize = () => {
    window.removeEventListener('resize', resize);
  };

  return {
    calcRate,
    windowResize,
    unWindowResize,
  };
};