大屏可视化项目实践

一、使用 rem 和 px 函数适配各种屏幕

1. 算法

Wp为页面有效宽度，Hp为页面有效高度。

页面左右居中，上下居中。

若页面宽/高＞16/9，就左右留白。若页面宽/高＜16/9，就上下留白。

2. 使用 rem

获取设备宽高，并得到页面宽高。

const clientWidth = document.documentElement.clientWidth // 得到设备宽度
const clientHeight = document.documentElement.clientHeight // 得到设备高度
const pageWidth = clientWidth / clientHeight > 16 / 9 ? clientHeight * (16 / 9) : clientHeight; // 定义页面宽度
const pageHeight = pageWidth / (16 / 9) // 定义页面高度

设置 1rem = Wp / 100。

const string = `<style>html{font-size: ${pageWidth/100}px}</style>`
document.write(string)

用 rem 表达页面宽度。

假设某div在设计稿中长100px，设计稿整体宽度2420px。那么该div在页面中长为100 / 1920 * 100rem。

3. 使用 px() 函数

按照上方公式，新建一个px.ts文件，声明全局函数px()并导出。

export const px = (n) => n / 2420 * (window as any).pageWidth;

二、使用 grid 布局

使用grid布局将页面分成几块。

<main>
    <section className="section1"></section>
    <section className="section2"></section>
    <section className="section3"></section>
    <section className="section4"></section>
    <section className="section5"></section>
</main>

>main {
    flex: 1;
    display: grid;
    grid-template: "box1 box2 box4 box5"755fr "box3 box3 box4 box5"363fr / 366fr 361fr 811fr 747fr;

    >.section1 {
      grid-area: box1;
      background: pink;
    }

    >.section2 {
      grid-area: box2;
      background: lightgrey;
    }

    >.section3 {
      grid-area: box3;
      background: lightblue;
    }

    >.section4 {
      grid-area: box4;
      background: lightcyan;
    }

    >.section5 {
      grid-area: box5;
      background: lightyellow;
    }
  }

三、使用 echarts

参考官方配置手册和术语速查手册向页面添加各类图表。