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

import * as echarts from 'echarts';
import styles from './mapComponent.less';
import React, { useEffect, useRef } from 'react';
import chinaMap from '../../mapJson/shandongMapData.json';
import border from '../../../public/assets/decoration_six.png';
import * as datav from '@jiaminghi/data-view-react';

interface propsData {
  userData: object;
  areaList: any;
}

/**
 * 地图组件
 * @constructor
 */
const MapComponent: React.FC<propsData> = (props) => {
  const chartRef: any = useRef();
  const { userData, areaList } = props;
  const data: any = chinaMap; //地图的数据来自之前引入的json文件
  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 = (mapData: string | any[]) => {
    const res = [];
    for (let i = 0; i < mapData.length; i++) {
      const geoCoord = geoCoordMap[mapData[i].name];
      if (geoCoord) {
        res.push({
          name: mapData[i].name,
          value: geoCoord.concat(mapData[i].value),
        });
      }
    }
    return res;
  };

  useEffect(() => {
    const myChart = echarts.init(chartRef.current);
    echarts.registerMap('shandong', data); //此步不可省略，要想展示一个地图，先需要注册，巨坑（官方根本无文档，全靠瞎猜,气死我了快）
    const options = {
      geo: {
        show: true,
        map: 'shandong',
        roam: false,
        zoom: 1.2,
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        itemStyle: {
          normal: {
            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: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: true,
            },
            emphasis: {
              show: true,
            },
          },
          itemStyle: {
            normal: {
              color: '#ddb926',
            },
          },
        },
        {
          type: 'map',
          map: 'shandong',
          zoom: 1.2,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
              textStyle: {
                color: '#fff',
              },
            },
          },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: '#031525',
              borderColor: '#3B5077',
              borderWidth: 1,
            },
            emphasis: {
              areaColor: '#0f2c70',
            },
          },
          data: [],
        },
      ],
    };
    myChart.setOption(options, true);
    // 组件卸载
    return () => {
      myChart.clear();
    };
  }, []);

  return (
    <div className={styles.container}>
      <div ref={chartRef} className={styles.mapContent} />
      <div className={styles.content_num}>
        <div style={{ position: 'relative' }}>
          <img src={border} alt="装饰线条" />
          <div className={styles.content}>
            <datav.DigitalFlop
              config={userData}
              className={styles.content_value}
              style={{ width: '200px', height: '50px' }}
            />
            <div className={styles.content_title}>用户数</div>
          </div>
        </div>
      </div>
    </div>
  );
};
export default MapComponent;