1. 一般制作图表，我的步骤是先找到echart官方示例 https://echarts.apache.org/examples/zh/index.html ，挑一个和自己项目需求相近的，先给它把图弄出来；
2. 注意，示例中的数据都是死的，而我们在项目中一定是异步获取数据。所以第二步，先将数据和图表配合使页面图表正常展示；
3. 添加另外的功能：比如这次的zoom和resize；
4. 完善其它的细节，比如tooltip的样式什么的

请看一个极其朴素的国家地图👇哈哈今天重点是zoom和resize，其它的东西能删我都删掉了，这样子比较好看~

效果图

下载国家地图的GeoJson文件：挑自己合适的方式，可以将文件下载在本地，也可以选择人家的API获取。
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=33.50475906922609&lng=104.2822265625&zoom=4
与这俩相关的事情是，微信小程序，不能缩放！如果您能，记得告诉我怎么写哈哈哈哈哈

页面代码：

<script lang='ts' setup>
import ChinaMap from './ChinaMap.json'
import { init, registerMap } from 'echarts'
import {domResize} from '@/utils/utils'

// 容器DOM
const refMap = ref();
// chart实例
const chartInstance = ref();
// 数据
const data = ref();

const initWrap = () => {
    domResize(refMap.value, () => {
        chartInstance.value && chartInstance.value.resize()
    })
}

const initData = () => {
    data.value = [
        { name: '北京市', value: 20057.34 },
    ]
}

const initMap = () => {
    chartInstance.value = markRaw(init(refMap.value));
    registerMap('China', ChinaMap as any);

    chartInstance.value.setOption({
        series: [
            {
                type: 'map',
                map: 'China',
                label: {
                    show: true
                },
                data: data.value,
            }
        ],
        geo: {
            map: 'China',
            roam: true, //是否开启平游或缩放：'scale'为只开启缩放，'move'为拖拽
            scaleLimit: {
              //滚轮缩放的极限控制
              min: 1,
              max: 5,
            },
            // 这个geo好像是个图层的感觉。如果你好奇，可以将zoom的属性给大于1，就可以看到它了。而且缩放和拖拽其实都是在操作这个“蒙层”
            // 操作地图的层级
            zlevel: 1,
            label: {
              show: true,
            }
        }
    });
}

onMounted(() => {
    initData();
    initWrap();
    initMap();
})

</script>

<template>
    <div class="wrap-map borderT" ref="refMap"></div>
</template>

<style lang="scss" scoped>
.wrap-map {
    height: 100%;
}
</style>

tada~~~_{一个可以在PC端缩放和拖拽的地图就完成啦}