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

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

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

/**
 * 地图组件
 * @constructor
 */
const MapComponent: React.FC<propsData> = (props) => {
  const chartRef: any = useRef();
  const { userData, areaList, mapData } = props;
  const data: any = mapData.map_json; //地图的数据来自之前引入的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 = (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);
    echarts.registerMap('shandong', data); //此步不可省略，要想展示一个地图，先需要注册，巨坑（官方根本无文档，全靠瞎猜,气死我了快）

    // 点位
    // const points = [];
    // // 线
    // const lineData = [];
    // for(let i=0;i<Object.keys(geoCoordMap).length;i++){
    //   points.push({
    //     name:Object.keys(geoCoordMap)[i],
    //     value:geoCoordMap[Object.keys(geoCoordMap)[i]]
    //   })
    //   lineData.push({
    //     name:`济南 -> ${Object.keys(geoCoordMap)[i]}`,
    //     value: 40,
    //     coords: [
    //       [117, 36.65],
    //       geoCoordMap[Object.keys(geoCoordMap)[i]]
    //     ]
    //   })
    // }
    // const colors = ['#46bee9'];

    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: [],
        },
        // {
        //   type: 'effectScatter',
        //   coordinateSystem: 'geo',
        //   showEffectOn: 'render',
        //   rippleEffect: {
        //     period: 5,
        //     scale: 5,
        //     brushType: 'fill'
        //   },
        //   hoverAnimation: true,
        //   label: {
        //     formatter: '{b}',
        //     position: 'right',
        //     offset: [15, 0],
        //     color: (param: { dataIndex: number; }) => colors[param.dataIndex % colors.length],
        //     show: true
        //   },
        //   itemStyle: {
        //     color: (param: { dataIndex: number; }) => {
        //       return colors[param.dataIndex % colors.length];
        //     },
        //     shadowBlur: 10,
        //     shadowColor: '#333',
        //     opacity: 0.75
        //   },
        //   emphasis: {
        //     itemStyle: {
        //       opacity: 1, //线条宽度
        //     }
        //   },
        //   data: points
        // },
        // {
        //   name: '济南',
        //   type: 'lines',
        //   zlevel: 2,
        //   symbol: ['none', 'arrow'],
        //   symbolSize: 7,
        //   effect: {
        //     show: true,
        //     period: 4,
        //     trailLength: 0.02,
        //     symbol: 'circle',
        //     symbolSize: 4,
        //     color: '#46bee9'
        //   },
        //   lineStyle: {
        //     width: 0.5, //线条宽度
        //     opacity: 0.5, //尾迹线条透明度
        //     curveness: .3, //尾迹线条曲直度
        //     shadowBlur: 10,
        //     color: '#46bee9'
        //   },
        //   emphasis: {
        //     lineStyle: {
        //       width: 2, //线条宽度
        //     }
        //   },
        //   data: lineData
        // }
      ],
    };
    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="装饰线条"
            style={{ width: '200px', height: '95px', transform: 'rotateY(180deg)' }}
          />
          <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;