下面我们在首页引入地图功能
首先我们要准备一下地图的 geojson 数据，去这里 https://datav.aliyun.com/portal/school/atlas/area_selector 下载即可
下载下来之后，放置到mock/data/china.geojson.json里面
然后，我们改一下pie.json为pie-map.json，里面先添加一下地图相关的字段saleMap
对应的 mock 接口也调整一下
相应的类型
interfaceIndexDataItf{salePie:{}[]saleMap:{}[]}最后页面实现逻辑
<template><divclass=''><MyPie:data="salePie"></MyPie><MyMap:data="saleMap"></MyMap></div></template><scriptlang='ts'setup>importMyPiefrom'./components/MyPie.vue'importMyMapfrom'./components/MyMap.vue'import{reactive,toRefs}from'vue'import{getAdminStat}from'@/api/index'import{ElMessage}from'element-plus'conststate=reactive<{salePie:{}[]saleMap:{}[]}>({salePie:[],saleMap:[]})let{salePie,saleMap}=toRefs(state)getAdminStat().then((res)=>{if(res.code===200){salePie.value=res.data.salePie saleMap.value=res.data.saleMap}else{ElMessage.error('获取首页数据失败')}})</script><stylelang='less'scoped></style>新建地图MyMap.vue组件
<template><divid="map"style="width:100%;height:700px;"></div></template><scriptlang='ts'setup>import{watch}from'vue'import*asechartsfrom'echarts'importchinaGeojsonfrom'@/mock/data/china.geojson.json'// ECharts 提供的 API，用于注册地图数据// 注册后，在 ECharts 的 option 中设置 map: 'china' 即可显示中国地图。echarts.registerMap('china',chinaGeojsonasany)constprops=defineProps<{data:{}[]}>()letmyMap:echarts.ECharts;watch(()=>props.data,()=>{// 基于准备好的dom，初始化echarts实例if(!myMap){myMap=echarts.init(document.getElementById('map'));constoption={series:{type:'map',map:'china'}}myMap.setOption(option);}})</script><stylelang='less'scoped></style>
