1. 大屏怎么适配

适配过程简单思路：

保证16：9的比例,保证有一条边边能够占满实际的屏幕，另一条边根据比例调整

如图所示， $W_p$ 是实际页面的有效宽度， $H_p$ 是实际页面的有效高度，

个人根据这一比例计算，保证页面左右居中，上下居中。

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

2. REM

在渲染的index页面的head中设置，计算实际的页面宽高

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的计算原理，需要保证比例不变，且页面的宽度是实际REM的100倍（相等也可以，但是不便于计算，实际使用时取1%）

加入一个div的宽度是110px,实际屏幕的宽度是2400px，那么实际的 $rem = 110/2400 * 100$

那么就可以写这样一个函数

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

布局

在这类可视化项目中，一般每个元素的排布方式比较整齐固定，且是二维的，所以使用grid布局

假设要实现一个不规则的九宫格

<div className="home">
  <main>
    <section className="section1">
      <Chart1/>
      <Chart2/>
      <Chart3/>
    </section>
    <section className="section2">
      <Chart4/>
      <Chart5/>
      <Chart6/>
    </section>
    <section className="section3">
      <Chart7/>
      <Chart8/>
      <Chart9/>
    </section>
  </main>
</div>

.home {
  flex: 1; // 这三个属性保证home能占据剩余空间
  display: flex;
  flex-direction: column;

  > main {
    width: px(2420); // 实际页面宽度
    margin: 0 auto;
    padding: px(74) px(70) px(70) px(70);
    flex: 1;
    display: grid;
    grid-template:
      "box1 box2 box4 box5"725fr "box3 box3 box4 box5"322fr / 366fr 361fr 811fr 747fr;// 杠不是除法而是分割
        grid-column-gap: px(28);
        grid-row-gap: px(28);
    > section {
      text-align: center
    }

    > .section1 {
      grid-area: box1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    > .section2 {
      grid-area: box2;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    > .section3 {
      grid-area: box3;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}

echarts

1. 怎么用

使用echarts图表库，参考了配置和术语速查手册，修改对应参数

2.怎么自己画地图

官方示例使用百度地图，实际显示效果不佳，当然需要标注地图仅显示中国部分区域。

参考官方文档geo，在geo中将注册的json地图'CN'设为map。

在serues中设置coordinateSystem: 'geo'，即可使用。

echarts结合geo绘制地图热点图

3.怎么动态更新数据

// 改写前

export const Chart1 = () => {
  const divRef = useRef(null);
  useEffect(() => {
    var myChart = echarts.init(divRef.current);
    myChart.setOption({
        ...
        ...
    })
  },[])
  return(
    ... // 写模板
  )
  }

// 改写后

export const Chart1 = () => {
  const divRef = useRef(null);
  const myChart = useRef(null);
  const data = [] // 初始数据

  useEffect(() => {
    setInterval(() => {
      const newData = $get(data); // 异步读取数据
      fetchData(newData)
    },1000)
  },[])
 // 将配置项封装成一个读取数据的函数
  const fetchData = (data) => {
    myChart.current.setOption(({
      ...
      ...
    }))
  }
 // 挂载
  useEffect(() => {
    myChart.current = echarts.init(divRef.current);
    x(data)
  }, []);

  return(
      ... // 模板
  )
  }

4. 踩坑

在实现日期格式化时，新版本5.X.X的formatTime有删除线，且在浏览器控制台有警告提示.

需要将

let time=echarts.time.format(new Date(),'yyyy-MM-dd');

改为

echarts.time.format(time, "{yyyy}-{MM}-{dd}", true)

大屏可视化项目经验若干