How to use the echarts.registerMap function in echarts

.subscribe(geoJson => {
        // hide loading:
        this.mapLoaded = true;
        // register map:
        echarts.registerMap('HK', geoJson);
        // update options:
        this.options = {
          title: {
            text: '香港18区人口密度 （2011）',
            subtext: '人口密度数据来自Wikipedia',
            sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}<br>{c} (p / km2)'
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',

axios.get(url).then(res => {
      echarts.registerMap(mapname, res.data);
      me.getOtionTem(mapname);
      me.curMap = {
        // eslint-disable-next-line object-shorthand
        url: url,
        mapName: mapname,
      };
      me.mapStack.push({
        url: me.curMap.url,
        mapName: me.curMap.mapName,
      });
    }).catch(error => {
      message.error(error);

maps.forEach(function (name) {
    var json = fs.readFileSync('../public/vendors/echarts/map/json/' + name + '.json', 'utf-8');
    echarts.registerMap(name, JSON.parse(json));
});
// Font must be add expicity

componentDidMount() {
        this.curCity = "";

        echarts.registerMap("china", chinaJson)
        this.homeChart = echarts.init(document.getElementById('homeChart'))
        this.initHome()
    }

ngOnInit(): void {
    echarts.registerMap('USA', usaJSON);
  }
}

for (let i = 0; i < mapData.length; i++) {
          marker = L.marker(new L.LatLng(mapData[i].latitude, mapData[i].longitude), {
            title: mapData[i].name,
          })
          marker.bindPopup([
            '<a href="' + mapData[i].url + '">' + mapData[i].name + '</a>',
            mapData[i].city_name,
            mapData[i].date
          ].join('<br>'))
          markers.addLayer(marker)
        }
        worlds.addLayer(markers)

        //provinces
        map = echarts.init(document.getElementById('competition-provinces'))
        echarts.registerMap('China', china)
        const values = data.provinces.map((province) =&gt; province.value)
        const option = {
            tooltip: {
              trigger: 'item',
              showDelay: 0,
              transitionDuration: 0.2,
              formatter: function (params) {
                return params.dataIndex &lt; 0 ? '' : params.data.province + ': ' + params.value;
              }
            },
            visualMap: {
              left: 'right',
              min: Math.min(...values),
              max: Math.max(...[10, ...values]),
              inRange: {
                color: [

window.$.getJSON('public/plugins/chinamap-panel/data/china.json').then((chinaJson) => {
                echarts.registerMap('china', chinaJson);
                chinaMap.series.type = 'map';
                chinaMap.series.mapType = 'china';
            }); 
        }

.subscribe(([map, config]: [any, any]) => {

        registerMap('world', map);

        const colors = config.variables;
        this.bubbleTheme = config.variables.bubbleMap;
        this.geoColors = [colors.primary, colors.info, colors.success, colors.warning, colors.danger];

        this.latlong = {
          'AD': { 'latitude': 42.5, 'longitude': 1.5 },
          'AE': { 'latitude': 24, 'longitude': 54 },
          'AF': { 'latitude': 33, 'longitude': 65 },
          'AG': { 'latitude': 17.05, 'longitude': -61.8 },
          'AI': { 'latitude': 18.25, 'longitude': -63.1667 },
          'AL': { 'latitude': 41, 'longitude': 20 },
          'AM': { 'latitude': 40, 'longitude': 45 },
          'AN': { 'latitude': 12.25, 'longitude': -68.75 },
          'AO': { 'latitude': -12.5, 'longitude': 18.5 },
          'AP': { 'latitude': 35, 'longitude': 105 },