antd react echarts地图组件及使用

 地图组件：

import { useRef, useEffect } from "react";
import * as echarts from "echarts";
import chinaJson from './chinaJson';

const MapIndex = ({
  option,
  width = "100%",
  height = "100%",
}) => {
  const ref = useRef(null);
  let mapInstance;
  const renderMap = () => {
    if (ref.current) {
      const renderedMapInstance = echarts.getInstanceByDom(ref.current);
      if (renderedMapInstance) {
        mapInstance = renderedMapInstance;
      } else {
        mapInstance = echarts.init(ref.current);
      }
      mapInstance.setOption(option);
      // 点击地图事件
      mapInstance.on("click", (params) => {
        console.log(params);
      });
    }
  };

  useEffect(() => {
    //注册地图到echarts中,这里的'china'要与地图数据的option中的series、geo中的map属性值对应
    echarts.registerMap('china', chinaJson);
    renderMap();
  }, []);

  useEffect(() => {
    window.onresize = function () {
      // 调用echarts实例上resize方法
      mapInstance?.resize();
    };
    return () => {
      // 销毁实例，销毁后实例无法再被使用
      mapInstance && mapInstance.dispose();
    };
  }, []);

  return <div id={styles.map} ref={ref} style={{ width, height }} />;
};

export default MapIndex;

chinaJson文件从 DataV.GeoAtlas地理小工具系列获取：

组件使用：

import { useRef, useEffect } from "react";
import MapIndex from './MapIndex';

const Index = () => {
  let option = {
    tooltip: {},
    visualMap: {
      show: false, // 是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
      type: "continuous", // 类型为连续型视觉映射
      calculable: false, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
      inRange: {
        color: ["#ffd258", "#ff9e45"],
      },
    },
    // 地理坐标系组件
    geo: {
      map: 'china',
      aspectScale: 0.75, //长宽比
      zoom: 1.2,
      roam: false, // 滚轮 放大缩小
      emphasis: {
        label: {
          show: false,
        },
      },
      itemStyle: {
        areaColor: {
          // 默认区块颜色
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#BFFFDD", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#FFFFFF", // 100% 处的颜色
            },
          ],
        },
        shadowColor: "#FFFFFF", // 青色
        shadowBlur: 0,
        shadowOffsetX: 10,
        shadowOffsetY: 10,
        borderWidth: 0,
      },
    },
    series: [
      {
        id: "map",
        type: "map", // 图表类型
        map: 'china', // 已注册的地图
        aspectScale: 0.75, //长宽比
        showLegendSymbol: false, // 存在legend时显示
        roam: false,
        label: {
          show: true,
          color: "#333",
          fontWeight: 700,
          textShadowBlur: 5,
          textShadowOffsetX: 0,
          textShadowOffsetY: 4,
        },
        emphasis: {
          label: {
            color: "#e8eefc",
          }
        },
        select: {
          // 选中状态下的多边形和标签样式
          itemStyle: {
            borderColor: "#67E51F",
            borderWidth: 1,
            areaColor: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#A3DF7F", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#017E0F", // 100% 处的颜色
                },
              ],
            },
          },
          label: {
            color: "#e8efce",
          },
        },
        itemStyle: {
          // 地图区域的多边形 图形样式
          borderColor: "#017E0F",
          borderWidth: 0.4,
          areaColor: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#BFDFDF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#FFFFFF", // 100% 处的颜色
              },
            ],
          },
        },
        emphasis: {
          itemStyle: {
            areaColor: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "#A3DF7F", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#017E0F", // 100% 处的颜色
                },
              ],
            },
            borderColor: "#67E51F",
            borderWidth: 1,
            shadowColor: "rgba(103, 225, 245, 0.7)",
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
          }
        },
        zoom: 1.2,
        animation: false,
        data: [
          {
            value: 218,
            name: "北京",
          },
          {
            value: 122,
            name: "广东",
          },
        ],
      },
    ], // 图表数据
  };

  <MapIndex option={option} height="100%" width="100%" />;
}

export default Index;