前言
之前的一个我的项目要在内网部署，这时高德地图须要走代理，在公司申请代理资源是一件极其繁琐的事件（手动狗头），退而求其次，将其中采纳地图局部用echarts代替，性能也产生了一些变动。如下图所示的定位查找改为点击下钻，这篇文章具体说一下Echarts多层级下钻及返回性能的实现过程
思路
===> 创立初始化地图
===> 点击获取下一层地图数据
===> 记录每一步地图所处层级
===> 返回上一级
实现
1. 创立初始化地图
应用echarts 画地图有两种办法,一种是通过js，一种是json，咱们这里通过json文件绘制
从echart 的文档上来看， 咱们在echart中应用 geo 和 应用 series 来绘制地图，它们之间有一点轻微的差异，能够忽略不计。
创立一个函数页面加载后调用
onMounted(() => { getAreaCounty('邵阳市')})const getAreaCounty = (name) => { // 我从后盾获取json数据的接口函数 apiAreaCounty({ parent: name }).then((res) => { // 获取绘制容器 mychart = echarts.init(chart.value) // 绘制地图 initEcharts(res, name, mychart) mychart.on('click', (params) => { // 点击下钻的操作写在这里 }) })}const initEcharts = (geoJson, name, mychart) => { echarts.registerMap(name, geoJson) let option = { series: [ { show: true, type: 'map', map: name, itemStyle: { areaColor: '#1890ff' } } ] } mychart.setOption(option)}2. 点击获取下一层地图数据
const getAreaCounty = (name) => { // 我从后盾获取json数据的接口函数 apiAreaCounty({ parent: name }).then((res) => { // 获取绘制容器 mychart = echarts.init(chart.value) // 绘制地图 initEcharts(res, name, mychart) mychart.on('click', (params) => { // 点击下钻的操作写在这里 // 从params中拿取每一层数据所须要的参数或判断条件等或者从全局变量/函数传参中读取 apiAreaCounty({ parent: params.name }).then((res) => { initEcharts(res, params.name, mychart) }) }) })}3. 记录每一步地图所处层级
这一步是多层下钻返回的要害，将每次点击的发动不同申请的参数保留到数组中，每一步返回，读取保留的最初一组参数发动新的申请，同时将数组中的这组数据移除
const initEcharts = (geoJson, name, mychart, level, flag) => { echarts.registerMap(name, geoJson) let option = { series: [ { show: true, type: 'map', map: name, itemStyle: { areaColor: '#1890ff' } } ] } mychart.setOption(option) if(flag){ mapStack.push({ name: lastName, // 发动申请所传参数 level: lastLevel // 发动申请所传参数 }) lastName = name lastLevel = level }}4. 返回上一级
绑定点击返回事件
function onBack() { if (mapStack.length != 0) {//如果有下级目录则执行 let map = mapStack.pop(); apiAreaCounty({ parent: map.name }, map.level).then((res) => { initEcharts(res, map.name, mychart, map.level, false) lastLevel = map.level lastName = map.name }) }}残缺代码
<template> <div ref="chart" id="main" @dblclick='onBack'></div></template><script setup>import { ref, onMounted } from 'vue'import * as echarts from 'echarts'import { apiAreaCounty } from '@/service/api/grid'onMounted(() => { getAreaCounty('邵阳市', 'county')})const chart = ref()// 记录所在位置let mapStack = []let lastName = ''let lastLevel = ''// 地图初始化数据let ShaoYangJson = nulllet mychart = null// 返回上一级const onBack = () => { console.log(mapStack) if (mapStack.length != 0) {//如果有下级目录则执行 let map = mapStack.pop(); //获取最初一步操作 apiAreaCounty({ parent: map.name }, map.level).then((res) => { initEcharts(res, map.name, mychart, map.level, false) lastLevel = map.level lastName = map.name }) }}let mapRes = { county: 'street', street: 'scope'}const getAreaCounty = (name, level) => { apiAreaCounty({ parent: name }, level).then((res) => { ShaoYangJson = res mychart = echarts.init(chart.value) initEcharts(res, area, mychart, level, false) lastName = '邵阳市' lastLevel = 'county' mychart.off('click') mychart.on('click', (params) => { // level/level1 是因为我后端接口提供了多个不同的接口 我在前端封装成了一个调用依据传参不同的level拼接url，对于level/level1 局部可疏忽 const level1 = mapRes[lastLevel] 判断是否还有下一级，没有下一级，返回初始地图 if (level1) { apiAreaCounty({ parent: params.name }, level1).then((res) => { initEcharts(res, params.name, mychart, level1, true) }) } else { initEcharts(ShaoYangJson, '邵阳市', mychart, 'county', false) mapStack = [] lastName = '邵阳市' lastLevel = 'county' } }) })}const initEcharts = (geoJson, name, mychart, level, flag) => { echarts.registerMap(name, geoJson) let option = { series: [ { show: true, type: 'map', map: name, itemStyle: { areaColor: '#1890ff' } } ] } mychart.setOption(option) if(flag){ mapStack.push({ name: lastName, level: lastLevel }) lastName = name lastLevel = level }}</script><style scoped>#main { width: 100%; height: 100%;}.back{ position: absolute; top: 0; left: 20px;}</style>成果
尽管实现了多级下钻及返回的成果，然而目前基于业务代码还没有进行过多的优化封装，心愿实现的过程对大家有帮忙