可视化大屏

时间:2021-6-7 作者:qvyue

如何适配屏幕

  • 算法:
可视化大屏
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


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

将上面的中文替换成英文


    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 = `
        html {
          font-size: ${pageWidth / 100}px
        }
      `
     document.write(string) 
root.style.width = pageWidth + 'px'; root.style.height = pageHeight + 'px'; root.style.marginTop = (clientHeight - pageHeight) / 2 + 'px'

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 (
    
) }

上面我们在 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]
      }]
    })
  }, [])
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。