36-引入地图

下面我们在首页引入地图功能

首先我们要准备一下地图的 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>