vue3+echarts5绘制地图后怎么添加标签？-灵析社区
强哥喝假酒 绘制出来大致是这样的，问题是：页面右侧我有一个列表，点击后传入地图几个国家名称，然后在地图上国家附近展示个tips，显示xxx，然后再点击这个xxx的时候调用其他函数 不会搞，帮忙看看 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 ` ${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: "#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(); }); #map { width: 100%; height: 600px; }
饼干爱折腾