react使用echart绘制地图

一：导入静态文件

import { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
import { DownLoadPath } from "./data-overview/type"
import { ECHARTS_THEME } from './assets/static'
import myChinaMap from '/assets/static/china_new.json'

二：初始化配置

函数式组件，接受需要导入的数据

//解构props. resourceList:资源列表 
function myEchart({resourceList}){
   const divRef = useRef()    // 获取组件dom-ref
  // 防御性编程 如果resourceList为空则直接终止
  if(!Array.isArray(resourceList)  || (Array.isArray(resourceList) && resourceList.length<1  )) return 
   useeffect(()=>{
    // 防御性编程，divRef.current：绑定的dom元素名，比如{current:div},如果不存在，则程序到此终止。
    if (!divRef.current) return
    // 有时候传入的数据对象key名与echart要求的可能不同，因而，需要基于传入数据重新配置内部对象
    const myCustomizeResourceList = []
    resourceList.foreach((item,index)=>{
      //echart要求格式为{name:xxx,value:xxx}
      myCustomizeResourceList.push({
          name:item.xx,
          value:item.yy
      })
    })
    //数据装填完毕后，开始注册本地静态地图
   echarts.registerMap('',myChinaMap ) //参数1：地图名 本项目中不需要
  //注册完毕后，创建echart实例，并获取dom实例，并初始化echart图表   
  // getInstanceByDom(echartDOM容器,主题),
 //  init(echartDOM容器，主题)
 const myChart = echarts.getInstanceByDom(divRef.current) ?? echarts.init(divRef.current, ECHARTS_THEME)
 

const option = {
/****
篇幅太长，第三步将着重讲解options配置
***/  
}
myChart.setOption(option)
//监听resize方法，一但缩放即重新设置echart宽高， 这里推荐使用lodash的节流函数包裹以节省性能
window.onresize = () => {
      myChart.resize()
    }
},[resourceList])    
//监听resourceList，如果有变化，随时setOption
return  <div ref={divRef} style={{ height: "440px" }} />
}

三：options各个配置项

 const option = {
    backgroundColor: "#fff", //背景色
    //tooltip ：配置鼠标经过图表区域时显示的小弹窗的文字   //item:myCustomizeResourceList的内部子项
      tooltip: {
        //提示框里的文字，参数item是data里的每一项
        formatter: function (item) {
          return `${item.name}：${item?.data?.value} `
        }
      },
// 工具集 
      toolbox：{
        feature：{
          saveAsImage：{
            
          }
        }
      },
// 缩放配置
      geo:{
         roam: true, //是否允许鼠标缩放 
        zoom: 1.2,
      }
左下程度表
      // 视觉映射 ： 连续型
      visualMap: {
        // type: 'continuous',
        calculable: false, // 是否显示手柄
        // align: 'bottom',
        min: 0,
        max: 10,
        left: '15%',
        top: '50%',
        showLabel: true,
        // text: ['High', 'Low'], //显示两边文字
        pieces: [
          //各个程度的颜色
          { min: 0, max: 9, color: "#e7f3ff" },
          { min: 10, max: 19, color: "#ddefff" },
          { min: 20, max: 49, color: "#aed8ff" },
          { min: 50, max: 99, color: "#97cdff" },
          { min: 100, max: 199, color: "#69b7ff" },
          { min: 100, max: 199, color: "#69b7ff" },
          { min: 200, max: 500, color: "#3aa0ff" },
          { min: 500, color: "#1890ff" },
        ]
      },
// 将基于组件prop的数据装配到这里作为展示数据
      series: [
        {
          name: '录取人数',
          type: 'map',
          geoIndex: 0,  //防止出现几张地图
          data,
        },
      ],
}

注释有点多，但是可能更有帮助

以上。