vue3+echarts5绘制地图后怎么添加标签？

Question

绘制出来大致是这样的，问题是：页面右侧我有一个列表，点击后传入地图几个国家名称，然后在地图上国家附近展示个tips，显示xxx，然后再点击这个xxx的时候调用其他函数

不会搞，帮忙看看

<template>
  <div id="map" ref="map" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  GeoComponent,
} from "echarts/components";
import { MapChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import world from "@/data/africa.json";

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  GeoComponent,
  MapChart,
  CanvasRenderer,
]);

function getAllNames(data) {
  const names = [];

  data.features.forEach((feature) => {
    if (feature.properties && feature.properties.name) {
      names.push({ name: feature.properties.name });
    }
  });

  return names;
}

const map = ref(null);
const mapInstance = ref();

const drawMap = () => {
  const option = {
    backgroundColor: "#9bcffa",
    tooltip: {
      trigger: "item",
      enterable: true,
      formatter: function ({ name, data }) {
        console.log(name, data);
        return name;
      },
    },
    geo: {
      map: "world",
      center: [50, 5],
      roam: true,
      zoom: 1.5,
      scaleLimit: {
        // min:
      },
      label: {
        normal: {
          // show: true,
        },
      },
      tooltip: {
        //设置鼠标移至城市板块选中视图配置选项
        // backgroundColor: " rgba(3,21,42,0.80)", //设置地图高亮时城市视图背景色框
        borderRadius: 0,
        trigger: "item",
        formatter: (params) => {
          return `<div class="map-charts-bar">
                              <span class="text">${params.name}</span>
                        </div>`;
        },
      },
      // itemStyle: {
      //   normal: {
      //     borderWidth: 2, //设置边线粗细度
      //     opacity: 0.6, //设置透明度，范围0~1，越小越透明
      //     areaColor: "#63B8FF", //地图区域颜色
      //   },
      //   emphasis: {
      //     areaColor: "#7FFF00", //高亮时地图区域颜色
      //   },
      // },
      nameMap: {
        Africa: "非洲",
        Algeria: "阿尔及利亚",
      },
      emphasis: {
        itemStyle: {
          areaColor: "#2B91B7",
        },
        show: true,
        areaColor: "#3066ba", //鼠标滑过区域颜色
        label: {
          show: true,
          textStyle: {
            color: "#fff",
          },
        },
      },
    },
    series: [
    ],
  };
  mapInstance.value.setOption(option);
  mapInstance.value.on("click", (param) => {
    console.log(param);
  });
};

onMounted(() => {
  mapInstance.value = echarts.init(map.value);
  echarts.registerMap("world", world);
  drawMap();
});
</script>

<style scoped>
#map {
  width: 100%;
  height: 600px;
}
</style>

Answer 1

<template>
  <div id="map" ref="map" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  GeoComponent,
} from "echarts/components";
import { MapChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import world from "@/data/africa.json";
import { africaXY } from "@/data/africaXY.js";

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  GeoComponent,
  MapChart,
  CanvasRenderer,
]);

const selectedCountries = ref(["Algeria"]);

function getAllNames(data) {
  const names = [];

  data.features.forEach((feature) => {
    if (feature.properties && feature.properties.name) {
      names.push({ name: feature.properties.name });
    }
  });

  return names;
}

const convertData = (data) => {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    var geoCoord = africaXY[data[i].name];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value),
      });
    }
  }
  return res;
};

const map = ref(null);
const mapInstance = ref();

