react下数据可视化大屏处理方案

开发rc-screen-wrapper高阶组件

全屏大数据使用全屏hock组件，根据适配的最大设计稿缩放的容器组件，非全屏组件下宽度占满可视区域，左右有其它内容的时候可以传入othersWidth来重新计算可利用区域宽度，全屏模式下，设计稿宽高比例大于可视区域宽高比例时宽度占满，小于等于的话则高度占满

安装： npm i rc-screen-wrapper -S
git地址
demo预览

使用

import React from 'react';
import fullScreen from 'rc-screen-wrapper';

class Page extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {}
  }

  render() {
    const { screenScale, setScale, switchFullScreen, style, isFullScreen } = this.props;

    return (
      <div
        style={{
          width: 1920, height: 1280, backgroundColor: "green", textAlign: "center", lineHeight: "1205px",
          color: "#fff", fontSize: 30, ...style, position: "relative",
          backgroundImage: `url(https://staticfile.xiaofubao.com/center/assets/yx/backgroundImage.png)`,
          backgroundSize: "100% 100%",
        }}
      >
        <div
          style={{ position: "absolute", right: 100, top: 100 }}
          onClick={switchFullScreen}
        >
          {isFullScreen ? "" : "全屏"}
        </div>
        # 设计稿宽高比例{setScale} #
        可视区域{screenScale}
      </div>
    );
  }
}
export default fullScreen(Page)({
  width: 1920,
  height: 1280,
  // othersWidth: 非全屏模式下左右两侧有其它的内容占据的宽度
});

主要原理

1. 大数据可视化全屏（未全屏）需要适配不同的屏幕的大小，以适配最大分辨率的设计稿开发
2. 通过scale按可视区域（可用区域）宽高来缩放，margin负值将内容拉回原来的位置
3. 高阶组件注入全屏方法、scale后的样式

      countScaleStyle = () => {
        let scaleStyle = {};
        const originWidth = width || 1920, originHeight = height || 1205;
        let canUseWidth = document.body.offsetWidth - othersWidth;
        let canUseHeight = document.body.offsetHeight - othersHeight;
        // 当设计草图的宽高比大于可视区域的宽高比时，宽度占满
        let shouldFullWidth = (originWidth / originHeight) > (canUseWidth / canUseHeight);
        // 宽度占满
        if (!this.isFullScreen() || shouldFullWidth) {
          const currentWidth = canUseWidth;
          const scaleValue = (currentWidth / originWidth);
          const currentHeight = originHeight * scaleValue;
          const marginTop = (originHeight - currentHeight) / 2;
          const marginLeft = (originWidth - currentWidth) / 2;
          if (currentWidth <= 1920) {
            scaleStyle = {
              transform: `scale(${scaleValue})`,
              marginTop: - marginTop,
              marginLeft: - marginLeft,
            }
          }
        } else {
          // 高度占满
          const currentHeight = canUseHeight;
          const scaleValue = (currentHeight / originHeight);
          const currentWidth = originWidth * scaleValue;
          const marginTop = (originHeight - currentHeight) / 2;
          const marginLeft = (originWidth - canUseWidth) / 2;
          if (currentWidth <= 1920) {
            scaleStyle = {
              transform: `scale(${scaleValue})`,
              marginTop: - marginTop,
              marginLeft: - marginLeft,
            }
          }
        }
        return scaleStyle;
      }