echarts地图功能
本文正在参加「金石计划」
介绍：本文实现echarts地图功能有：geojson获取数据、渐变色、地图描边、添加地区名字、地区名标点、点击空白区域取消选中地图状态。以下功能使用vue代码展示。以下代码每一个步骤都是关联的。
1.geojson获取数据渲染地图
index.vue
js
<div id="map" class="map" ref="map"></div>
<script setup>
import * as echarts from "echarts";
import {onMounted, ref} from "vue";
import { option } from "./data.js";
let eCharts = ref();
let map = ref(null);
let current = ref()
onMounted(() => {
// 这里通过fetch请求geojson文件
// 这里的foshan.geojson文件放到的public文件下面即可。
fetch('/foshan.geojson').then(res => res.json())
.then(data => {
// 这几个步骤都是固定步骤，直接使用就行或者看看官方文档
echarts.registerMap("佛山市", {geoJSON: data})
eCharts.value = echarts.init(map.value)
eCharts.value.setOption(option)
})
})
</script>
<style scoped>
/* 必须要给宽高，不然地图没有大小，显示不出来 */
#map {
width: 700px;
height: 500px;
}
</style>data.js
js
import {reactive} from "vue";
export const option = reactive({
geo: {
show: true,
// 这个名字要和echarts.registerMap("佛山市", {geoJSON: data}) 相对应
map: '佛山市',
// 文字是否显示
label: {
show: false
},
aspectScale: 1, //长宽比
zoom: 1.1,
},
})- 这里使用了geo配置项：
- 作用：地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。但是它的数据是基于
地理坐标的。geo组件可以绘制全球范围的地图，也可以绘制各种国家、地区的地图。在使用geo组件时，需要提供地理坐标系的相关配置，如投影方式、缩放、中心位置等。通过geo组件，可以在地图上展示各种数据的分布情况。
geojson文件 
效果图 
2.地图渐变色
data.js
js
import {reactive} from "vue";
export const option = reactive({
geo: {
show: true,
// 这个名字要和echarts.registerMap("佛山市", {geoJSON: data}) 相对应
map: '佛山市',
label: {
show: false
},
aspectScale: 1, //长宽比
zoom: 1.1,
// 渐变色
itemStyle: {
borderColor: '0BC265',
shadowColor: '#182f68',
shadowOffsetX: 0,
shadowOffsetY: 20, //这里可以设置一下Y轴的阴影，比较有层次感
borderWidth: 0,//设置外层边框
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.9,
// 关键代码 会从offset：0到offset：1去过渡。
// 我们可以增加其中的过渡颜色，在0和1之间加就行。
// 比如：{
// offset: 0.5, color: 'green'
// },
colorStops: [
{
offset: 0, color: '#0a3288'
},
{
offset: 1, color: 'rgba(27,130,183,1)'
}
],
global: false
},
},
},
})效果图 
3.地图描边和添加地区名字
- 在series中添加一个map图层，对该图层进行操作即可。
data.js
js
import {reactive} from "vue";
export const option = reactive({
geo: {
show: true,
// 这个名字要和echarts.registerMap("佛山市", {geoJSON: data}) 相对应
map: '佛山市',
label: {
show: false
},
aspectScale: 1, //长宽比
zoom: 1.1,
// 渐变色
itemStyle: {
borderColor: '0BC265',
shadowColor: '#182f68',
shadowOffsetX: 0,
shadowOffsetY: 20, //这里可以设置一下Y轴的阴影，比较有层次感
borderWidth: 0,//设置外层边框
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.9,
// 关键代码 会从offset：0到offset：1去过渡。
// 我们可以增加其中的过渡颜色，在0和1之间加就行。
// 比如：{
// offset: 0.5, color: 'green'
// },
colorStops: [
{
offset: 0, color: '#0a3288'
},
{
offset: 1, color: 'rgba(27,130,183,1)'
}
],
global: false
},
},
},
series: [
{
zoom: 1.1,
aspectScale: 1,
shading: 'realistic',
name: "地图",
map: "佛山市",
selectedMode: 'single',//选择类型,
hoverable: true,//鼠标经过高亮
type: "map",
// 鼠标移入的样式
emphasis: {
label: {
show: true,
color: 'white',
fontSize: 16,
},
itemStyle: {
borderColor: '#0BC265',
borderWidth: 4,
areaColor: null,
},
},
// 选中的样式
select: {
label: {
color: 'white',
fontSize: 16,
}
},
// 地图样式
itemStyle: {
areaColor: 'rgba(0,0,0,0)',
borderWidth: 1,
borderColor: '#0BC265',
},
// 文字默认样式
label: {
show: true,
color: '#fff',
fontSize: 16,
distance: 20,
},
},
],
})geojson文件 
- 要让地图上展示地区名字，这里必须在properties的对象里面，写入name这个key值才可以。
地图展示 
4.地区标点
- 地区旁边标点:在series数组中添加多一个对象即可。
- 作用：相当于添加多一个图层，这个图层专门来标点。
data.js
js
// 标点
{
name: "地图",
map: "佛山市",
// 这个必须写上，否则无法对应地理坐标
coordinateSystem: 'geo',
// 散点图
type: "scatter",
// 标点的样式
itemStyle: {color: 'red'},
// 标点的数据
// 下面的value值是下面地区的中心经纬度，因为我想把点标在地区中心
// 这些点的值如何来的？
// 1.地区的中心点
// 2.如果没有，从geojson文件中找到对应地区的点（随便一个），把点进行手动调试，把中心点调试出来
data: [
{
name: '禅城区',
value: [113.055332, 22.999999]
},
{
name: '三水区',
value: [112.905332, 23.296666]
},
{
name: '高明区',
value: [112.655332, 22.796666]
},
{
name: '南海区',
value: [113.055332, 23.111999]
},
{
name: '顺德区',
value: [113.175332, 22.859999]
},
],
},效果图 
5.点击空白区域取消选中
index.vue
js
<template>
<div id="map" class="map" ref="map" @click="clickMap"></div>
</template>
<script setup>
import * as echarts from "echarts";
import {onMounted, ref} from "vue";
import { option } from "./data2.js";
let eCharts = ref();
let map = ref(null);
onMounted(() => {
fetch('/foshan.geojson').then(res => res.json())
.then(data => {
echarts.registerMap("佛山市", {geoJSON: data})
eCharts.value = echarts.init(map.value)
eCharts.value.setOption(option)
// 点击事件绑定
eCharts.value.on('click', (e) => {
// 点击地图非空白区域，这里可以进行操作
console.log('e', e)
})
})
})
// 以下为关键代码
// 让地图取消选中状态
function resetMap() {
eCharts.value.dispatchAction({
type: 'unselect',
// 这里的name跟geoJSON的文件里面properties对象的name属性对应
name: ['南海区', '高明区', '三水区', '顺德区', '禅城区']
})
}
// index作用:只绑定一次这个click事件,不然的话一直点击地图，一直就会绑定事件，就会导致触发多次了。
let index = 0
function clickMap() {
// 为了只绑定一次事件
if(index !== 0) return;
// 以下这个可以获取整个地图的点击区域，包括空白部分，所以我们才需要分辨出是否点击了空白区域。
eCharts.value.getZr().on('click', function (event) {
// 点击了空白处才触发下面的清理函数，如果不是空白处这个event.target不会是空。
// 那么就不会触发resetMap函数
if(!event.target) {
resetMap()
}
})
index++
}
</script>
<style scoped>
#map {
width: 700px;
height: 500px;
border: 1px solid red;
}
</style>效果图
6.所有代码
index.vue
js
<template>
<div id="map" class="map" ref="map" @click="clickMap"></div>
</template>
<script setup>
import * as echarts from "echarts";
import {onMounted, ref} from "vue";
import { option } from "./data.js";
let eCharts = ref();
let map = ref(null);
onMounted(() => {
fetch('/foshan.geojson').then(res => res.json())
.then(data => {
echarts.registerMap("佛山市", {geoJSON: data})
eCharts.value = echarts.init(map.value)
eCharts.value.setOption(option)
// 点击事件绑定
eCharts.value.on('click', (e) => {
// 点击地图非空白区域，这里可以进行操作
console.log('e', e)
})
})
})
// 以下为关键代码
// 让地图取消选中状态
function resetMap() {
eCharts.value.dispatchAction({
type: 'unselect',
// 这里的name跟geoJSON的文件里面properties对象的name属性对应
name: ['南海区', '高明区', '三水区', '顺德区', '禅城区']
})
}
// index作用:只绑定一次这个click事件,不然的话一直点击地图，一直就会绑定事件，就会导致触发多次了。
let index = 0
function clickMap() {
// 为了只绑定一次事件
if(index !== 0) return;
// 以下这个可以获取整个地图的点击区域，包括空白部分，所以我们才需要分辨出是否点击了空白区域。
eCharts.value.getZr().on('click', function (event) {
// 点击了空白处才触发下面的清理函数，如果不是空白处这个event.target不会是空。
// 那么就不会触发resetMap函数
if(!event.target) {
resetMap()
}
})
index++
}
</script>
<style scoped>
#map {
width: 700px;
height: 500px;
border: 1px solid red;
}
</style>data.js
js
import {reactive} from "vue";
export const option = reactive({
geo: {
show: true,
// 这个名字要和echarts.registerMap("佛山市", {geoJSON: data}) 相对应
map: '佛山市',
label: {
show: false
},
aspectScale: 1, //长宽比
zoom: 1.1,
// 渐变色
itemStyle: {
borderColor: '0BC265',
shadowColor: '#182f68',
shadowOffsetX: 0,
shadowOffsetY: 20, //这里可以设置一下Y轴的阴影，比较有层次感
borderWidth: 0,//设置外层边框
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.9,
// 关键代码 会从offset：0到offset：1去过渡。
// 我们可以增加其中的过渡颜色，在0和1之间加就行。
// 比如：{
// offset: 0.5, color: 'green'
// },
colorStops: [
{
offset: 0, color: '#0a3288'
},
{
offset: 1, color: 'rgba(27,130,183,1)'
}
],
global: false
},
},
},
series: [
{
zoom: 1.1,
aspectScale: 1,
shading: 'realistic',
name: "地图",
map: "佛山市",
// aspectScale: 1.0,
selectedMode: 'single',//选择类型,
hoverable: true,//鼠标经过高亮
type: "map",
// 鼠标移入的样式
emphasis: {
label: {
show: true,
color: 'white',
fontSize: 16,
},
itemStyle: {
borderColor: '#0BC265',
borderWidth: 4,
areaColor: null,
},
},
// 选中的样式
select: {
label: {
color: 'white',
fontSize: 16,
}
},
// 地图样式
itemStyle: {
areaColor: 'rgba(0,0,0,0)',
borderWidth: 1,
borderColor: '#0BC265',
},
// 文字默认样式
label: {
show: true,
color: '#fff',
fontSize: 16,
distance: 20,
},
},
// 标点
{
name: "地图",
map: "佛山市",
// 这个必须写上，否贼无法对应地理坐标
coordinateSystem: 'geo',
// 散点图
type: "scatter",
// 标点的样式
itemStyle: {color: 'red'},
// 标点的数据
// 下面的value值是下面地区的中心经纬度，因为我想把点标在地区中心
// 这些点的值如何来的？
// 1.地区的中心点
// 2.如果没有，从geojson文件中找到对应地区的点（随便一个），
// 把点进行手动调试，把中心点调试出来
data: [
{
name: '禅城区',
value: [113.055332, 22.999999]
},
{
name: '三水区',
value: [112.905332, 23.296666]
},
{
name: '高明区',
value: [112.655332, 22.796666]
},
{
name: '南海区',
value: [113.055332, 23.111999]
},
{
name: '顺德区',
value: [113.175332, 22.859999]
},
],
},
],
})7. geo和series中map的区别：
geo组件：geo组件用于绘制地理坐标系上的图表。它可以绘制各种类型的图表，如散点图、线图和柱状图等，但是它的数据是基于地理坐标的。geo组件可以绘制全球范围的地图，也可以绘制各种国家、地区的地图。在使用geo组件时，需要提供地理坐标系的相关配置，如投影方式、缩放、中心位置等。通过geo组件，可以在地图上展示各种数据的分布情况。map组件：map组件用于绘制预定义的地图，它内置了一些常见的地图数据，如中国地图、世界地图等。与geo不同，map组件的数据是基于地图的区域进行的，而不是地理坐标。map组件提供了一些预定义的地图数据，可以直接使用，无需手动配置地理坐标系。通过map组件，可以在地图上展示各个区域的数据情况。- 总结来说，
geo组件适用于自定义的地理数据可视化，可以根据需要配置地理坐标系，绘制各种类型的图表；而map组件适用于预定义的地图数据可视化，提供了一些常见地图的数据，方便快速展示各个区域的数据情况。
全文总结
- 本文介绍：geojson获取数据、渐变色、地图描边、添加地区名字、地区名标点、点击空白区域取消选中地图状态功能实现。
- 代码解释都通过注释的方式说明，每一行关键代码上方都添加了注释，请仔细观看注释。
- 有什么问题可以下方留言或者私信哦。