yongxu-web/src/pages/DataBoard/mapComponent.tsx

import * as echarts from 'echarts';
import styles from './mapComponent.less';
import React, { useEffect, useRef } from 'react';

interface propsData {
  userData: number;
  deviceData: number;
  areaList: any;
  mapData: any;
}

/**
 * 地图组件
 * @constructor
 */
const MapComponent: React.FC<propsData> = (props) => {
  const chartRef: any = useRef();
  const { userData, deviceData, areaList, mapData } = props;
  const geoCoordMap = {
    济南市: [117, 36.65],
    青岛市: [120.33, 36.07],
    淄博市: [118.05, 36.78],
    枣庄市: [117.57, 34.86],
    东营市: [118.49, 37.46],
    烟台市: [121.39, 37.52],
    潍坊市: [119.1, 36.62],
    济宁市: [116.59, 35.38],
    泰安市: [117.13, 36.18],
    威海市: [122.1, 37.5],
    日照市: [119.46, 35.42],
    临沂市: [118.35, 35.05],
    德州市: [116.29, 37.45],
    聊城市: [115.97, 36.45],
    滨州市: [118.03, 37.36],
    菏泽市: [115.47, 35.25],
  };

  // 处理数据结构
  const convertData = (item: string | any[]) => {
    const res = [];
    for (let i = 0; i < item.length; i++) {
      const geoCoord = geoCoordMap[item[i].name];
      if (geoCoord) {
        res.push({
          name: item[i].name,
          value: geoCoord.concat(item[i].value),
        });
      }
    }
    return res;
  };

  useEffect(() => {
    // 初始化统计图对象
    const myChart = echarts.init(chartRef.current);
    if (mapData && mapData.map_json) {
      const data = JSON.parse(mapData.map_json);
      echarts.registerMap('map', data);
      const options = {
        geo: {
          show: true,
          map: 'map',
          roam: false,
          zoom: 1.2,
          label: {
            show: false,
          },
          itemStyle: {
            areaColor: '#091632',
            borderColor: '#1773c3',
            shadowColor: '#1773c3',
            shadowBlur: 20,
          },
        },
        series: [
          {
            name: 'light',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(areaList),
            symbolSize: function (val: number[]) {
              return val[2];
            },
            label: {
              formatter: '{b}',
              position: 'right',
              show: true,
            },
            itemStyle: {
              color: '#ddb926',
            },
          },
          {
            type: 'map',
            map: 'map',
            zoom: 1.2,
            label: {
              show: false,
              color: '#fff',
            },
            roam: false,
            itemStyle: {
              areaColor: '#031525',
              borderColor: '#3B5077',
              borderWidth: 1,
            },
            data: [],
          },
        ],
      };
      myChart.setOption(options);
    }
    // 组件卸载
    return () => {
      myChart.clear();
    };
  }, []);

  return (
    <div className={styles.container}>
      <div ref={chartRef} className={styles.mapContent} />
      <div className={styles.content_num}>
        <div className={styles.content}>
          <div style={{ display: 'flex' }}>
            <div className={styles.content_title}>用户数</div>
            <div className={styles.content_value}>{userData}</div>
          </div>
          <div style={{ display: 'flex' }}>
            <div className={styles.content_title}>设备数</div>
            <div className={styles.content_value}>{deviceData}</div>
          </div>
        </div>
      </div>
    </div>
  );
};
export default MapComponent;