https://gyazo.com/3f8d3c8136280059cc7d0ed2e7482990

WorldMap.vue

<template>
  <div>
    <div id="world_map" style="width: 100%; height: 100vh; background-color: #ccc;"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import * as am5 from '@amcharts/amcharts5';
import * as am5map from '@amcharts/amcharts5/map';
import am5geodata_worldLow from "@amcharts/amcharts5-geodata/worldLow";

const runtimeConfig = useRuntimeConfig()

const { data: world_map_colors } = await useFetch('/posts/maps', {baseURL: runtimeConfig.public.api_endpoint});

onMounted(() => {
  // Create root and chart
  let root = am5.Root.new("world_map");
  let chart = root.container.children.push(
    am5map.MapChart.new(root, {
      projection: am5map.geoMercator(),
    })
  );

  // Create polygon series
  let polygonSeries = chart.series.push(
    am5map.MapPolygonSeries.new(root, {
      geoJSON: am5geodata_worldLow,
      exclude: ["AQ"]
    })
  );

  // for All
  polygonSeries.mapPolygons.template.setAll({
    tooltipText: "{name}",
    interactive: true,
    fill: am5.color('#999999'),
    templateField: "polygonSettings",
  });

  // hover event
  polygonSeries.mapPolygons.template.states.create("hover", {
    fill: am5.color('#ff0000'),
  });

  // click event
  polygonSeries.mapPolygons.template.events.on("click", (ev) => {
    const data = ev.target.dataItem.dataContext;
    console.log(data.id);
  });

  // per countries color
  const countryIds = Object.keys(world_map_colors._rawValue.world_map_colors);
  polygonSeries.data.setAll(
    countryIds.map(countryId => {
      const r = world_map_colors.value.world_map_colors[countryId];
      return {
        id: countryId,
        polygonSettings: {
          fill: am5.color(r.color),
        },
      }
    })
  );
});
</script>