Vue中使用echarts生成地图步骤详解
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();
});
}
}
}图示
