如何适配屏幕

屏幕适配公式

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

页面左右居中，上下居中，四周留白即可；

然后在 head 里用 js 设置 1rem=Wp/100

• 假设设计稿的尺寸是16:9，在屏幕上展示时可能就会遇到屏幕过高或者过宽的情况，所以对项目要设置等比例的放大或者缩小

• 当屏幕过宽时，即宽高比大于16:9，我们需要根据屏幕的高度确定页面的宽度，确定页面的宽度后，就可以根据设计稿比例求出页面高度

• 当屏幕过高时，即宽高比小于或等于16:9，页面宽度等于屏幕的宽度，之后再同理求出页面高度

当像素不能用时：rem

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

• 获取屏幕的宽度高，并根据公式确定页面的宽高

const clientWidth = document.documentElement.clientWidth;
// 得到屏幕宽度

const clientHeight = document.documentElement.clientHeight;
// 得到屏幕高度

window.pageWidth = clientWidth / clientHeight > 16 / 9 ? clientHeight * (16 / 9) : clientWidth;
// 定义页面宽度

const pageHeight = pageWidth / (16 / 9);
// 定义页面高度

页面布局

• 在页面布局的时候，使用的是grid布局，grid布局方便可控

使用地图

搜索 china geo json（我未使用阿里云的地图数据，我参考的是GeoJSON.cn）

地图高亮及轮播

参考Echarts官方文档

参考文档

参考文章

import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";
import { createEchartsOptions } from "../shared/create-echarts-options";
import { px } from "../shared/px";
import china from "../geo/china.json";
import AreaArray from "../shared/area";

export const Chart6 = () => {
  const divRef = useRef(null);
  let mTime = undefined;
  const myChart = useRef(null);
  let index = -1;

  useEffect(() => {
    myChart.current = echarts.init(divRef.current);
    // @ts-ignore
    echarts.registerMap("CN", china);
    let chartOption = {
      xAxis: { show: false },
      yAxis: { show: false },
      tooltip: {
        triggerOn: "mousemove | click",
        backgroundColor: "rgba(15, 17, 58)",
        borderColor: "rgba(84, 112, 198)",
        borderWidth: px(2),
        transitionDuration: 0.2,
        textStyle: {
          color: "white",
          fontSize: px(16),
        },
      },
      visualMap: {
        min: 0,
        max: 34,
        left: "5%",
        top: "bottom",
        text: ["高", "低"],
        inRange: {
          color: [
            "rgba(109,127,238,1)",
            "rgba(109,127,238,0.8)",
            "rgba(109,127,238,0.6)",
            "rgba(109,127,238,0.5)",
            "rgba(109,127,238,0.4)",
            "rgba(109,127,238,0.3)",
            "rgba(109,127,238,0.2)",
            "rgba(109,127,238,0.1)",
            "rgba(109,127,238,0.05)",
          ],
        },
        show: true,
        textStyle: {
          color: "white",
          fontSize: px(16),
        },
      },
      series: [
        {
          name: "分布情况",
          type: "map",
          map: "CN", // 自定义扩展图表类型
          label: { show: false, color: "white" },
          itemStyle: {
            shadowColor: "#01091f",
            shadowBlur: px(2),
            color: "rgba(255,255,255,0)",
            areaColor: "#010D3D",
            borderColor: "#2891BD",
            emphasis: {
              label: { show: true, color: "white" },
              areaColor: "#010D3D",
            },
          },
          data: AreaArray(),
        },
      ],
    };
    myChart.current.setOption(createEchartsOptions(chartOption));
  }, []);
  const mapActive = () => {
    const dataLength = china.features.length;
    mTime = setInterval(() => {
      myChart.current.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
        dataIndex: index,
      });
      index++;
      myChart.current.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: index,
      });
      myChart.current.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: index,
      });
      if (index > dataLength) {
        return (index = 0);
      }
    }, 2000);
  };
  useEffect(() => {
    mapActive();
  }, []);
  const onMouseOver = () => {
    clearInterval(mTime);
    mTime = undefined;
    console.log(mTime);
    myChart.current.dispatchAction({
      type: "downplay",
      seriesIndex: 0,
      dataIndex: index,
    });
  };
  const onMouseOut = () => {
    mapActive();
  };

  return (
    <div className="bordered 籍贯">
      <h2>全市犯罪人员籍贯分布地</h2>
      <div className="wrapper">
        <div
          onMouseOver={onMouseOver}
          onMouseOut={onMouseOut}
          ref={divRef}
          className="chart"
        />

        <div className="notes">此地图仅显示中国部分区域</div>
      </div>
    </div>
  );
};