36-引入地图 - 技术栈

36-引入地图

凯小默2025-12-13 14:02

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

首先我们要准备一下地图的 geojson 数据，去这里 https://datav.aliyun.com/portal/school/atlas/area_selector 下载即可

下载下来之后，放置到 mock/data/china.geojson.json 里面

然后，我们改一下 pie.json 为 pie-map.json，里面先添加一下地图相关的字段 saleMap

对应的 mock 接口也调整一下

相应的类型

ts 复制代码

interface IndexDataItf {
    salePie: {}[]
    saleMap: {}[]
}

最后页面实现逻辑

html 复制代码

<template>
    <div class=''>
        <MyPie :data="salePie"></MyPie>
        <MyMap :data="saleMap"></MyMap>
    </div>
</template>

<script lang='ts' setup>
import MyPie from './components/MyPie.vue'
import MyMap from './components/MyMap.vue'
import { reactive, toRefs } from 'vue'
import { getAdminStat} from '@/api/index'
import { ElMessage } from 'element-plus'

const state = 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>

<style lang='less' scoped>

</style>

新建地图 MyMap.vue 组件

html 复制代码

<template>
    <div id="map" style="width: 100%;height:700px;"></div>
</template>

<script lang='ts' setup>
import { watch } from 'vue'
import * as echarts from 'echarts'
import chinaGeojson from '@/mock/data/china.geojson.json'
// ECharts 提供的 API，用于注册地图数据
// 注册后，在 ECharts 的 option 中设置 map: 'china' 即可显示中国地图。
echarts.registerMap('china', chinaGeojson as any)

const props = defineProps<{
    data: {}[]
}>()
let myMap: echarts.ECharts;

watch(() => props.data, () => {
    // 基于准备好的dom，初始化echarts实例
    if(!myMap) {
        myMap = echarts.init(document.getElementById('map'));
        const option = {
            series: {
                type: 'map',
                map: 'china'
            }
        }
        myMap.setOption(option);
    }
})
</script>

<style lang='less' scoped>

</style>