Echart（v5）实现中国地图区域图

一、需求背景

        需要实现一个中国地图的区域图（区域级别到市），并且指定区域可以高亮。

二、相关工具

        1、中国的GeoJSON数据获取：DataV.GeoAtlas地理小工具系列

        2、Echart组件库 Apache ECharts

三、实现

        echart配置：

const options = {
  series:[{
    type: 'map',
    map: 'china',
    roam: true, //缩放，开启缩放或者平移，可以设置成 'scale' 或者 'move'， true都开启
    zoom: 1,          // 地图放大
    aspectScale: 0.8, //地图宽高比例
    nameProperty: 'name', //关联关键数据geojson数据中的关键key 
    emphasis: {
      disabled: true //关闭高亮
    },
    itemStyle: {
      normal: {
        areaColor: 'rgba(27, 73, 135, 0.3)',
        borderColor: 'rgba(58, 128, 177, 0.4)',
      },
    },
    select: {
      disabled: true
    },
    tooltip: {
      trigger: "item",
      show: true,
      formatter: (params: any) => {
        console.log(params)
        return 'zyk';
      }
    },
    //todo 根据添加的地点，确定data里的数据，精确到市
    data: [{
      name: '乌鲁木齐市',
      value: 66,
      //自定义特殊 tooltip，仅对该数据项有效
      tooltip:{
        formatter:(val:any)=>{
          debugger
          console.log(val)
          return '666'
        }
      },
      itemStyle: {
        areaColor: 'yellow',
        color: 'yellow'
      }
    }]
  }]
}

const MyChart = echarts.init(document.getElementById("map-container"));
echarts.registerMap("china", chinaMap);
MyChart.setOption(options);

关键注释：

        【1】echarts.registerMap("china", chinaMap); //注册地图

                // params1：map的名称，必须与options.series中的map字段一致

                // params2:  chinaMap，中国的GeoJSON

效果图：