绘制出来大致是这样的,问题是:页面右侧我有一个列表,点击后传入地图几个国家名称,然后在地图上国家附近展示个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>