1.创建容器元素
<div class="map" id="map" style="width:1000px;height:1000px;"></div>2.Vue项目引入world.js(我这里的演示是世界地图，不同地图对应js文件不一样)
world.js文件包含：
-
地理坐标数据：
world.js文件中包含了各个国家和地区的地理坐标数据，这些数据用于在地图上准确地定位和绘制每个国家和地区的形状。 -
地图形状：文件中还包含了世界地图上各个国家和地区的轮廓形状数据，这些数据用于在图表中绘制出各个国家和地区的边界。
-
地区名称映射：
world.js还可能包含地区名称与代码之间的映射关系，这样在配置 ECharts 时可以通过地区名称来引用具体的地理区域。
world.json 文件包含：
-
地理区域的名称和代码：文件中还包含了国家和地区的名称以及对应的代码，这些信息用于在地图上标识和区分不同的区域。
对应资源已上传，可自行放置位置
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();});}}
}图示
