先贴个图把,效果一样就看,不一样咱就跑
1、绘制地图时需要用于展示地图的地理数据,地理数据是一个 geoJSON 格式的数据,本质上是一个 json 数据
--打开地图选择器 DataV.GeoAtlas地理小工具系列
引用组件----------
<template>
<div class="middle"><mapChart /></div>
</template>
<script setup>
import mapChart from "../mapChart.vue";
</script>
<style lang="scss" scoped>
.middle {
width: 60%;
height: 100%;
}
</style>
-----------组件 mapChart.vue------
<template>
<div id="chart-box" style="height: 100%; width: 100%;"></div>
</template>
<script>
import * as echarts from 'echarts';
import yls_json from '@/utils/32.json' ///江苏省的json数据
export default {
data() {
return { data: {}, yls_json };
},
methods: {
refresh() {
var myChart = echarts.getInstanceByDom(
document.getElementById('chart-box')
);
if (myChart !== null && myChart !== undefined) {
myChart.resize();
}
},
},
mounted() {
let data = yls_json;
echarts.registerMap("yls", data);
const chart = echarts.init(document.getElementById("chart-box"));
let coord = yls_json.features.map((item, index) => {
return {
name: item.properties.name,
value: item.properties.center,
symbolSize: 8
}
})
let lines_coord = coord.map(item => {
return {
coords: [
[114.691663, 31.574729],
item.value
]
}
})
const option = {
geo: {
map: "yls",
roam: true, // 允许地图缩放和平移
right: '2%',
left: 'auto',
label: {
show: false, // 隐藏地理坐标系的标签
},
silent: true, // 设置为 true 以禁用地图上的所有鼠标事件
itemStyle: {
normal: {
borderColor: "rgb(0,255,255)", //区域边框颜色
areaColor: "rgb(92,161,255)", //区域颜色
borderWidth: 0.5, //区域边框宽度
shadowBlur: 5,
shadowColor: "rgba(0,255,255,.5)",
},
},
},
series: [
{
name: '江苏省内点',
type: 'scatter',
coordinateSystem: 'geo',
data: coord,
label: {
show: true, formatter: "{b}",
color: "#fff",
fontSize: 8,
},
emphasis: {
itemStyle: {
borderColor: 'transparent', // 高亮时的边框颜色设置为透明
borderWidth: 0, // 高亮时的边框宽度设置为 0
}
},
itemStyle: {
color: 'rgb(0,255,255)',
iconType: 'roundRect ', // 使用内置的pin图标
iconSize: 20,
position: 'right',
}
},
{
name: '地图外的点',
type: 'scatter',
coordinateSystem: 'geo',
data: [
{
name: '省公司',
value: [114.401663, 31.574729],
symbolSize: 40,
z: 20,
symbol: "path://M512,0c282.76800537109375,0,512,229.23199462890625,512,512c0,282.76800537109375,-229.23199462890625,512,-512,512C229.23199462890625,1024,0,794.7680053710938,0,512C0,229.23199462890625,229.23199462890625,0,512,0Zm9.3759765625,272L341.1839904785156,272a29.984,29.984,0,0,0,-29.91998291015625,30.032012939453125L311.2640075683594,752l399.9999694824219,0L711.2639770507812,432c0,-16.496002197265625,-13.4239501953125,-30,-29.98394775390625,-30l-130,0l0,-100.09600830078125A29.904,29.904,0,0,0,521.3599853515625,272ZM481.2799987792969,562l2.048004150390625,0.09600830078125a20,20,0,0,1,-2.048004150390625,39.90399169921875l-90.0159912109375,0a20,20,0,1,1,0,-40l90.0159912109375,0Zm0,-100l2.032012939453125,0.09600830078125a20,20,0,0,1,-2.032012939453125,39.90399169921875l-90,0a20,20,0,1,1,0,-40l90,0Zm-5.00799560546875,-100l2.048004150390625,0.09600830078125a20,20,0,0,1,-2.048004150390625,39.90399169921875l-90,0l-2.048004150390625,-0.11199951171875a20,20,0,0,1,2.048004150390625,-39.88800048828125l90,0Z",//省公司位置的图标
}
],
symbolSize: 8,
itemStyle: {
normal: {
color: '#0079fe', // 江苏省外点的颜色
},
},
label: {
show: true, formatter: "{b}",
color: "#000",
position: "bottom",
},
},
{
type: "lines",
coordinateSystem: "geo",
effect: {
show: true,
constantSpeed: 30,
symbol: "pin",
symbolSize: 3,
trailLength: 0,
},
symbol: ['none', 'arrow'], // 起点无图形,终点为箭头
symbolSize: [0, 8],
lineStyle: {
color: 'rgb(149,242,4)',
width: 2,
opacity: 0.4,
curveness: 0.2 // 线条曲直度
},
data: lines_coord,
},
],
};
chart.setOption(option);
window.addEventListener('resize', this.refresh);
},
unmounted() {
window.removeEventListener('resize', this.refresh);
},
};
</script>
<style lang="scss" scoped>
#chart-box {
div {
width: 100%;
height: 100%;
}
}
</style>