vue3+Echarts实现中国地图

成品图：

 准备工作：

1、创建一个vue3的项目

2、安装Echarts，最好是安装新版本或者比较稳定的版本

3、开发地图需要一个china.json文件

这里我就介绍一下如何获取china,json文件

阿里云 DataV - 数据可视化平台 (aliyun.com)

 复制上面地址打开网页，并点击红框内容跳转到地图页面

 1可以搜索任何地方的地图，2点击蓝色按钮复制链接在浏览器打开一个新创口，在地址栏粘贴复制的地址

全选复制，在项目文件src文件下创建一个json文件，并在里面创建一个json文件命名为china.json

将复制的地理信息粘贴到文件中

 具体开发代码实现：

<template>
    <div style="width: 80%;height: 100vh;margin: 0 auto;">
        <div id='mapDom' style="width: 100%;height: 100%;"></div>
    </div>
</template>
<script setup>
    import { ref,nextTick, onMounted } from 'vue'
    import china from '@/json/china.json'
    import * as echarts from 'echarts'
    let dataList = ref([])
    const mapEcharts = () =>{
        let initMap = echarts.init(document.querySelector('#mapDom'))
        echarts.registerMap('china', china);
        let options = {
            title: {
            text: '中国地图',
            sublink:
                'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
            },
            tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} (销量)'
            },
            toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
            }
            },
            visualMap: {
            min: 0,
            max: 1000,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
            }
            },
            series: [
            {
                name: '中国',
                type: 'map',
                map: 'china',
                label: {
                show: false
                },
                data: dataList.value,
            }
            ]
        }
        initMap.setOption(options)
    }
    onMounted(()=>{
        dataList.value = [
            {name:'北京市',value:290},
            {name:'天津市',value:320},
            {name:'河北省',value:240},
            {name:'山西省',value:520},
            {name:'内蒙古自治区',value:120},
            {name:'辽宁省',value:210},
            {name:'吉林省',value:620},
            {name:'黑龙江省',value:20},
            {name:'上海市',value:220},
            {name:'江苏省',value:820},
            {name:'浙江省',value:320},
            {name:'安徽省',value:520},
            {name:'福建省',value:120},
            {name:'江西省',value:620},
            {name:'山东省',value:920},
            {name:'河南省',value:220},
            {name:'湖北省',value:720},
            {name:'湖南省',value:210},
            {name:'广东省',value:20},
            {name:'广西壮族自治区',value:20},
            {name:'海南省',value:240},
            {name:'重庆市',value:20},
            {name:'四川省',value:240},
            {name:'贵州省',value:420},
            {name:'云南省',value:320},
            {name:'西藏自治区',value:20},
            {name:'陕西省',value:240},
            {name:'甘肃省',value:920},
            {name:'青海省',value:720},
            {name:'宁夏回族自治区',value:120},
            {name:'新疆维吾尔自治区',value:420},
            {name:'台湾省',value:230},
            {name:'香港特别行政区',value:420},
            {name:'澳门特别行政区',value:210},
        ]
        nextTick(()=>{
            mapEcharts()
        })
    })
</script>
<style>

</style>

注意：

1、地图要设置宽和高

2、引入顺序是china.json，然后是echarts

3、如果引入的是china.json，那么需要配置echarts.registerMap('china', china)，如果引入的是china.js文件就不需要了

4、如果出险加载后的数据没有颜色（如下图所示）可能是china.json文件里的name名字与数据上的name名字不对应，检查一下，name名字是否一致

5、如果是从后端请求的数据，那么需要添加nextTick，要不然也会造成页面不加载数据