在做项目的过程中得到一个需求，看似简单实则非常不容易，需求如下：
将上图进行可是化出来，最终结果实现，初版效果如下：
实现本效果其实不难，但是开放平台提供的数据最多能拿到县级行政区划的地图，再下放到乡镇级别的数据是拿不到的，需要使用一个付费软件（BIGMAP全能版），没有特殊需求暂时不用考虑，实现到省、市、县级的地图可视化，地理Geo.JSON数据方式如下，获取网址：
阿里云数据可视化平台：http://datav.aliyun.com/portal/school/atlas/area_selector
使用方式：
点击连接进入开放平台界面如下：
需要选择哪一层级的地理数据，在左侧的地图直接点击，选择好后在右侧的数据部分会生成相应的geo.json（地理坐标系，以下简称Geo）数据，拿到数据后算是完成了最重要的一部，因为Geo数据得到与否直接关系到你的地图能不能可视化出来。
数据获取：以山西为例，点击山西省的地图位置，省市级的行政区划就出现了，点击右侧选择JSON API(引入地理坐标的json数据接口)，将其复制到代码中需要使用的位置即可，也可以将JSON数据下载到本地进行使用，但是要采用导出模块的方式进行。
如果你动手能力极强，可以自己绘制行政区划界限，有一个小工具网站可以实现，有可能需要科学上网的工具进行辅助：https://www.strerr.com/geojson/geojson.html#map=8/82.600/-67.857
代码实现
使用vue进行实现，现在搭建好vue的代码框架后，定义好组件，我定义的组件名为HomeView，接下来安装Echarts插件，命令如下：
npm install echarts -s也可以通过下载echarts的js文件的方式进行引入，详情参照echarts的官网安装文档:https://echarts.apache.org/handbook/zh/get-started/,
在准备好后进行代码实现，主要思路为引入Echarts[import * as echarts from 'echarts']这里注意，与一般的组件的或者插件的引入写法不同，引入下载好的JSON数据(也就是可视化需要的Geo.JSON数据)[import { xMap } from '../assets/xxian.js']，在<template></template>中设置图标容器(注意：一定要给宽高，否则页面会什么都不显示）。
设置好Dom后开始写逻辑
主要代码如下：
<template>
<div ref="main" id="demo">
</div>
<!-- 弹出框容器 -->
</template>
<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue';
//引入隰县的地图参数
import { xMap } from '../assets/xxian.js'
//引入图片处理图片的格式
import img from '../assets/image/22.png'
console.log(img)
//设置初始值获取节点
const main = ref()
//页面挂载显示图表
onMounted(() => {
// console.log(main)
//echart获取地图存放容器
let myEcharts = echarts.init(main.value, null,)
//注册当前使用的地图名(第二个参数带表地图数据)
echarts.registerMap("xMap", xMap)
let option = {
//地理坐标组件
geo: {
//标注类型为map(地图)
type: 'map',
map: 'xMap',//设定好的地图参数
roam: true,//开启地图的平移
zoom: 1.2,//地图的初始比例
center: [110.945007, 36.699988],//初始化坐标的位置
//文字提示信息
label: {
show: true,//默认展示地图的文字信息
color: "#dfe6e9",//字体的颜色
fontSize: "14px",//文字的大小
},
//地图的颜色设置
itemStyle: {
//区块的颜色
areaColor: "#74b9ff",
//边界的颜色
borderColor: '#3742fa',
//设置背景的阴影颜色
shadowColor: 'rgba(255,91,112,0.7)',
shadowBlur: 30,
//描边的宽
borderWidth: "1",
//地图淡入淡出
emphasis: {
// focus:"self",
// self:"self"
color: "green"
}
}
},
//地图标记点信息展示
tooltip: {
show: true,
//触发类型
showContent: true,
trigger: 'item',
//自定义提示框的信息,return什么就显示什么
formatter(params) {
console.log(params)
return `str:${params.data.str}<br>第二行：${params.data.info}`
},
//设置信息框的出现方式
triggerOn: "click",
},
//标题
title: {
text: '隰县行政区地图',
left: "5%",
top: "3%",
textStyle: {
color: "red",
fontSize: 60,
textShadowBlur: 25,
textShadowColor: "#33ffff"
}
},
// 视觉映射效果
visualMap: {
type: 'continuous',
min: 100,
max: 5000,
calculable: true,
inRange: {
color: ["#ff66", "#eac736", "#d94e5d"],
},
textStyle: {
color: "green"
}
},
//地图样式描述
series: [
{
type: "scatter",//设计样式类型---散点图
//指定参照坐标系的类型为地理类型
coordinateSystem: "geo",
data: [
{
name: "黄土镇",
value: [111.11767, 36.634011],
symbol: 'image://' + img,
str: '测试文本',
info: '测试文本测试文本测试'
},
{
name: "下李乡", value: [110.935546, 36.87336],
},
{
name: "陡坡乡", value: [111.105324, 36.692755],
},
{
name: "寨子乡", value: [111.004772, 36.617782],
},
{
name: "龙泉镇", value: [111.003751, 36.681035],
},
{ name: "城南乡", value: [110.925058, 36.75314] },
{ name: "阳头升乡", value: [110.853383, 36.654324] },
{ name: "午城镇", value: [110.875703, 36.505627] },
],
//设置标记点的大小
symbolSize: 50,
//设置标记点的涟漪效果
// type: "effectScatter",
// 显示标记点的信息
// label: {
// show: true
// }
}
]
}
myEcharts.setOption(option)
//监听页面的改变
window.addEventListener("resize", () => {
// console.log("大小改变")
myEcharts.resize()
})
})
</script>
<style>
#demo {
margin: 0 auto;
width: 800px;
height: 600px;
background: url(../assets/bg.jpg) no-repeat center center;
background-size: cover;
}
</style>如果还是无从下手，可以看千峰教育老师录制的可视化视频，链接如下：、
https://www.bilibili.com/video/BV14u411D7qK?p=1&vd_source=0734930fe8bdfa1582275df05d264872