实现echarts地图，可进行上下层级跳转

echarts社区链接： www.makeapie.cn/echarts_con…

生成地图数据接口： DataV.GeoAtlas地理小工具系列 (aliyun.com)

tips:只能获取到区级数据

代码：

 useEffect(() => {
    // all.json 全国  510000_full.json 四川  510116.json 双流   //510129.json
    if (user) {
      const { jurisdictionCode } = user
      console.log("user", user);
      let jurisdictionCodeUrl = ''
      let currentCode = ''
      if (jurisdictionCode?.length > 6) {
        jurisdictionCodeUrl = `${jurisdictionCode.slice(0, 6)}.json`
        currentCode = `${jurisdictionCode.slice(0, 6)}`
      } else if (jurisdictionCode.length <= 4) {
        jurisdictionCodeUrl = `${jurisdictionCode}00_full.json`
        currentCode = `${jurisdictionCode}00`
      } else {
        jurisdictionCodeUrl = `${jurisdictionCode}.json`
        currentCode = `${jurisdictionCode}`
      }
      console.log("jurisdictionCode", jurisdictionCode, currentCode);
      //  最多获取区级的json文件
      AdminMapDataApi.dataV({ code: jurisdictionCodeUrl }).then(res => {
        getMapData(res?.data, 'sichuan', currentCode)
      })
    }
    return () => { }
  }, [user])
`

``
  const initECharts = (name, geoJso, mapData = []) => {
    echarts.registerMap(name, geoJso)
    return {
      title: {
        top: 10,

        padding: 4,
        text: `当前：${name}`,
        subtext: '',
        x: 'left',

        backgroundColor: "#01050A33",
        textStyle: {
          color: '#C2CFDAFF',
          fontWeight: 400,
          fontSize: 18,

        },
      },
      geo: {
        type: 'map',

        map: name, // 自定义扩展图表类型
        aspectScale: 0.75, //长宽比
        zoom: 1.1,
        roam: false,

        itemStyle: {
          normal: {
            areaColor: '#0A2F51',
            shadowColor: '#12717D',
            shadowOffsetX: 0,
            shadowOffsetY: 25
          },
          emphasis: {
            areaColor: '#0B6CAB',
          }
        }
      },
      series: [
        {
          type: 'map',

          // selectedMode: 'single', // 是否允许选中多个区域
          data: mapData,
          map: name, // 自定义扩展图表类型
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            },
            emphasis: {
              textStyle: {
                color: '#fff'
              }
            }
          },

          itemStyle: {
            normal: {
              borderColor: '#56FEFE',
              borderWidth: 1.5,
              areaColor: '#0A2F51',

            },
            emphasis: {
              areaColor: '#0B6CAB',

            }
          },
          zoom: 1.1,
          roam: false,
        },
    
      ]
    }
  }
  
  /**
  * 点击跳转下一层级区域
  */
   const onEvents = {
    click: param => {
      const { adcode } = param?.data
      // if (!isClick || jurisdictionCode?.length >= 6) {
      //   return
      // }
      // if (level === 'district') {
      //   setIsClick(false)
      // }
      if (adcode) {
        if (String(adcode)?.at(-1) === '0' && String(adcode).at(-2) === '0') {
          setCode(String(adcode).slice(0, -2))
        } else {
          setCode(adcode)
        }
        const queryUrl =
          param?.data?.level === 'district'
            ? `${adcode}.json`
            : `${adcode}_full.json`
            // 需要后端提供接口，后端调用dataV三方接口 
        AdminMapDataApi.dataV({ code: queryUrl }).then(res => {
          getMapData(res?.data, 'sichuan', adcode)
        })
      }
    }
  }
    
   return (
    <>
      {current.length > 1 && (
        <Button
          icon={<RollbackOutlined />}
          className="goBack-but"
          onClick={() => {
            setIsClick(true)
            const copyData = [...current]
            copyData.pop()
            setCurrent(copyData)
            // setCode(copyData.at(-1)?.currentCode)
            if (
              String(copyData.at(-1)?.currentCode)?.at(-1) === '0' &&
              String(copyData.at(-1)?.currentCode).at(-2) === '0'
            ) {
              setCode(String(copyData.at(-1)?.currentCode).slice(0, -2))
            } else {
              setCode(copyData.at(-1)?.currentCode)
            }
            setCurrentData(copyData.at(-1))
          }}
        >
          返回
        </Button>
      )}
      <Echarts
        width="100%"
        style={{ height: '100%' }}
        onEvents={onEvents}
        option={initECharts(
          currentData?.name,
          currentData?.list,
          currentData?.mapData,
          currentData?.pointData
        )}
      />
    </>
  )
`
    

这篇好文章是转载于：学新通技术网