可视化大屏

如何适配屏幕

• 算法：

image.png

上图中如果设备的宽度/设备的高度 > 16/9，Wp 就等于 设备高度 * 16/9 ，否则如果小于等于 16/9 的话，就等于设备宽度。
Wp 为页面有效宽度，Hp 为页面有效高度
页面左右居中，上下居中，四周留白即可
然后在 head 里用 JS 设置 1rem = Wp / 100（下文中会用到）

• 用 rem

  
  

假设某 div 在设计稿中长 100px，设计稿宽度 1920px，
那么该 div 在页面中长为 100/1920 X 100rem
最后可以写一个 px() 函数来计算 100px 对应的 rem

实战

1. 适配

在 html 里根据上面的公式设置基础 font-size

<script>
    const 设备宽度 = document.documentElement.clientWidth
    const 设备高度 = document.documentElement.clientHeight
    let 页面宽度
    if (设备宽度 / 设备高度 > 16/9) {
      页面宽度 = 设备高度 * (16/9)
    } else {
      页面宽度 = 设备宽度
    }
    const 页面高度 = 页面宽度 / (16 /9)
    const string = `<style>
        html {
          font-size: ${pageWidth / 100}px
        }
      </style>`
     document.write(string) 
  </script>
<div id="root"></div>
<script>
  root.style.width = 页面宽度 + 'px';
  root.style.height = 页面高度 + 'px';
  root.style.marginTop = (设备高度 - 页面高度) / 2 + 'px'
</script>

将上面的中文替换成英文

<script>
    const clientWidth = document.documentElement.clientWidth;
    const clientHeight = document.documentElement.clientHeight;
    const pageWidth = (clientWidth / clientHeight > 16/9) ? clientHeight * (16/9) : clientWidth;
    const pageHeight = pageWidth / (16 /9);
    const string = `<style>
        html {
          font-size: ${pageWidth / 100}px
        }
      </style>`
     document.write(string) 
</script>
<div id="root"></div>
<script>
  root.style.width = pageWidth + 'px';
  root.style.height = pageHeight + 'px';
  root.style.marginTop = (clientHeight - pageHeight) / 2 + 'px'
</script>

2. 将 px 替换成 rem

这里我们设计稿的宽度是 2420

• helper.scss

@function px($n) {
  @return $n / 2420 * 100rem;
}

• demo.scss

@import "../shared/helper";

.x {
    width: px(367);
    height: px(315);
    border: 1px solid red;
}

3. 使用 echarts

import * as echarts from 'echarts';
export const Home = () => {
  const divRef = useRef(null)
  useEffect(() => {
    let myChart = echarts.init(divRef.current);
    myChart.setOption({
      xAxis:{
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
        axisLabel: {
          fontSize: 6 // 设置x轴字体大小（默认单位px）
        }
      },
      yAxis:{
        splitLine: {show: false},
        axisLabel: {
          fontSize: 6
        }
      },
      grid: { // 设置图表的 padding 填充值
        x: 20,
        y: 20,
        x2: 20,
        y2: 20
      }, 
      series: [{
        type: 'bar',
        data: [10, 20, 30, 40, 50]
      }]
    })
  }, [])
  return (
    <div className="chart" ref={divRef} />
  )
}

上面我们在 echarts 里设置的字体大小都是以 px 为单位的，所以这里我们需要通过前面的公式

，又因为我们在 echarts 里是以 px 为单位，所以不能写成 rem，我们需要把 100rem 换成页面真实的宽度 pageWidth

const px = (n) => n / 2420 * (window as any).pageWidth;
useEffect(() => {
    let myChart = echarts.init(divRef.current);
    myChart.setOption({
      textStyle: {
        fontSize: px(12),
        color: '#79839E'
      },
      xAxis:{
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
        axisLabel: {
          fontSize: px(12)
        }
      },
      yAxis:{
        splitLine: {show: false},
        axisLabel: {
          fontSize: px(12)
        }
      },
      grid: {
        x: px(40),
        y: px(40),
        x2: px(40),
        y2: px(40)
      }, 
      series: [{
        type: 'bar',
        data: [10, 20, 30, 40, 50]
      }]
    })
  }, [])