const drawMap = () => {
  const option = {
    backgroundColor: "#132538",
    tooltip: {
      trigger: "item",
      enterable: true,
    },
    geo: {
      map: "world",
      center: [50, 5],
      roam: true,
      zoom: 1.3,
      scaleLimit: {
        // min:
      },
      label: {
        normal: {
          // show: true,
        },
      },
      tooltip: {
        trigger: "item",
        padding: 0,
        enterable: true,
        transitionDuration: 1,
        textStyle: {
          color: "#818A91",
          decoration: "none",
        },
        backgroundColor: "rgba(255,255,255,0.96)",
        // borderColor:'#000000',
        //borderWidth: 1,
        formatter: function (params) {
          // var tipHtml = "";
          // tipHtml =
          //   '<div style="box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);border-radius:4px;padding:30px 20px;">' +
          //   '<div style="font-size: 16px;">' +
          //   params.name +
          //   "</div>" +
          //   '<div style="padding:6px 0;"><i style="display: inline-block;margin-bottom: 3px;width:6px;margin-right:6px;height: 6px;background: #3472EE;border-radius: 50%;"></i>2018年整体进口额为10000323万元;</div>' +
          //   '<div style="padding:6px 0;"><i style="display: inline-block;margin-bottom: 3px;width:6px;margin-right:6px;height: 6px;background: #3472EE;border-radius: 50%;"></i>2018年整体进口所占份额为13%;</div>' +
          //   '<div style="padding:6px 0;"><i style="display: inline-block;margin-bottom: 3px;width:6px;margin-right:6px;height: 6px;background: #3472EE;border-radius: 50%;"></i>2018年年进口额增长率为-10%;</div>' +
          //   "</div>";
          return params.name;
        },
      },
      // itemStyle: {
      //   normal: {
      //     borderWidth: 2, //设置边线粗细度
      //     opacity: 0.6, //设置透明度，范围0~1，越小越透明
      //     areaColor: "#63B8FF", //地图区域颜色
      //   },
      //   emphasis: {
      //     areaColor: "#7FFF00", //高亮时地图区域颜色
      //   },
      // },
      nameMap: {
        Africa: "非洲",
        Algeria: "阿尔及利亚",
      },
      emphasis: {
        itemStyle: {
          areaColor: "#2B91B7",
        },
        show: true,
        areaColor: "#131834", //鼠标滑过区域颜色
        label: {
          show: true,
          textStyle: {
            color: "#fff",
          },
        },
      },
    },

    series: [
      {
        type: "scatter",
        coordinateSystem: "geo",
        data: convertData([{ name: "Algeria"}]),
        zlevel: 12,
        // symbolSize: [20, 37], // 标记的大小,[宽、高]
        //symbol: 'pin', //气泡
        // symbol:
        //   "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAlCAYAAABCr8kFAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAC1klEQVRIx+2WS0gVURjHf6OXvD4jM1+ZVhJmWNfwolmhqxaWRFQgLcwIWkVFG90EEUGhmyBKcpdUCGaPhenClZDgq8iyMqy8lo+0C5nPaz6+FndGx7mP5rqIFv3hwJnvO+d3zjffOd+MggnF1l8WM+MAgswONCtLIINHC68of32H/4H/INCrRCRYRE6LyCMR6RmeGZePk04Rkaeq3fxGRMQmIr3iXx9EZLcZWKEEpkJ/sJQAYZqS9BxFB+wEsrRn1+Ist4fv8tjZyNCvERLXxHE0poCzCaewBoXoGa2KouSuAIrIPuC5ZpxZdHHi3UU6J7o9IrFHZlCz4wahQVa9OUdRlHZYPjbFeu+trw/pGHMgCxEerWPMQeVAnXGdEq2jAXfqvU9G2rzCtFY33GoE7tI6WvmK13sHpuaQxSifCRycnjOaEozAFXUu0bIJx7TTJzA+dL3RFGwMeVDvPRK3x2/IxxP2GoHfjcBOvfdCaj72tWleYfa1aZzbmmcEtmsd7dhkA236Ea6FeW72dnLP0T3lnJ22xoSEuYo3Z4Sf32bHGuzx5chUFKVrhUVEXqzypjR4fdEikrlKYLTP7IlIbYCwS/iTiISIyLhJWB9mJCKHTQJtpoAqtO4PsHLTMBVoERGnD9hnf3NXXLmSsooQIBaILjqYn1OQl11lnFDb2Hyyobn9NfADGKkuL531AJaUVUQA23EXiaVFys4UHUtPTV4qTZ++DNVerXxwXx8M8A3oqS4vnQQILimriAVygSjcVzEJdznKann5Nio9NSU6KiLM2ts/OHrtTs0gsAWIARaBSSACSM7cf+BnV0vTlAWwsVwtDgEp+hCuV9W80j2Gqy1RndcP1KvzbUBTkLrSauXxI2oB3gB2dZVnwEY1rA3qa7CqvgXABYzjLld9LJe9BaDLmJR0IM6YeRM7HAHea0nxdmzigHVAJBCqRmEB5tWdTAMTvo7Nbwng09R+hsh2AAAAAElFTkSuQmCC",
        symbolOffset: [0, "-50%"], // 标记相对于原本位置的偏移
        // label: {
        //   normal: {
        //     show: true,
        //     offset: [18, -10], // 是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
        //     formatter: function (params) {
        //       console.log("气泡：", params);
        //       return "{fline|" + params.data.name + "}";
        //     },
        //     position: "insideTopLeft", // 标签相对于图形包围盒左上角的位置。
        //     distance: 0,
        //     backgroundColor: "#16B47F",
        //     padding: [0, 0],
        //     borderRadius: 3,
        //     // verticalAlign:'middle',
        //     // lineHeight: 32,
        //     color: "#ffffff",
        //     rich: {
        //       fline: {
        //         padding: [4, 6, 4, 6],
        //         color: "#ffffff",
        //       },
        //     },
        //   },
        //   emphasis: {
        //     show: false,
        //   },
        // },
        itemStyle: {
          emphasis: {
            borderColor: "#fff",
            borderWidth: 1,
          },
        },
      },
    ],
  };
  mapInstance.value.setOption(option);

  mapInstance.value.on("click", function (params) {
    console.log("---params----", params);
  });
};

onMounted(() => {
  mapInstance.value = echarts.init(map.value);
  echarts.registerMap("world", world);
  drawMap();
});
</script>

<style scoped>
#map {
  width: 100%;
  height: 600px;
}
</style>