echarts 地图开发, 更具屏幕适配rem

jsx部分

 useEffect(() => {
    myEcharts = echarts.init(document.querySelector('#mainMap'), 'dark');
    echarts.registerMap('china', china);
    window.addEventListener('resize', resizeFun);

    return () => {
      window.removeEventListener('resize', resizeFun);
      emitter.removeListener('onChangeMnue', resizeFun);
      myEcharts.dispose();
    };
  }, []);
  useEffect(() => {
  //获取经纬度
    coords = tude.filter(v => v.region === (mapcitySelected?.lable || mapcitySelected?.label))[0];
    let tooltipData = mapRegionData[mapcitySelected?.value];
    myEcharts.setOption(
      option({
        coords,
        params: {
          ...tooltipData,
          deptName: mapcitySelected?.lable || mapcitySelected?.label,
        },
        loading,
        scale: remSize,
      }),
      true,
    );
  }, [tooltipData, mapcitySelected]);
  
 function resizeFun() {
    setTimeout(() => {
      myEcharts.resize();
    }, 500);
  }


  return (
    <div className={styles.mapcenter}>
      <div className={styles.map}>
        <div style={{ width: '100%', height: '100%' }} id="mainMap" />
      </div>
    </div>
  );
}

js部分

import citys from '@/pages/EnergyAggregation/assets/citys';
import mapSymbol from '@/pages/EnergyAggregation/assets/map_symbol.png';
export const tyNaN = value => {
  const val = Number(value).toFixed(2);
  if (isNaN(val) && val !== null) {
    return Number(0).toFixed(2);
  }
  return val;
};

const newFormartter = (params, scale) => {
  const { deptName = '-', ratedCapacity = '-', ratedPower = '-' } = params;
  let label = {
    show: true,
    color: '#fff',
    borderRadius: 1,
    formatter: function() {
      return [
        `{title|${deptName}}{abg|}`,
        '{hr|}',
        `{dataLeft|可调资源}{rate|${tyNaN(ratedCapacity / 1000)}}{unit|MWh}`,
        `{dataLeft|可调功率}{rate|${tyNaN(ratedPower / 1000)}}{unit|MW}`,
      ].join('\n');
    },
    backgroundColor: '#030304',
    borderRadius: 5,
    borderColor: '#18A0FB',
    borderWidth: 1,
    rich: {
      title: {
        align: 'left',
        color: '#18A0FB',
        padding: [0, 10 * scale, 0, 10 * scale],
        fontSize: 16 * scale,
        fontFamily: 'PingFang SC',
      },
      abg: {
        // align: 'left',
        borderColor: '#777',
        width: '100%',
        height: 32 * scale,
        borderRadius: [4 * scale, 4 * scale, 0, 0],
        fontFamily: 'PingFang SC',
      },
      hr: {
        align: 'left',
        borderColor: '#9DA0A6',
        width: '100%',
        borderWidth: 0.3 * scale,
        height: 0,
      },
      dataLeft: {
        align: 'left',
        height: 25 * scale,
        lineHeight: 25 * scale,
        padding: [0, 20 * scale, 0, 10 * scale],
        color: '#9DA0A6',
        fontFamily: 'PingFang SC',
      },
      rate: {
        align: 'right',
        height: 25 * scale,
        fontWeight: 500,
        lineHeight: 25 * scale,
        fontFamily: 'PingFang SC',
      },
      unit: {
        align: 'right',
        color: '#9DA0A6',
        padding: [0, 10 * scale, 0, 0],
        fontFamily: 'PingFang SC',
      },
    },
  };
  return label;
};
const mydata = [
  { name: '南海诸岛', color: '#1A1C21' },
  { name: '黑龙江', color: '#298CFF' },
  { name: '内蒙古', color: '#0058BF' },
  { name: '新疆', color: '#298CFF' },
  { name: '青海', color: '#0058BF' },
  { name: '湖北', color: '#0058BF' },
  { name: '海南', color: '#0058BF' },
  { name: '广东', color: '#0075FF' },
  { name: '浙江', color: '#0075FF' },
];

function tudeFun(tude) {
  // const arr = [tude[0] < 108 ? tude[0] + 3 : tude[0] - 3, tude[1] > 34 ? tude[1] + 5 : tude[1] - 5];
  const arr = [tude[0] - 3, tude[1] + 5];
  return { coords: [tude, arr] };
}
const option = ({ coords, params = {}, scale = 1 }) => {
  const { longitude, latitude, province } = coords;
  citys.forEach(v => {
    if (!mydata.some(x => x.name === v.province)) mydata.push({ name: v.province });
  });
  mydata.forEach(v => {
    if (v.name === province) {
      v.selected = true;
    } else v.selected = false;
    v.itemStyle = { areaColor: v.color || '#002E64', borderColor: '#18A0FB' };
  });
  const data = mydata.map((v, i) => ({ ...v }));
  const linesSeries = {
    type: 'lines',
    zlevel: 2,
    coordinateSystem: 'geo',
    symbol: 'image://' + mapSymbol,
    symbolSize: [20 * scale, 0],
    effect: { show: true },
    geoIndex: 0,
    silent: true,
    label: params ? newFormartter(params, scale) : {},
    lineStyle: {
      borderColor: '#18A0FB',
      opacity: 1,
      color: '#18A0FB',
      shadowColor: '#18A0FB',
      shadowBlur: 1,
    },
    data: [tudeFun([Number(longitude), Number(latitude)])],
  };

  return {
    backgroundColor: 'transparent',
    geo: {
      map: 'china',
      show: false,
    },
    visualMap: {
      type: 'continuous',
      min: 10,
      max: 50,
      inRange: { color: ['#002E64', '#298CFF'] },
      align: 'center',
      itemWidth: 12 * scale,
      itemHeight: 240 * scale,
      text: ['', '可调功率'],
      showLabel: true,
      textGap: 10 * scale,
      orient: 'horizontal',
      seriesIndex: 0,
      left: 10 * scale,
      bottom: 30 * scale,
    },
    series: [
      {
        zoom: 1,
        label: { color: 'white' },
        emphasis: { itemStyle: { areaColor: '#0075FF' }, label: { show: true, color: 'white' } },
        select: { itemStyle: { color: '#0075FF' }, label: { show: true, color: 'white' } },
        type: 'map',
        map: 'china',
        roam: false,
        // top: 100 * scale,
        // bottom: 65 * scale,
        data,
      },
      linesSeries,
    ],
    animation: false,
  };
};

export { citys, option };

**

rem适配 自定义hooks

外部应用 const remSize = useRem(1920);

**

import { useState, useEffect } from 'react';

let timer = null;

function useRem(uiSize) {
  const [remSize, setRemSize] = useState((window.innerWidth * 100) / uiSize);
  useEffect(() => {
    setFontSize();
    window.addEventListener('resize', setFontSize);
    return () => {
      window.removeEventListener('resize', setFontSize);
      window.document.querySelector('html').removeAttribute('style');
      timer && clearTimeout(timer);
    };
  }, []);

  function setFontSize() {
    // timer && clearTimeout(timer)
    timer = setTimeout(function() {
      const remSize = (window.innerWidth * 100) / uiSize;
      setRemSize(remSize);
      window.document.querySelector('html').setAttribute('style', `font-size: ${remSize}px;`);
    }, 200);
  }

  return remSize;
}

export default useRem;