echarts map display specified area

How to obtain the specified area:
City range selector: http://datav.aliyun.com/portal/school/atlas/area_selector

The echarts map displays the specified area and the latitude and longitude settings to display the label, demo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Map of Hefei</title>
    <style>
      *{ margin: 0; padding: 0;}
      body{ background: linear-gradient(45deg , #001B4B , #006FCA , #006FCA , #003783);}
    </style>
  </head>
  <body>
    
    <div id="main" style="width: 100vw; height: 100vh;"></div>
    
    <script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
    
    <script>
      var listKey = {
        'Hefei City':{
          json:'https://geo.datav.aliyun.com/areas_v3/bound/340100_full.json',
        },
        'Yaohai District':{
          json:'https://geo.datav.aliyun.com/areas_v3/bound/340102.json',
          points:[{name: 'Yaohai District 111',value: [117.313076,31.866118]},]
        },
        'Luyang District':{
          json:'https://geo.datav.aliyun.com/areas_v3/bound/340103.json',
          points:[{name: 'Luyang District 111',value: [117.261397,31.889056]},{name: 'Luyang District 222',value: [117.269733,31.881452]},]
        },
        'Shushan District':{
          json:'https://geo.datav.aliyun.com/areas_v3/bound/340104.json',
          points:[{name: 'Shushan District 111',value: [117.157229,31.872589]},{name: 'Shushan District 222',value: [117.173902,31.848054]},]
        },
        'Baohe District':{
          json:'https://geo.datav.aliyun.com/areas_v3/bound/340111.json',
          points:[{name: 'Baohe District 111',value: [117.298183,31.81746]},{name: 'Baohe District 222',value: [117.407992,31.761968]},]
        },
        'Changfeng County':{
          json:'https://geo.datav.aliyun.com/areas_v3/bound/340121.json',
          points:[{name: 'Changfeng County 111',value: [117.168961,32.490058]},]
        },
        'Feidong County':{
          json:'https://geo.datav.aliyun.com/areas_v3/bound/340122.json',
          points:[{name: 'Feidong County 111',value: [117.473675,31.899776]},{name: 'Feidong County 222',value: [117.473675,31.890456]},]
        },
        'Feixi County':{
          json:'https://geo.datav.aliyun.com/areas_v3/bound/340123.json',
          points:[{name: 'Feixi County 111',value: [117.09212,31.763079]},{name: 'Feixi County 222',value: [117.051876,31.718367]},]
        },
        'Lujiang County':{
          json:'https://geo.datav.aliyun.com/areas_v3/bound/340124.json',
          points:[{name: 'Lujiang County 111',value: [117.293574,31.273179]},{name: 'Lujiang County 222',value: [117.304497,31.224772]},]
        },
        'Chaohu City':{
          json:'https://geo.datav.aliyun.com/areas_v3/bound/340181.json',
          points:[{name: 'Chaohu City 111',value: [117.802437,31.639333]},{name: 'Chaohu City 222',value: [117.897298,31.62064]},]
        },
      }
      var keyName = 'Hefei City';
      function setMap(){
        // $.get('//geo.datav.aliyun.com/areas_v3/bound/340100_full.json', function (geoJson) {
        $.get(listKey[keyName].json, function (geoJson) {
          myChart.hideLoading();
          echarts.registerMap('HF', geoJson);
          myChart. setOption(
            (option = {
              title: {
                show: true, //display the title
                // left: 'left', //display in horizontal position
                // top: 'top', //displayed in vertical position
                textStyle: {
                  color:'#ffffff'
                },
                text: 'Map of Hefei',
                subtext: 'ECharts Quick Start', //Click the jump link (sublink)
                sublink:'https://echarts.apache.org/handbook/zh/get-started/',
                subtextStyle: {
                  color:'#fff'
                },
              },
              tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} (unit)'
              },
              toolbox: {
                show: true, // show the menu
                orient: 'vertical',
                // left: 'right', //display in horizontal position
                // top: 'top', //displayed in vertical position
                iconStyle: {
                  borderColor:'#fff'
                },
                feature: {
                  dataView: { readOnly: false }, //data view
                  restore: {}, // refresh and reset
                  saveAsImage: {}, //save as image
                }
              },
              visualMap: {
                show: true, //Display the data interval viewer
                min: 10,
                max: 600,
                text: ['High', 'Low'],
                // left: 'left', //display in horizontal position
                // top: 'bottom', //displayed in vertical position
                textStyle: {
                  color:'#ffffff'
                },
                realtime: false,
                calculable: true,
                inRange: {
                  // map rendering color value (display the corresponding gradient transition color value according to the value data interval in data, the smaller the value is, the higher the color value is displayed)
                  // color: ['#B0E1FF', '#63C1FD' , '#3CADF4'],
                  color: ['lightskyblue', 'yellow', 'orangered'],
                }
              },
              series: [
                {
                  name: 'Map of Hefei',
                  type: 'map',
                  map: 'HF',
                  label: {
                    show: true
                  },
                  data: [
                    { name: 'Yaohai District', value: 10 }, //{b} : name {c} : value
                    { name: 'Luyang District', value: 50 },
                    { name: 'Shushan District', value: 100 },
                    { name: 'Baohe District', value: 150 },
                    { name: 'Changfeng County', value: 300 },
                    { name: 'Feidong County', value: 400 },
                    { name: 'Feixi County', value: 500 },
                    { name: 'Lujiang County', value: 600 },
                    { name: 'Chaohu City', value: 70 },
                  ],
                  // Custom name mapping (the name in the map JSON is displayed in English)
                  nameMap: {
                    'yaohai': 'Yaohai District',
                    //...
                  }
                },
                // Required to write latitude and longitude mark points
                {
                  name: '',
                  type: 'scatter',
                  coordinateSystem: 'geo',
                  color: ['#000'],
                  tooltip: {
                    position: "right",
                    color: "#000",
                    formatter(d) {
                      // console. log(d)
                      return `<div style="padding: 5px 10px;">【${d.data.name}】</div>`;
                    },
                  },
                  itemStyle: {
                    color: '#ddb926',
                    normal: {
                      areaColor: '#8abcd1',
                      borderColor: '#fff',
                      borderWidth: 1,
                    },
                    emphasis: {
                      areaColor: '#fff',
                      borderColor: '#ff0000',
                      borderWidth: 0.5,
                    }
                  },
                  // latitude and longitude data
                  data: keyName == 'Hefei City' ? [].concat(listKey['Yaohai District'].points,listKey['Luyang District'].points,listKey['Shushan District'] .points,listKey['Baohe District'].points,listKey['Changfeng County'].points,listKey['Feidong County'].points,listKey['Feixi County' ].points,listKey['Lujiang County'].points,listKey['Chaohu City'].points) : listKey[keyName].points,
                }
              ],
              // Required to write latitude and longitude mark points
              geo: {
                show: true,
                map: 'HF',
                type: 'map',
                // mapType: 'anhui',
                roam: false,
                // label: {
                // normal: {
                // // Display the province label
                // show: false,
                // textStyle: {
                // color: '#fff',
                // fontSize: 10
                // }
                // },
                // emphasis: {
                // // The corresponding mouse hover effect
                // show: true,
                // // The selected font style
                // textStyle: {
                // color: '#000',
                // fontSize: 14
                // }
                // }
                // },
                // itemStyle: {
                // color: '#ddb926',
                // normal: {
                // areaColor: '#8abcd1',
                // borderColor: '#fff',
                // borderWidth: 1
                // },
                // emphasis: {
                // borderWidth: 0.5,
                // borderColor: '#8abcd1',
                // areaColor: '#fff'
                // }
                // },
                // emphasis: {
                // label: {
                // show: false
                // }
                // }
              }
            })
          );
        });
      }
      
      var chartDom = document. getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;
      
      myChart. showLoading();
      setMap();
      
      option & amp; & amp; myChart.setOption(option);
      window.addEventListener('resize', myChart.resize);
      myChart.on('click', function (param) {
        console. log(param)
        console.log(param.name)
        if(!listKey[param.name]){
          return;
        }
        if(keyName == param.name){
          keyName = 'Hefei City';
        }else{
          keyName = param.name;
        }
        setMap();
      })
    </script>
    
    
  </body>
</html>