依靠本地json文件实现省市下钻，有后台的可以改成服务，样式没有，vue3+ts+echarts5，一定要设宽高
html：
<div @click="back">返回</div>
<div id="echartsMap" style="width: 58%; height: 100%"></div>
js：
引入
import { reactive, ref, unref, watch, onMounted, nextTick } from 'vue'
import { trackAGG } from '@/api'
import axios from 'axios'
import * as echarts from 'echarts'
import 'echarts/lib/chart/map'
import 'echarts/lib/component/visualMap'
import china from '../../../static/smap/china.json'
方法： geoIndex: 0,防止生成两个地图，mycharts.registerMap方法的第一个参数一定要一致
const getData = async (code: any) => {
//获取数据
const res: any = await trackAGG({
thematic_id: navStore.themId,
lev: 1,
code: ''"
})
if (res) {
res.features.forEach((ele: any) => {
chartData.value.push({
name: ele.properties.name,
code: ele.properties.code,
value: ele.properties.count
})
})
}
}
//名称对照
let shengname = {
上海市: 'shanghai',
云南省: 'yunnan',
内蒙古自治区: 'neimenggu',
北京市: 'beijing',
台湾省: 'taiwan',
吉林: 'jilin',
四川省: 'sichuan',
天津市: 'tianjin',
宁夏回族自治区: 'ningxia',
安徽省: 'anhui',
山东省: 'shandong',
山西省: 'shanxi',
广东省: 'guangdong',
广西壮族自治区: 'guangxi',
新疆维吾尔自治区: 'xinjiang',
江苏: 'jiangsu',
江西: 'jiangxi',
河北省: 'hebei',
河南: 'henan',
浙江省: 'zhejiang',
海南省: 'hainan',
湖北: 'hubei',
湖南: 'hunan',
澳门特别行政区: 'aomen',
甘肃省: 'gansu',
福建: 'fujian',
西藏自治区: 'xizang',
贵州省: 'guizhou',
辽宁省: 'liaoning',
重庆市: 'chongqing',
陕西省: 'shanxi1',
青海省: 'qinghai',
香港特别行政区: 'xianggang',
黑龙江: 'heilongjiang'
}
var mapStack: any = []
mapStack.push(china) //返回上级所需
let mCharts = ref<any>()
const init = () => {
// 创建echarts实例对象
if (!mCharts.value)
mCharts.value = echarts.init(
document.getElementById('echartsMap') as HTMLElement
)
// 生成地图并使用本地Json地图数据
echarts.registerMap('chinaMap', china as any)
let option = {
visualMap: {
left: 'right',
min: 500000,
max: 38000000,
inRange: {
color: [
'#313695',
'#4575b4',
'#74add1',
'#abd9e9',
'#e0f3f8',
'#ffffbf',
'#fee090',
'#fdae61',
'#f46d43',
'#d73027',
'#a50026'
]
},
text: ['High', 'Low'],
calculable: true
},
series: [
{
type: 'map',
roam: true,
map: 'chinaMap',
geoIndex: 0,
emphasis: {
label: {
show: true
}
},
data: chartData.value
}
]
}
option && mCharts.value.setOption(option)
window.onresize = function () {
mCharts.value.resize()
}
// 地图点击事件，在这里实现下钻
mCharts.value.on(
'click',
(params: any) => {
console.log(params)
// 获取地图点击区域的名字，根据名字请求本地地图Json
let area = shengname[params.name]
axios.get(`../../../static/smap/${area}.json`).then((response) => {
// 重新生成地图的Json数据
echarts.registerMap('chinaMap', response.data)
// 记录当前的区域，返回上地图的标识
if (mapStack.length < 3) {
mapStack.push(response.data)
}
// 使用setOption方法将地图重置为点击的市区
mCharts.value.setOption({
geo: {
type: 'map',
map: 'chinaMap',
layoutCenter: ['50%', '50%'],
layoutSize: '85%'
}
})
})
},
250
)
}
const back = () => {
mapStack.splice(mapStack.length - 1, 1)
// 把数组中的最后一个元素注册到地图
echarts.registerMap('chinaMap', mapStack[mapStack.length - 1])
mCharts.value.setOption({
geo: {
type: 'map',
map: 'chinaMap'
}
})
}
onMounted(async () => {
init()
getData('')
})
从static里引入文件
