备注：地图json, 图标图片 准备替换下
<template>
<div ref="mapEcharts" class="map-echart"></div>
</template>
<script setup lang='ts'>
import * as echarts from 'echarts'
import mapcity from "@/tool/map/map.json"
import {
ref, nextTick, onMounted } from 'vue'
const mapEcharts = ref(null)
onMounted(() => {
//获取山东地图
initEcharts()
})
function initEcharts() {
echarts.registerMap('mapcity', mapcity)
nextTick(() => {
const map = echarts.init(mapEcharts.value, null, {
renderer: 'canvas',
})
let LableData = [
{
name: "济南",
value: [117.000923,
36.675807],
},
{
name: "日照",
value: [119.461208,
35.428588],
},
];
const option = {
// 悬浮窗
tooltip: {
trigger: 'item',
},
geo: {
map: 'mapcity',
zoom: 1.2,
roam: false,
label: {
show: true,
color: 'black',
position: 'inside',
distance: 0,
fontSize: 10,
rotate: 0,
},
// 所有地图的区域颜色
itemStyle: {
areaColor: '#eee',
borderColor: '#02c0ff',
},
emphasis: {
itemStyle: {
areaColor: '#aaa',
shadowColor: 'rgba(0,0,0,0.8)',
},
},
},
series: [
{
name: "lable",
type: "scatter",
coordinateSystem: "geo",
symbol: 'image://' + new URL(`./003.png`, import.meta.url).href,
symbolSize: [30, 30],
symbolOffset: [0, "10%"],
hoverAnimation: true,
zlevel: 2,
label: {
normal: {
show: false,
textStyle: {
color: "#fff",
lineHeight: 15,
},
formatter(params) {
return params.data.value[2];
},
},
},
itemStyle: {
normal: {
color: "#6495ED", //标志颜色
opacity: 0.8,
borderColor: "#aee9fb",
borderWidth: 0.6,
},
},
showEffectOn: "render",
rippleEffect: {
brushType: "stroke",
},
data: LableData,
},
{
name: "lable",
type: "scatter",
coordinateSystem: "geo",
symbol: 'image://' + new URL(`./001.png`, import.meta.url).href,
symbolSize: [20, 20],
symbolOffset: [0, "-70%"],
hoverAnimation: true,
zlevel: 2,
label: {
normal: {
show: false,
textStyle: {
color: "#fff",
lineHeight: 15,
},
formatter(params) {
return params.data.value[2];
},
},
},
itemStyle: {
normal: {
color: "#6495ED", //标志颜色
opacity: 0.8,
borderColor: "#aee9fb",
borderWidth: 0.6,
},
},
showEffectOn: "render",
rippleEffect: {
brushType: "stroke",
},
data: LableData,
},
],
}
map.setOption(option)
map.on('click', function (params) {
})
})
}
</script>
<style scoped>
.map-echart {
width: 100%;
height: calc(100% - 50px);
}
.topbox {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.mapTitle {
width: 300px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-size: 25px;
font-weight: bold;
cursor: pointer;
color: #2d3436;
}
</style>
