Vue中使用echarts生成地图步骤详解

1.创建容器元素

 <div class="map" id="map" style="width:1000px;height:1000px;"></div>

2.Vue项目引入world.js(我这里的演示是世界地图，不同地图对应js文件不一样)

world.js文件包含：

1. 地理坐标数据 ：world.js 文件中包含了各个国家和地区的地理坐标数据，这些数据用于在地图上准确地定位和绘制每个国家和地区的形状。

2. 地图形状：文件中还包含了世界地图上各个国家和地区的轮廓形状数据，这些数据用于在图表中绘制出各个国家和地区的边界。

3. 地区名称映射 ：world.js 还可能包含地区名称与代码之间的映射关系，这样在配置 ECharts 时可以通过地区名称来引用具体的地理区域。

world.json 文件包含：

1. 地理区域的名称和代码：文件中还包含了国家和地区的名称以及对应的代码，这些信息用于在地图上标识和区分不同的区域。

对应资源已上传，可自行放置位置
import '@/common/map/world.js' // 引入世界地图
import map from '@/common/map/world.json'

3.引入完毕使用

export default {
    data() {
        return {
            nameMap: map.namemap
        }
    },
    mounted() {
        this.drawMap()

    },
    methods: {
        drawMap() {
            var myChart = this.$echarts.init(document.getElementById('map'));
            let option = {
                // backgroundColor: "#02AFDB",
                title: {
                    left: '40%',
                    top: '0px',
                    textStyle: {
                        color: '#02AFDB',
                        opacity: 0.7
                    }
                },
                visualMap: {
                    max: 390000,
                    min: 100,
                    type: 'continuous', // continuous 类型为连续型  piecewise 类型为分段型
                    show: false, // 是否显示 visualMap-continuous 组件 如果设置为 false，不会显示，但是数据映射的功能还存在
                    // 文本样式
                    textStyle: {
                        fontSize: 14,
                        color: 'black'
                    },
                    realtime: false, // 拖拽时，是否实时更新
                    calculable: false, // 是否显示拖拽用的手柄
                    // 定义 在选中范围中 的视觉元素
                    inRange: {
                        color: ['#5bc2e7', '#6980c5', '#70dfdf', '#f7f1ee', '#3390FF'] // 图元的颜色
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        console.log(params)
                        if (params.name) {
                            return params.name + ' : ' + (isNaN(params.value) ? 0 : parseInt(params.value));
                        }
                    }
                },
                series: [{
                    type: 'map',
                    roam: true,
                    mapType: 'world',
                    zoom: 1.2,
                    data: [
                        { name: '俄罗斯', value: 388320 },
                        { name: '乌克兰', value: 368971 },
                        { name: '美国', value: 81713 },
                        { name: '英国', value: 31238 },
                        { name: '德国', value: 22838 },
                        { name: '波兰', value: 14551 },
                        { name: '中国', value: 14290 },
                        { name: '法国', value: 14148 },
                        { name: '土耳其', value: 14031 },
                        { name: '白俄罗斯', value: 8713 },
                        { name: '加拿大', value: 7761 },
                        { name: '以色列', value: 7368 },
                        { name: '澳大利亚', value: 4870 },
                        { name: '意大利', value: 4345 },
                        { name: '比利时', value: 4291 },
                        { name: '日本', value: 4167 },
                        { name: '芬兰', value: 3810 },
                        { name: '瑞士', value: 3541 },
                        { name: '匈牙利', value: 3498 },
                        { name: '立陶宛', value: 3423 },
                        { name: '瑞典', value: 3109 },
                        { name: '叙利亚', value: 2938 },
                        { name: '伊朗', value: 2894 },
                        { name: '爱沙尼亚', value: 2546 },
                        { name: '摩尔多瓦', value: 2399 },
                        { name: '拉脱维亚', value: 2236 },
                        { name: '荷兰', value: 2126 },
                        { name: '印度', value: 1954 },
                        { name: '爱尔兰', value: 1858 },
                        { name: '西班牙', value: 1823 },
                        { name: '挪威', value: 1718 },
                        { name: '奥地利', value: 1697 },
                        { name: '斯洛伐克', value: 1675 },
                        { name: '印度尼西亚', value: 1513 },
                        { name: '捷克共和国', value: 1494 },
                        { name: '葡萄牙', value: 1433 },
                        { name: '尼日利亚', value: 1306 },
                        { name: '巴基斯坦', value: 1277 },
                        { name: '阿富汗', value: 1241 },
                        { name: '丹麦', value: 1218 },
                        { name: '希腊', value: 1205 },
                        { name: '保加利亚', value: 1165 },
                        { name: '新西兰', value: 1112 },
                        { name: '卡塔尔', value: 920 },
                        { name: '韩国', value: 859 },
                        { name: '埃及', value: 835 },
                        { name: '伊拉克', value: 828 },
                        { name: '哈萨克斯坦', value: 731 },
                        { name: '罗马教廷（梵蒂冈城）', value: 725 },
                        { name: '南非', value: 714 },
                        { name: '沙特阿拉伯', value: 708 },
                        { name: '菲律宾', value: 658 },
                        { name: '墨西哥', value: 650 },
                        { name: '阿塞拜疆', value: 582 },
                        { name: '朝鲜', value: 573 },
                        { name: '巴西', value: 567 },
                        { name: '阿拉伯联合酋长国', value: 553 },
                        { name: '古巴', value: 551 },
                        { name: '越南', value: 522 },
                        { name: '亚美尼亚', value: 518 },
                        { name: '孟加拉国', value: 499 },
                        { name: '委内瑞拉', value: 471 },
                        { name: '被占领巴勒斯坦领土', value: 447 },
                        { name: '塞尔维亚', value: 436 },
                        { name: '新加坡', value: 427 },
                        { name: '摩洛哥', value: 415 },
                        { name: '肯尼亚', value: 399 },
                        { name: '马来西亚', value: 378 },
                        { name: '阿尔巴尼亚', value: 367 },
                        { name: '塔吉克斯坦', value: 346 },
                        { name: '塞浦路斯', value: 322 },
                        { name: '斐济', value: 308 },
                        { name: '利比亚', value: 291 },
                        { name: '黎巴嫩', value: 283 },
                        { name: '也门', value: 276 },
                        { name: '泰国', value: 274 },
                        { name: '阿根廷', value: 269 },
                        { name: '卢森堡', value: 268 },
                        { name: '加纳', value: 252 },
                        { name: '克罗地亚', value: 249 },
                        { name: '乔丹', value: 232 },
                        { name: '土库曼斯坦', value: 216 },
                        { name: '乌兹别克斯坦', value: 216 },
                        { name: '苏丹', value: 212 },
                        { name: '塞内加尔', value: 205 },
                        { name: '厄立特里亚', value: 195 },
                        { name: '津巴布韦', value: 190 },
                        { name: '智利', value: 187 },
                        { name: '尼泊尔', value: 180 },
                        { name: '冰岛', value: 178 },
                        { name: '缅甸', value: 176 },
                        { name: '阿尔及利亚', value: 175 },
                        { name: '吉尔吉斯斯坦', value: 157 },
                        { name: '尼加拉瓜', value: 157 },
                        { name: '哥伦比亚', value: 156 },
                        { name: '斯里兰卡', value: 152 },
                        { name: '马耳他', value: 142 },
                        { name: '卢旺达', value: 138 },
                        { name: '埃塞俄比亚', value: 113 },
                        { name: '索马里', value: 110 },
                        { name: '柬埔寨', value: 108 },
                        { name: '马里', value: 105 },
                        { name: '科威特', value: 99 },
                        { name: '秘鲁', value: 83 },
                        { name: '蒙古', value: 79 },
                        { name: '厄瓜多尔', value: 77 },
                        { name: '阿曼', value: 74 },
                        { name: '突尼斯', value: 71 },
                        { name: '马其顿', value: 68 },
                        { name: '乌干达', value: 66 },
                        { name: '文莱达鲁萨兰国', value: 61 },
                        { name: '马尔代夫', value: 57 },
                        { name: '危地马拉', value: 56 },
                        { name: '巴林', value: 55 },
                        { name: '摩纳哥', value: 55 },
                        { name: '坦桑尼亚', value: 51 },
                        { name: '中非共和国', value: 50 },
                        { name: '乌拉圭', value: 50 },
                        { name: '莫桑比克', value: 49 },
                        { name: '马拉维', value: 48 },
                        { name: '巴拿马', value: 48 },
                        { name: '乍得', value: 45 },
                        { name: '多米尼加共和国', value: 43 },
                        { name: '喀麦隆', value: 40 },
                        { name: '伯利兹', value: 35 },
                        { name: '加蓬', value: 35 },
                        { name: '尼日尔', value: 34 },
                        { name: '刚果', value: 33 },
                        { name: '百慕大群岛', value: 31 },
                        { name: '圭亚那', value: 31 },
                        { name: '赞比亚', value: 31 },
                        { name: '刚果', value: 30 },
                        { name: '佐治亚州', value: 29 },
                        { name: '洪都拉斯', value: 29 },
                        { name: '利比里亚', value: 29 },
                        { name: '塞舌尔', value: 29 },
                        { name: '所罗门群岛', value: 27 },
                        { name: '格林纳达', value: 26 },
                        { name: '牙买加', value: 26 },
                        { name: '巴拉圭', value: 26 },
                        { name: '哥斯达黎加', value: 25 },
                        { name: '圣基茨和尼维斯', value: 24 },
                        { name: '纳米比亚', value: 22 },
                        { name: '安哥拉', value: 21 },
                        { name: '科特迪瓦（科特迪瓦）', value: 21 },
                        { name: '老挝', value: 20 },
                        { name: '博茨瓦纳', value: 19 },
                        { name: '布基纳法索', value: 18 },
                        { name: '玻利维亚', value: 18 },
                        { name: '巴巴多斯', value: 18 },
                        { name: '罗马尼亚', value: 18 },
                        { name: '吉布提', value: 17 },
                        { name: '塞拉利昂', value: 17 },
                        { name: '不丹', value: 16 },
                        { name: '萨尔瓦多', value: 16 },
                        { name: '巴哈马', value: 13 },
                        { name: '圣卢西亚', value: 12 },
                        { name: '圣文森特和格林纳丁斯', value: 12 },
                        { name: '密克罗尼西亚', value: 9 },
                        { name: '特立尼达和多巴哥', value: 9 },
                        { name: '赤道几内亚', value: 8 },
                        { name: '海地', value: 8 },
                        { name: '帕劳', value: 8 },
                        { name: '毛里塔尼亚', value: 7 },
                        { name: '布隆迪', value: 6 },
                        { name: '科摩罗', value: 6 },
                        { name: '开曼群岛', value: 6 },
                        { name: '冈比亚', value: 6 },
                        { name: '马达加斯加', value: 6 },
                        { name: '毛里求斯', value: 6 },
                        { name: '多米尼加', value: 5 },
                        { name: '几尼', value: 5 },
                        { name: '基里巴斯', value: 5 },
                        { name: '汤加', value: 5 },
                        { name: '列支敦士登', value: 3 },
                        { name: '莱索托', value: 3 },
                        { name: '多哥', value: 3 },
                        { name: '瓦努阿图', value: 3 },
                        { name: '安提瓜和巴布达', value: 2 },
                        { name: '几内亚比绍', value: 2 },
                        { name: '中国香港特别行政区', value: 1 },
                        { name: '中国澳门特别行政区', value: 1 },
                        { name: '巴布亚新几内亚', value: 1 },
                        { name: '苏里南', value: 1 },
                    ],
                    nameMap: this.nameMap,
                    symbolSize: 12,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: true,
                            textStyle: { color: 'white' }
                        }
                    },
                    itemStyle: {
                        borderWidth: 0.5, // 描边线宽 为 0 时无描边
                        borderColor: 'rgba(112,187,252,.5)', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
                        borderType: 'solid', // rgba(2,37,101,.5)描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
                        emphasis: {
                            areaColor: 'rgba(2,37,101,.8)',
                            lable: { color: "white" },
                            textStyle: { color: "black" }
                        }
                    }
                }],
            };
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });

        }
    }
}

图示