Echarts地圖使用擴充套件（1）
阿新 • • 發佈：2019-01-22
本文主要介紹map與geo兩種圖形的聯合使用，以及一些屬性的妙用。
實現效果：在世界地圖上標註省會城市的地理位置，以下只是選擇性的顯示了幾個點，如下圖所示：
實現此效果，需要有兩個series物件，series[0]為顏色漸變的世界地圖，series[1] 為 geo地理位置點;
需要引入的js
echarts.min.js 官網下載即可
world.js 官網下載即可
jquery-2.2.3.min.js
jquery.resize.js實現過程
1、獲取世界地圖各省會城市對應的地理位置
我們可以看到echarts3官網上提供了world地圖檔案，可以儲存成js或者json格式，下載world.json格式的地圖檔案，開啟我們可以看到，每個國家對應有一個coordinates列表，裡面是這個國家對應的各個城市的座標列表，但是沒有明確說明哪個座標是省會城市，於是我摒棄了官網的world檔案，從網上找到了一份相對比較齊全的世界地圖省會城市的地理位置表。
以下是world.json檔案
{
"coordinates" : {
"阿富汗" : [69.11, 34.28],
"阿爾巴尼亞" : [19.49, 41.18],
"阿爾及利亞" : [3.08, 36.42],
"美屬薩摩亞" : [-170.43, -14.16],
"安道爾" : [1.32, 42.31],
"安哥拉" : [13.15, -8.50],
"安地卡及巴布達" : [-61.48, 17.20],
"阿根廷" : [-60.00, -36.30 2、畫出顏色漸變的世界地圖 及 在地圖上標註出各個省會的地理位置
2.1 初始化世界地圖
function load_world_map(max, data){
//國家名稱中英文對應關係
var nameMap = {
'Afghanistan':'阿富汗',
'Angola':'安哥拉',
'Albania':'阿爾巴尼亞',
'United Arab Emirates':'阿拉伯聯合大公國',
'Argentina':'阿根廷',
'Armenia':'亞美尼亞',
'French Southern and Antarctic Lands':'法屬南半球領地',
'Australia':'澳大利亞',
'Austria':'奧地利',
'Azerbaijan':'亞塞拜然',
'Burundi':'蒲隆地',
'Belgium':'比利時',
'Benin':'貝南',
'Burkina Faso':'布吉納法索',
'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':'喀麥隆',
'Democratic Republic of the 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':'衣索比亞',
'Finland':'芬蘭',
'Fiji':'斐濟',
'Falkland Islands':'福克蘭群島',
'France':'法國',
'Gabon':'加彭',
'United Kingdom':'英國',
'Georgia':'喬治亞',
'Ghana':'迦納',
'Guinea':'幾內亞',
'Gambia':'甘比亞',
'Guinea Bissau':'幾內亞比索',
'Equatorial Guinea':'赤道幾內亞',
'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':'柬埔寨',
'South Korea':'韓國',
'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':'蘇丹',
'South 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':'土耳其',
'United Republic of Tanzania':'坦尚尼亞',
'Uganda':'烏干達',
'Ukraine':'烏克蘭',
'Uruguay':'烏拉圭',
'United States of America':'美國',
'Uzbekistan':'烏茲別克',
'Venezuela':'委內瑞拉',
'Vietnam':'越南',
'Vanuatu':'萬那杜共和國',
'West Bank':'西岸',
'Yemen':'葉門',
'South Africa':'南非',
'Zambia':'尚比亞',
'Zimbabwe':'辛巴威',
'Singapore':"新加坡"
};
var mapData = [];
$.each(data, function(i, obj){
var name = obj.name;
for(var key in nameMap) {
if( nameMap[key] == obj.name){
name = key;
}
}
mapData.push({
name : name,
value : obj.value,
tooltip : {
formatter : "{a}<br/>"+nameMap[name]+"："+obj.value
}
});
})
var option = {
tooltip: {
trigger: 'item'
},
visualMap: {
show: true,
min: 0,
max: max,
left: 'left',
top: 'bottom',
text: ['高','低'], // 文字，預設為數值文字
calculable: true,
seriesIndex:0, //多個series組成元素，此顏色配置範圍只用於series[0]
inRange: {
color: ['lightskyblue', 'yellow', 'orange']
}
},
geo: {
map: 'world',
show: true,
zoom: 1.2,
label:{
normal: {
show:false
},
emphasis: {
show:true
}
},
roam: true,
selectedMode : 'single'
},
series: [{
name: '數量',
type: 'map',
map: 'world',
roam: true,
zoom: 1.2,
label:{
normal: {
show:false,
},
emphasis : {
show : true,
formatter: function (params) {
return nameMap[params.name]; //此處代替nameMap
}
}
},
// nameMap : nameMap, //使用nameMap時，label顯示的會不準確，不在地圖中間
data: mapData,
geoIndex:0,
}]
};
var worldMapChart = echarts.init(document.getElementById('world-map'));
worldMapChart.setOption(option);
worldMapChart.on("click", function(param) {
var country_zh = param.name;
if (country_zh != undefined && country_zh!=null) {
country_zh = nameMap[country_zh]; //獲取中文名稱
common.doSearch("country", country_zh);
}
});
$('#world-map-box').resize(function() {
worldMapChart.resize();
});
}2.2 載入資料，使地圖顏色漸變，並標註各個國家的省會地理位置
function loadData(){
var data = [{
"name" : "中國",
"value" : 20677
}, {
"name" : "美國",
"value" : 3337
}, {
"name" : "日本",
"value" : 484
}, {
"name" : "韓國",
"value" : 347
}, {
"name" : "印度",
"value" : 154
}, {
"name" : "澳大利亞",
"value" : 124
}, {
"name" : "德國",
"value" : 102
}, {
"name" : "新加坡",
"value" : 101
}, {
"name" : "泰國",
"value" : 91
}, {
"name" : "加拿大",
"value" : 81
}, {
"name" : "法國",
"value" : 58
}, {
"name" : "英國",
"value" : 56
}, {
"name" : "越南",
"value" : 56
}, {
"name" : "荷蘭",
"value" : 43
}, {
"name" : "印度尼西亞",
"value" : 40
}, {
"name" : "馬來西亞",
"value" : 39
}, {
"name" : "俄羅斯",
"value" : 38
}, {
"name" : "墨西哥",
"value" : 38
}, {
"name" : "義大利",
"value" : 34
}, {
"name" : "菲律賓",
"value" : 33
}, {
"name" : "波蘭",
"value"