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

import * as echarts from 'echarts';
import styles from './mapComponent.less';
import React, { useEffect, useRef } from 'react';
import { queryMapJson, queryProvinceData } from '@/services/dataBoardService';
import { message } from 'antd';

interface propsData {
  userData: number;
  deviceData: number;
}

/**
 * 地图组件
 * @constructor
 */
const MapComponent: React.FC<propsData> = (props) => {
  const chartRef: any = useRef();
  const { userData, deviceData } = props;

  const renderMapData = (areaList: any) => {
    // 初始化统计图对象
    const myChart = echarts.init(chartRef.current);
    let options: any;
    queryMapJson().then((res) => {
      if (res && res.code === 0) {
        // 获取地图数据
        const uploadedDataURL = res.data.map_json;
        echarts.registerMap('myMap', uploadedDataURL);
        options = {
          tooltip: {
            show: false,
          },
          geo: {
            map: 'myMap',
            zoom: 1.1,
            show: true,
            roam: false,
            label: {
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                areaColor: '#091632',
                borderColor: '#1773c3',
                shadowColor: '#1773c3',
                shadowBlur: 20,
              },
            },
          },
          visualMap: {
            show: false,
            max: 1,
            inRange: {
              color: ['#ceb10b'],
            },
            seriesIndex: 0,
          },
          series: [
            {
              type: 'map',
              map: 'myMap',
              zoom: 1.1,
              geoIndex: 1,
              aspectScale: 0.75, //长宽比
              showLegendSymbol: true, // 存在legend时显示
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: '#d3d3d3',
                  },
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    color: '#ff0000',
                  },
                },
              },
              roam: false,
              itemStyle: {
                normal: {
                  areaColor: '#031525',
                  borderColor: '#3B5077',
                  borderWidth: 1,
                },
                emphasis: {
                  areaColor: '#0f2c70',
                },
              },
              data: areaList,
            },
          ],
        };

        myChart.setOption(options);
      } else {
        message.error(res?.message);
      }
    });
    // 组件卸载
    return () => {
      myChart.clear();
    };
  };

  // 获取数据
  const getAreaDataList = () => {
    queryProvinceData().then((res) => {
      if (res && res.code === 0) {
        const areaList = res.data.map((item: any) => {
          const nameWithoutCity = item.name.replace(/[省|市]$/, '');
          return {
            ...item,
            name: nameWithoutCity,
          };
        });
        renderMapData(areaList);
      }
    });
  };

  useEffect(() => {
    getAreaDataList();
  }, []);

  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 * 2}</div>
          </div>
          <div style={{ display: 'flex' }}>
            <div className={styles.content_title}>设备数</div>
            <div className={styles.content_value}>{deviceData * 6}</div>
          </div>
        </div>
      </div>
    </div>
  );
};
export default MapComponent;