准备
1.确保安装了echarts
2.准备一份世界地图轮廓数据world.js,可在本文章上方免费下载
开始
效果图：
vue2组件完整代码：
<template>
<div ref="Map" class="GlobalMap"></div>
</template>
<script>
import "@/views/utils/world";
export default {
name:'worldMap',
props: {
industry: {
type: String,
default:'食品'
},
lineDatas: {
type: Array,
default:()=>{
return [
[{
name: '美国',
value: 1
}],[{
name: '墨西哥',
value: 3
}],[{
name: '巴西',
value: 9
}],[{
name: '台澎金马单独关税区',
value: 12
}],[{
name: '英国',
value: 11
}],[{
name: '德国',
value: 43
}],[{
name: '法国',
value: 34
}],[{
name: '意大利',
value: 139
}],[{
name: '南非',
value: 190
}],[{
name: '芬兰',
value: 101
}],[{
name: '印度',
value: 0
}],[{
name: '韩国',
value: 0
}],[{
name: '越南',
value: 0
}],[{
name: '菲律宾',
value: 0
}],[{
name: '澳大利亚',
value: 0
}],[{
name: '日本',
value: 0
}]
]
}
},
},
data() {
return {
hotDatas:[]
};
},
watch:{
'lineDatas':function(newVal){
if(newVal){
this.$nextTick( async()=>{
this.initData();
this.Global();
})
}
}
},
mounted() {
this.$nextTick( async()=>{
this.initData();
this.Global();
})
},
methods: {
// 处理数据格式
initData(){
this.hotDatas = this.lineDatas.map(e=>{
return e[0]
})
},
Global() {
// 以中华人民共和国为中心的世界地图坐标
// var chinaGeoCoordMap = {
// "阿富汗": [69.11,34.28],
// "日本": [139.69,35.69],
// "南非": [18.27,-33.55],
// "阿尔巴尼亚": [19.49,41.18],
// "阿尔及利亚": [3.08,36.42],
// "美属萨摩亚独立国": [190.43,-14.16],
// "安道尔": [1.32,42.31],
// "安哥拉": [13.15,-8.50],
// "安提瓜和巴布达": [298.52,17.20],
// "阿根廷": [300.00,-36.30],
// "亚美尼亚": [44.31,40.10],
// "阿鲁巴": [290.02,12.32],
// "澳大利亚": [149.08,-35.15],
// "奥地利": [16.22,48.12],
// "阿塞拜疆": [49.56,40.29],
// "巴哈马": [282.80,25.05],
// "巴林": [50.30,26.10],
// "孟加拉人民共和国": [90.26,23.43],
// "巴巴多斯": [300.30,13.05],
// "白俄罗斯": [27.30,53.52],
// "比利时": [4.21,50.51],
// "伯利兹": [271.30,17.18],
// "贝宁": [2.42,6.23],
// "不丹": [89.45,27.31],
// "玻利维亚": [291.90,-16.20],
// "波斯尼亚和黑塞哥维那": [18.26,43.52],
// "博茨瓦纳": [25.57,-24.45],
// "巴西": [312.48,-15.47],
// "英属维尔京群岛": [295.63,18.27],
// "文莱": [115.00,4.52],
// "保加利亚": [23.20,42.45],
// "布基纳法索": [-1.30,12.15],
// "布隆迪": [29.18,-3.16],
// "柬埔寨": [104.55,11.33],
// "喀麦隆": [11.35,3.50],
// "加拿大": [285.42,45.27],
// "佛得角": [-23.34,15.02],
// "开曼群岛": [279.76,19.20],
// "中非共和国": [18.35,4.23],
// "乍得": [14.59,12.10],
// "智利": [289.60,-33.24],
// "中华人民共和国": [116.20,39.55],
// "哥伦比亚": [286.00,4.34],
// "科摩罗": [43.16,-11.40],
// "刚果": [15.12,-4.09],
// "哥斯达黎加共和国": [275.98,9.55],
// "科特迪瓦": [-5.17,6.49],
// "克罗地亚": [15.58,45.50],
// "古巴": [277.78,23.08],
// "塞浦路斯": [33.25,35.10],
// "捷克共和国": [14.22,50.05],
// "朝鲜": [125.30,39.09],
// "刚果(扎伊尔)": [15.15,-4.20],
// "丹麦": [12.34,55.41],
// "吉布提": [42.20,11.08],
// "多米尼加共和国": [298.76,15.20],
// "多米尼加共和国共和国": [290.41,18.30],
// "东帝汶": [125.34,-8.29],
// "厄瓜多尔": [281.65,-0.15],
// "埃及": [31.14,30.01],
// "萨尔瓦多": [270.90,13.40],
// "赤道几内亚": [8.50,3.45],
// "厄立特里亚": [38.55,15.19],
// "爱沙尼亚": [24.48,59.22],
// "埃塞俄比亚": [38.42,9.02],
// "福克兰群岛(马尔维纳斯群岛)": [300.49,-51.40],
// "法罗群岛": [-6.56,62.05],
// "斐济": [178.30,-18.06],
// "芬兰": [25.03,60.15],
// "法国": [2.20,48.50],
// "法属圭亚那": [307.82,5.05],
// "法属波利尼西亚": [211.34,-17.32],
// "加蓬共和国": [9.26,0.25],
// "冈比亚": [-16.40,13.28],
// "格鲁吉亚": [44.50,41.43],
// "德国": [13.25,52.30],
// "加纳": [-0.06,5.35],
// "希腊": [23.46,37.58],
// "格陵兰": [308.65,64.10],
// "瓜德罗普岛": [298.56,16.00],
// "危地马拉": [270.22,14.40],
// "根西岛": [-2.33,49.26],
// "几内亚": [-13.49,9.29],
// "几内亚比绍": [-15.45,11.45],
// "圭亚那": [301.88,6.50],
// "海地": [287.80,18.40],
// "赫德岛和麦当劳群岛": [74.00,-53.00],
// "洪都拉斯": [272.86,14.05],
// "匈牙利共和国": [19.05,47.29],
// "冰岛": [-21.57,64.10],
// "印度": [77.13,28.37],
// "印度尼西亚": [106.49,-6.09],
// "伊朗": [51.30,35.44],
// "伊拉克": [44.30,33.20],
// "爱尔兰": [-6.15,53.21],
// "以色列": [35.12,31.47],
// "意大利": [12.29,41.54],
// "牙买加": [283.50,18.00],
// "约旦": [35.52,31.57],
// "哈萨克斯坦": [71.30,51.10],
// "肯尼亚": [36.48,-1.17],
// "基里巴斯": [173.00,1.30],
// "科威特": [48.00,29.30],
// "吉尔吉斯斯坦": [74.46,42.54],
// "老挝": [102.36,17.58],
// "拉脱维亚共和国": [24.08,56.53],
// "黎巴嫩": [35.31,33.53],
// "莱索托": [27.30,-29.18],
// "利比里亚共和国": [-10.47,6.18],
// "阿拉伯利比亚民众国": [13.07,32.49],
// "列支敦士登": [9.31,47.08],
// "立陶宛": [25.19,54.38],
// "卢森堡": [6.09,49.37],
// "马达加斯加": [47.31,-18.55],
// "马拉维": [33.48,-14.00],
// "马来西亚": [101.41,3.09],
// "马尔代夫": [73.28,4.00],
// "马里": [-7.55,12.34],
// "马耳他": [14.31,35.54],
// "马提尼克岛": [298.98,14.36],
// "毛里塔尼亚": [57.30,-20.10],
// "马约特岛": [45.14,-12.48],
// "墨西哥": [260.90,19.20],
// "密克罗尼西亚(联邦) ": [158.09,6.55],
// "摩尔多瓦共和国": [28.50,47.02],
// "莫桑比克": [32.32,-25.58],
// "缅甸": [96.20,16.45],
// "纳米比亚": [17.04,-22.35],
// "尼泊尔": [85.20,27.45],
// "荷兰": [4.54,52.23],
// "荷属安的列斯": [291.00,12.05],
// "新喀里多尼亚": [166.30,-22.17],
// "新西兰": [174.46,-41.19],
// "尼加拉瓜": [273.80,12.06],
// "尼日尔": [2.06,13.27],
// "尼日利亚": [7.32,9.05],
// "诺福克岛": [168.43,-45.20],
// "北马里亚纳群岛": [145.45,15.12],
// "挪威": [10.45,59.55],
// "阿曼": [58.36,23.37],
// "巴基斯坦": [73.10,33.40],
// "帕劳": [134.28,7.20],
// "巴拿马共和国": [280.75,9.00],
// "巴布亚新几内亚": [147.08,-9.24],
// "巴拉圭": [302.70,-25.10],
// "秘鲁": [293.00,-12.00],
// "菲律宾": [121.03,14.40],
// "波兰": [21.00,52.13],
// "葡萄牙": [-9.10,38.42],
// "波多黎各": [293.93,18.28],
// "卡塔尔": [51.35,25.15],
// "韩国": [126.58,37.31],
// "罗马尼亚": [26.10,44.27],
// "俄罗斯": [37.35,55.45],
// "卢旺达": [30.04,-1.59],
// "圣基茨和尼维斯": [297.57,17.17],
// "圣卢西亚": [299.42,14.02],
// "圣皮埃尔和密克隆": [303.88,46.46],
// "圣文森特和格林纳丁斯": [298.90,13.10],
// "萨摩亚独立国": [188.50,-13.50],
// "圣马力诺": [12.30,43.55],
// "圣多美和普林西比": [6.39,0.10],
// "沙特阿拉伯": [46.42,24.41],
// "塞内加尔": [-17.29,14.34],
// "塞拉利昂": [-13.17,8.30],
// "斯洛伐克共和国": [17.07,48.10],
// "斯洛文尼亚": [14.33,46.04],
// "所罗门群岛": [159.57,-9.27],
// "索马里": [45.25,2.02],
// "比勒陀利亚": [28.12,-25.44],
// "西班牙": [-3.45,40.25],
// "苏丹": [32.35,15.31],
// "苏里南": [304.90,5.50],
// "斯威士兰": [31.06,-26.18],
// "瑞典": [18.03,59.20],
// "瑞士": [7.28,46.57],
// "阿拉伯叙利亚共和国": [36.18,33.30],
// "塔吉克斯坦共和国": [68.48,38.33],
// "泰国": [100.35,13.45],
// "马其顿": [21.26,42.01],
// "多哥": [1.20,6.09],
// "汤加": [186.00,-21.10],
// "突尼斯": [10.11,36.50],
// "土耳其": [32.54,39.57],
// "土库曼斯坦": [57.50,38.00],
// "图瓦卢": [179.13,-8.31],
// "乌干达": [32.30,0.20],
// "乌克兰": [30.28,50.30],
// "阿拉伯联合酋长国": [54.22,24.28],
// "英国": [-0.05,51.36],
// "坦桑尼亚": [35.45,-6.08],
// "美国": [283.02,39.91],
// "美属维尔京群岛": [295.44,18.21],
// "乌拉圭": [303.89,-34.50],
// "乌兹别克斯坦": [69.10,41.20],
// "瓦努阿图": [168.18,-17.45],
// "委内瑞拉": [293.45,10.30],
// "越南": [105.55,21.05],
// "南斯拉夫": [20.37,44.50],
// "赞比亚": [28.16,-15.28],
// "津巴布韦": [31.02,-17.43]
// }
// 世界地图坐标
var chinaGeoCoordMap = {
'阿富汗': [67.709953,33.93911],
'安哥拉': [17.873887,-11.202692],
'阿尔巴尼亚': [20.168331,41.153332],
'阿拉伯联合酋长国': [53.847818,23.424076],
'阿根廷': [-63.61667199999999,-38.416097],
'亚美尼亚': [45.038189,40.069099],
'法属南半球和南极领地': [69.348557,-49.280366],
'澳大利亚': [133.775136,-25.274398],
'奥地利': [14.550072,47.516231],
'阿塞拜疆': [47.576927,40.143105],
'布隆迪': [29.918886,-3.373056],
'比利时': [4.469936,50.503887],
'贝宁': [2.315834,9.30769],
'布基纳法索': [-1.561593,12.238333],
'孟加拉人民共和国': [90.356331,23.684994],
'保加利亚': [25.48583,42.733883],
'巴哈马': [-77.39627999999999,25.03428],
'波斯尼亚和黑塞哥维那': [17.679076,43.915886],
'白俄罗斯': [27.953389,53.709807],
'伯利兹': [-88.49765,17.189877],
'百慕大': [-64.7505,32.3078],
'玻利维亚': [-63.58865299999999,-16.290154],
'巴西': [-51.92528,-14.235004],
'文莱': [114.727669,4.535277],
'不丹': [90.433601,27.514162],
'博茨瓦纳': [24.684866,-22.328474],
'中非共和国': [20.939444,6.611110999999999],
'加拿大': [-106.346771,56.130366],
'瑞士': [8.227511999999999,46.818188],
'智利': [-71.542969,-35.675147],
'中华人民共和国': [104.195397,35.86166],
'象牙海岸': [-5.547079999999999,7.539988999999999],
'喀麦隆': [12.354722,7.369721999999999],
'刚果民主共和国': [21.758664,-4.038333],
'刚果共和国': [15.827659,-0.228021],
'哥伦比亚': [-74.297333,4.570868],
'哥斯达黎加共和国': [-83.753428,9.748916999999999],
'古巴': [-77.781167,21.521757],
'北塞浦路斯': [33.429859,35.126413],
'塞浦路斯': [33.429859,35.126413],
'捷克共和国': [15.472962,49.81749199999999],
'德国': [10.451526,51.165691],
'吉布提': [42.590275,11.825138],
'丹麦': [9.501785,56.26392],
'多明尼加共和国': [-70.162651,18.735693],
'阿尔及利亚': [1.659626,28.033886],
'厄瓜多尔': [-78.18340599999999,-1.831239],
'埃及': [30.802498,26.820553],
'厄立特里亚': [39.782334,15.179384],
'西班牙': [-3.74922,40.46366700000001],
'爱沙尼亚': [25.013607,58.595272],
'埃塞俄比亚': [40.489673,9.145000000000001],
'芬兰': [25.748151,61.92410999999999],
'斐': [178.065032,-17.713371],
'福克兰群岛': [-59.523613,-51.796253],
'法国': [2.213749,46.227638],
'加蓬共和国': [11.609444,-0.803689],
'英国': [-3.435973,55.378051],
'格鲁吉亚': [-82.9000751,32.1656221],
'加纳': [-1.023194,7.946527],
'几内亚': [-9.696645,9.945587],
'冈比亚': [-15.310139,13.443182],
'几内亚比绍': [-15.180413,11.803749],
'赤道几内亚': [10.267895,1.650801],
'希腊': [21.824312,39.074208],
'格陵兰': [-42.604303,71.706936],
'危地马拉': [-90.23075899999999,15.783471],
'法属圭亚那': [-53.125782,3.933889],
'圭亚那': [-58.93018,4.860416],
'洪都拉斯': [-86.241905,15.199999],
'克罗地亚': [15.2,45.1],
'海地': [-72.285215,18.971187],
'匈牙利共和国': [19.503304,47.162494],
'印尼': [113.921327,-0.789275],
'爱尔兰': [-8.24389,53.41291],
'伊朗': [53.688046,32.427908],
'伊拉克': [43.679291,33.223191],
'冰岛': [-19.020835,64.963051],
'以色列': [34.851612,31.046051],
'意大利': [12.56738,41.87194],
'牙买加': [-77.297508,18.109581],
'约旦': [36.238414,30.585164],
'日本': [138.252924,36.204824],
'哈萨克斯坦': [66.923684,48.019573],
'肯尼亚': [37.906193,-0.023559],
'吉尔吉斯斯坦': [74.766098,41.20438],
'柬埔寨': [104.990963,12.565679],
'韩国': [127.766922,35.907757],
'科索沃': [20.902977,42.6026359],
'科威特': [47.481766,29.31166],
'老挝': [102.495496,19.85627],
'黎巴嫩': [35.862285,33.854721],
'利比里亚共和国': [-9.429499000000002,6.428055],
'利比亚': [17.228331,26.3351],
'斯里兰卡': [80.77179699999999,7.873053999999999],
'莱索托': [28.233608,-29.609988],
'立陶宛': [23.881275,55.169438],
"巴林": [50.30,26.10],
'卢森堡': [6.129582999999999,49.815273],
'拉脱维亚共和国': [24.603189,56.879635],
'摩洛哥': [-7.092619999999999,31.791702],
'摩尔多瓦': [28.369885,47.411631],
'马达加斯加': [46.869107,-18.766947],
'墨西哥': [-102.552784,23.634501],
'马其顿': [21.745275,41.608635],
'马里': [-3.996166,17.570692],
'缅甸': [95.956223,21.913965],
'黑山共和国': [19.37439,42.708678],
'蒙古': [103.846656,46.862496],
'莫桑比克': [35.529562,-18.665695],
'毛里塔尼亚': [-10.940835,21.00789],
'马拉维': [34.301525,-13.254308],
'马来西亚': [101.975766,4.210484],
'纳米比亚': [18.49041,-22.95764],
'新喀里多尼亚': [165.618042,-20.904305],
'尼日尔': [8.081666,17.607789],
'尼日利亚': [8.675277,9.081999],
'尼加拉瓜': [-85.207229,12.865416],
'荷兰': [5.291265999999999,52.132633],
'挪威': [8.468945999999999,60.47202399999999],
'尼泊尔': [84.12400799999999,28.394857],
'新西兰': [174.885971,-40.900557],
'阿曼': [55.923255,21.512583],
'巴基斯坦': [69.34511599999999,30.375321],
'巴拿马共和国': [-80.782127,8.537981],
'秘鲁': [-75.015152,-9.189967],
'菲律宾': [121.774017,12.879721],
'巴布亚新几内亚': [143.95555,-6.314992999999999],
'波兰': [19.145136,51.919438],
'波多黎各': [-66.590149,18.220833],
'北朝鲜': [127.510093,40.339852],
'葡萄牙': [-8.224454,39.39987199999999],
'巴拉圭': [-58.443832,-23.442503],
'卡塔尔': [51.183884,25.354826],
'罗马尼亚': [24.96676,45.943161],
'俄罗斯': [105.318756,61.52401],
'俄罗斯联邦': [105.318756,61.52401],
'卢旺达': [29.873888,-1.940278],
'西撒哈拉': [-12.885834,24.215527],
'沙特阿拉伯': [45.079162,23.885942],
'苏丹': [30.217636,12.862807],
'南苏丹': [31.3069788,6.876991899999999],
'塞内加尔': [-14.452362,14.497401],
'所罗门群岛': [160.156194,-9.64571],
'塞拉利昂': [-11.779889,8.460555],
'萨尔瓦多': [-88.89653,13.794185],
'索马里兰': [46.8252838,9.411743399999999],
'索马里': [46.199616,5.152149],
'塞尔维亚': [21.005859,44.016521],
'苏里南': [-56.027783,3.919305],
'斯洛伐克共和国': [19.699024,48.669026],
'斯洛文尼亚': [14.995463,46.151241],
'瑞典': [18.643501,60.12816100000001],
'斯威士兰': [31.465866,-26.522503],
'叙利亚': [38.996815,34.80207499999999],
'乍得': [18.732207,15.454166],
'多哥': [0.824782,8.619543],
'泰国': [100.992541,15.870032],
'塔吉克斯坦共和国': [71.276093,38.861034],
'土库曼斯坦': [59.556278,38.969719],
'东帝汶': [125.727539,-8.874217],
'特里尼达和多巴哥': [-61.222503,10.691803],
'突尼斯': [9.537499,33.886917],
'土耳其': [35.243322,38.963745],
'坦桑尼亚': [34.888822,-6.369028],
'乌干达': [32.290275,1.373333],
'乌克兰': [31.16558,48.379433],
'乌拉圭': [-55.765835,-32.522779],
'美国': [-95.712891,37.09024],
'乌兹别克斯坦': [64.585262,41.377491],
'委内瑞拉': [-66.58973,6.42375],
'越南': [108.277199,14.058324],
'瓦努阿图': [166.959158,-15.376706],
'西岸': [35.3027226,31.9465703],
'也门': [48.516388,15.552727],
'南非': [22.937506,-30.559482],
'赞比亚': [27.849332,-13.133897],
'津巴布韦': [29.154857,-19.015438],
'科摩罗':[43.872219,-11.875001],
'印度尼西亚':[106.515414,-6.103040],
'印度': [78.96288,20.593684],
"刚果": [15.12,-4.09],
"萨摩亚独立国":[-171.46,13.5],
"朝鲜": [125.30,39.09],
"新加坡":[103.87546,1.30243],
"中非":[18.33,4.21],
"巴勒斯坦":[35.25,31.79],
"圣卢西亚": [-60.58,14.02],
"安提瓜和巴布达":[-61.48,17.20],
"巴巴多斯":[-59.30,13.05],
"开曼群岛":[-81.24,19.20],
"法罗群岛": [-6.56,62.05],
"圣文森特和格林纳丁斯":[-61.10,13.10],
"特立尼达和多巴哥":[-60.32,11.18],
"台澎金马单独关税区": [121.21,25.02],
"中国香港":[114.12,22.26],
"中国澳门":[113.5,22.2],
"格林纳达":[-61.4,12.7],
"塞舌尔共和国":[55.28,-4.4],
"多米尼克":[61.23,15.18],
"斐济": [178.30,-18.06],
"科特迪瓦": [-5.17,6.49],
'欧盟': [4.47,50.50],
}
// 配置地名中英文转换
var nameMap = {
Afghanistan: "阿富汗",
Singapore: "新加坡",
Angola: "安哥拉",
Albania: "阿尔巴尼亚",
"United Arab Emirates": "阿拉伯联合酋长国",
Argentina: "阿根廷",
Armenia: "亚美尼亚",
"French Southern and Antarctic Lands": "法属南半球和南极领地",
Australia: "澳大利亚",
Austria: "奥地利",
Azerbaijan: "阿塞拜疆",
Seychelles:'塞舌尔共和国',
Burundi: "布隆迪",
Belgium: "比利时",
Benin: "贝宁",
"Burkina Faso": "布基纳法索",
"Côte d'Ivoire":'科特迪瓦',
Bangladesh: "孟加拉人民共和国",
Bulgaria: "保加利亚",
"The Bahamas": "巴哈马",
"Bosnia and Herzegovina": "波斯尼亚和黑塞哥维那",
Belarus: "白俄罗斯",
Belize: "伯利兹",
Bermuda: "百慕大",
Bolivia: "玻利维亚",
Brazil: "巴西",
Brunei: "文莱",
Bhutan: "不丹",
Botswana: "博茨瓦纳",
"Central African Republic": "中非共和国",
Canada: "加拿大",
Switzerland: "瑞士",
Chile: "智利",
China: "中华人民共和国",
"Ivory Coast": "象牙海岸",
Cameroon: "喀麦隆",
"Dem. Rep. Congo": "刚果民主共和国",
"Republic of the Congo": "刚果共和国",
Colombia: "哥伦比亚",
"Costa Rica": "哥斯达黎加共和国",
Cuba: "古巴",
"Northern Cyprus": "北塞浦路斯",
Cyprus: "塞浦路斯",
"Czech Republic": "捷克共和国",
Germany: "德国",
Djibouti: "吉布提",
Denmark: "丹麦",
"Dominican Republic": "多明尼加共和国",
Algeria: "阿尔及利亚",
Ecuador: "厄瓜多尔",
Egypt: "埃及",
Eritrea: "厄立特里亚",
Spain: "西班牙",
Estonia: "爱沙尼亚",
Ethiopia: "埃塞俄比亚",
Bahrain:'巴林',
Finland: "芬兰",
Fiji: "斐济",
"Falkland Islands": "福克兰群岛",
France: "法国",
Gabon: "加蓬共和国",
"United Kingdom": "英国",
Georgia: "格鲁吉亚",
Ghana: "加纳",
Guinea: "几内亚",
Gambia: "冈比亚",
"Guinea Bissau": "几内亚比绍",
Greece: "希腊",
Greenland: "格陵兰",
Guatemala: "危地马拉",
"French Guiana": "法属圭亚那",
Guyana: "圭亚那",
Honduras: "洪都拉斯",
Croatia: "克罗地亚",
Haiti: "海地",
Hungary: "匈牙利共和国",
Indonesia: "印度尼西亚",
India: "印度",
Ireland: "爱尔兰",
Iran: "伊朗",
Iraq: "伊拉克",
Iceland: "冰岛",
Israel: "以色列",
Italy: "意大利",
Jamaica: "牙买加",
Jordan: "约旦",
Japan: "日本",
Kazakhstan: "哈萨克斯坦",
Kenya: "肯尼亚",
Kyrgyzstan: "吉尔吉斯斯坦",
Cambodia: "柬埔寨",
Kosovo: "科索沃",
Kuwait: "科威特",
Laos: "老挝",
Lebanon: "黎巴嫩",
Liberia: "利比里亚共和国",
Libya: "利比亚",
"Sri Lanka": "斯里兰卡",
Lesotho: "莱索托",
Lithuania: "立陶宛",
Luxembourg: "卢森堡",
Latvia: "拉脱维亚共和国",
Morocco: "摩洛哥",
Moldova: "摩尔多瓦",
Madagascar: "马达加斯加",
Mexico: "墨西哥",
Macedonia: "马其顿",
Mali: "马里",
Myanmar: "缅甸",
Montenegro: "黑山共和国",
Mongolia: "蒙古",
Mozambique: "莫桑比克",
Mauritania: "毛里塔尼亚",
Malawi: "马拉维",
Malaysia: "马来西亚",
Namibia: "纳米比亚",
"New Caledonia": "新喀里多尼亚",
Niger: "尼日尔",
Nigeria: "尼日利亚",
Nicaragua: "尼加拉瓜",
Netherlands: "荷兰",
Norway: "挪威",
Nepal: "尼泊尔",
"New Zealand": "新西兰",
Oman: "阿曼",
Pakistan: "巴基斯坦",
Panama: "巴拿马共和国",
Peru: "秘鲁",
Philippines: "菲律宾",
"Papua New Guinea": "巴布亚新几内亚",
Poland: "波兰",
"Puerto Rico": "波多黎各",
"North Korea": "北朝鲜",
Portugal: "葡萄牙",
Paraguay: "巴拉圭",
Qatar: "卡塔尔",
Romania: "罗马尼亚",
Russia: "俄罗斯",
Rwanda: "卢旺达",
"Western Sahara": "西撒哈拉",
"Saudi Arabia": "沙特阿拉伯",
Sudan: "苏丹",
"S. Sudan": "南苏丹",
Senegal: "塞内加尔",
"Solomon Islands": "所罗门群岛",
"Sierra Leone": "塞拉利昂",
"El Salvador": "萨尔瓦多",
Somaliland: "索马里兰",
Somalia: "索马里",
"Republic of Serbia": "塞尔维亚",
Suriname: "苏里南",
Slovakia: "斯洛伐克共和国",
Slovenia: "斯洛文尼亚",
Sweden: "瑞典",
Swaziland: "斯威士兰",
Syria: "叙利亚",
Chad: "乍得",
Togo: "多哥",
Thailand: "泰国",
Tajikistan: "塔吉克斯坦共和国",
Turkmenistan: "土库曼斯坦",
"East Timor": "东帝汶",
"Trinidad and Tobago": "特立尼达和多巴哥",
Tunisia: "突尼斯",
Turkey: "土耳其",
Uganda: "乌干达",
Ukraine: "乌克兰",
Uruguay: "乌拉圭",
"United States": "美国",
Uzbekistan: "乌兹别克斯坦",
Venezuela: "委内瑞拉",
Vietnam: "越南",
Vanuatu: "瓦努阿图",
"West Bank": "西岸",
Yemen: "也门",
"South Africa": "南非",
Zambia: "赞比亚",
Korea: "韩国",
Tanzania: "坦桑尼亚",
Zimbabwe: "津巴布韦",
Congo: "刚果",
"Central African Rep.": "中非",
Serbia: "塞尔维亚",
"Bosnia and Herz.": "波黑",
"Czech Rep.": "捷克",
"W. Sahara": "西撒哈拉",
"Lao PDR": "老挝",
"Dem. Rep. Korea": "朝鲜",
"Falkland Is.": "福克兰群岛",
"Timor-Leste": "东帝汶",
"Solomon Is.": "所罗门群岛",
Palestine: "巴勒斯坦",
"N. Cyprus": "北塞浦路斯",
Aland: "奥兰群岛",
"Fr. S. Antarctic Lands": "法属南半球和南极陆地",
Mauritius: "毛里求斯",
Comoros: "科摩罗",
"Eq. Guinea": "赤道几内亚",
"Guinea-Bissau": "几内亚比绍",
"Dominican Rep.": "多米尼加共和国",
"Saint Lucia": "圣卢西亚",
Dominica: "多米尼克",
"Antigua and Barb.": "安提瓜和巴布达",
"U.S. Virgin Is.": "美国原始岛屿",
Montserrat: "蒙塞拉特",
Grenada: "格林纳达",
Barbados: "巴巴多斯",
Samoa: "萨摩亚独立国",
Bahamas: "巴哈马",
"Cayman Is.": "开曼群岛",
"Faeroe Is.": "法罗群岛",
"IsIe of Man": "马恩岛",
Malta: "马耳他共和国",
Jersey: "泽西",
"Cape Verde": "佛得角共和国",
"Turks and Caicos Is.": "特克斯和凯科斯群岛",
"St. Vin. and Gren.": "圣文森特和格林纳丁斯",
};
var convertData = function(data) {
var res = [];
for(var i = 0; i < data.length; i++) {
var dataItem = data[i];
// console.log(dataItem)
var fromCoord = chinaGeoCoordMap[dataItem[0].name];
var toCoord = [116.20,39.55];//中心点地理坐标
if(fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem[0].value
}, {
coord: toCoord,
}]);
}
}
return res;
};
var series = [];
[['中华人民共和国', this.lineDatas]].forEach(function(item) {
series.push({
type: 'lines',
coordinateSystem: 'geo',
zlevel: 2,
effect: {
show: true,
period: 8, //箭头指向速度，值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 5, //图标大小
color: '#01ddff'
},
lineStyle: {
normal: {
show:true,
width: 0.3, //尾迹线条宽度
opacity: 0.6, //尾迹线条透明度
curveness: 0.2, //尾迹线条曲直度
color: '#fff'
},
color: '#fff',
},
data: convertData(item[1])
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 1,
rippleEffect: { //涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 4, //波纹圆环最大限制，值越大波纹越大
color:'#01ddff'
},
label: {
normal: {
show: true,
position: 'right', //显示位置
offset: [-15,2], //偏移设置
formatter: function(){//圆环显示文字
// return params.data.name;
return '国'
},
fontSize: 12,
// color:'#fff',//文字颜色
opacity:0
},
emphasis: {
show: true
}
},
symbol: 'circle',
symbolSize: function() {
return 5; //圆环大小
},
itemStyle: {
normal: {
show: false,
color: '#fff'
}
},
data: item[1].map(function(dataItem) {
return {
//在这里定义你所要展示的数据
name: dataItem[0].name,
value: chinaGeoCoordMap[dataItem[0].name]?chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]):[]
};
}),
},
//中心点
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4
},
label: {
normal: {
show: false,
position: 'right',
//offset:[5, 0],
color: '#0f0',
formatter: '{b}',
textStyle: {
color: "#0f0"
}
},
emphasis: {
show: true,
color: "#f60"
}
},
symbol: 'circle',
symbolSize: 0,
data: [{
name: item[0],
value: chinaGeoCoordMap[item[0]].concat([10]),
}],
},
{
name: "World",
type: "map",
mapType: "world",
zoom: 1.2, //地图大小
roam: false, //禁止拖拽
itemStyle: {
normal: {
areaColor: "#0079c2", //地图默认颜色
borderWidth: 0.5, //边框宽度
textStyle: {
color: "#fff", //默认文字颜色
},
borderColor: "#000", //地图边框颜色
},
emphasis: {
areaColor: "#4306fe", //动态背景颜色
},
},
select: {
//地图选中颜色
itemStyle: {
areaColor: "#0079c2",
textStyle:{
color:'#fff'
}
},
},
label: {
normal: {
//静态的时候展示样式
show: false, //是否显示地图名称
textStyle: {
color: "#000", //颜色
fontSize: 14, //文字大小
fontFamily: "Arial",
},
},
emphasis: {
//动态展示的样式
color: "#fff",
},
},
data:[],
nameMap: nameMap,
},
);
});
series[3].data = this.hotDatas
var mycontractMap = this.$echarts.init(this.$refs.Map);
// this.$echarts.registerMap("world", world);
let option = {
// 鼠标悬浮提示框
tooltip: {
trigger: "item",
borderColor: "#666", //区域边框颜色
formatter: function (params) {
if (params.name) {
return (
params.name +
" : " +
(params.value instanceof Array?params.value[2]:isNaN(params.value) ? 0 : parseInt(params.value))
);
}
},
},
visualMap: {
min: 0, //最小值
max: 1000, //最大值
// orient: "horizontal", //图例排列方向
// orient: "vertical", //图例模式
seriesIndex: 3, // 仅使第 三个series生效(即地图图层生效，不然会导致飞线颜色无法生效)
left: 26,
bottom: 20,
showLabel: true, //显示图例文本
precision: 0, //数据展示无小数点
itemWidth: 12, //图例宽度
itemHeight: 12, //图例高度
textGap: 10, //图例间距
inverse: false, //数据反向展示
hoverLink: true, //鼠标悬浮
inRange: {
//选中图例后背景半透明
color: ["rgba(3,4,5,0.4)"],
symbol: "rect", //更改图元样式
},
pieces: [
{
gt: 8,
label: "发布数量多",
color: "#da5163",
},
{
gte: 3,
lte: 8,
label: "发布数量中等",
color: "#fdaa34",
},
{
gte: 1,
lte: 2,
label: "发布数量少",
color: "#ffe64e",
},
{
lte: 0,
label: "未发布",
color: "#0079c2",
},
],
textStyle: {
color: "#fff",
fontSize: 14, //图元字体大小
fontWeight: 500,
},
},
geo: {
map: 'world',
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
roam: false, //是否允许缩放
itemStyle: {
normal: {
color: 'rgba(51, 69, 89, .5)', //地图背景色
borderColor: '#516a89', //省市边界线00fcff 516a89
borderWidth: 1
},
emphasis: {
color: 'rgba(37, 43, 61, .5)' //悬浮背景
}
}
},
series:series
};
mycontractMap.clear ()
mycontractMap.setOption(option);
mycontractMap.off('click');
mycontractMap.on('click',()=>{
window.open('/tsypfx?id='+ this.industry)
})
window.addEventListener("resize", function () {
if(this.$refs){
mycontractMap.resize();
}
});
},
},
};
</script>
<style lang="less" scoped>
.GlobalMap {
width: 100%;
height: 100%;
}
</style>注释：
运行代码记得检查world.js的引入路径是否正确，代码中有一部分注释掉的代码是以中国为中心的世界地图的国家坐标数据，如果你的world.js轮廓数据是以中国为世界中心的，那么就需要使用被注释掉的那段代码，如果使用本文中提供的world.js，则无需修改。
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
