Vue+ECharts实现可视化全国地图省市下钻(保姆级)
> 使用时间:2023年5月16日
> 版本："echarts": "^5.4.0","echarts-gl": "^2.0.9",
最近业务需要地图下钻，网上搜了一圈，乱七八糟的，还有Vue里用JQ的(简直了)
### 流程图
> 忽略项目引入，直奔主题
以下写法是Vue选项式，未精简封装，仅供刚接触Echarts小白参考
```
<template>
<div id="mymap" style="width: 500px;height:600px;"></div>
</template>
```
```
<script>
// 引入本地全国地图Json
import china from '/china.json'
theRequestMap() {
// 地图数据格式匹配,"河南省"是要匹配点击时候获取的省名，"henan"为本地Json的名字
let chinacod = {
"河南省": "henan",
......
}
// 创建echarts实例对象
let mCharts = this.$echarts.init(document.getElementById('myhenanmap'))
// 生成地图并使用本地Json地图数据
this.$echarts.registerMap('china', china)
// 地图数据
let option = {
geo: {
type: 'map',
map: 'china', // 要与this.$echarts.registerMap('china', china)中的第一个参数保持一致
......
}
}
// 地图点击事件，在这里实现下钻
mCharts.on('click', function (params) {
//设置无下钻区域提示信息
if (!chinacod[params.name]) {
ElMessage({
message: '无此区域地图显示',
type: 'warning',
})
return;
}
// 获取地图点击区域的名字，根据名字请求本地地图Json
let area = chinacod[params.name]
axios.get(`static/${area}.json`)
.then(response => {
// 重新生成地图的Json数据
_this.$echarts.registerMap('chinaMap', response.data)
// 记录当前的区域，返回上地图的标识
_this.nowArea = area
// 使用setOption方法将地图重置为点击的市区
mCharts.setOption({
geo: {
type: 'map',
map: 'chinaMap', // 要与registerMap中的第一个参数保持一致
// 地图大小设置
layoutCenter: ["50%", "50%"],
layoutSize: '85%',
}
});
})
.catch(error => {
ElMessage({
message: '请求失败！',
type: 'error',
})
});
});
// 设置图标数据
option && mCharts.setOption(option);
}
// 地图返回上一级地图事件
onBack() {
//this.nowArea是地图点击时候存储的地图标识
this.theRequestMap(this.nowArea)
}
</script>
```
)