本文主要介绍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],
"亚美尼亚" : [44.31, 40.10],
"阿鲁巴" : [-70.02, 12.32],
"澳大利亚" : [149.08, -35.15],
"奥地利" : [16.22, 48.12],
"阿塞拜疆" : [49.56, 40.29],
"巴哈马" : [-77.20, 25.05],
"巴林" : [50.30, 26.10],
"孟加拉国" : [90.26, 23.43],
"巴巴多斯" : [-59.30, 13.05],
"白俄罗斯" : [27.30, 53.52],
"比利时" : [4.21, 50.51],
"伯利兹" : [-88.30, 17.18],
"贝宁" : [2.42, 6.23],
"不丹" : [89.45, 27.31],
"玻利维亚" : [-68.10, -16.20],
"波斯尼亚和黑塞哥维那" : [18.26, 43.52],
"博茨瓦纳" : [25.57, -24.45],
"巴西" : [-47.55, -15.47],
"英属维尔京群岛" : [-64.37, 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],
"加拿大" : [-75.42, 45.27],
"佛得角" : [-23.34, 15.02],
"开曼群岛" : [-81.24, 19.20],
"中非共和国" : [18.35, 4.23],
"乍得" : [14.59, 12.10],
"智利" : [-70.40, -33.24],
"中国" : [116.20, 39.55],
"哥伦比亚" : [-74.00, 4.34],
"科摩罗" : [43.16, -11.40],
"刚果" : [15.12, -4.09],
"哥斯达黎加" : [-84.02, 9.55],
"科特迪瓦" : [-5.17, 6.49],
"克罗地亚" : [15.58, 45.50],
"古巴" : [-82.22, 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],
"多米尼加" : [-61.24, 15.20],
"多米尼加共和国" : [-69.59, 18.30],
"东帝汶" : [125.34, -8.29],
"厄瓜多尔" : [-78.35, -0.15],
"埃及" : [31.14, 30.01],
"萨尔瓦多" : [-89.10, 13.40],
"赤道几内亚" : [8.50, 3.45],
"厄立特里亚" : [38.55, 15.19],
"爱沙尼亚" : [24.48, 59.22],
"埃塞俄比亚" : [38.42, 9.02],
"福克兰群岛(马尔维纳斯群岛)" : [-59.51, -51.40],
"法罗群岛" : [-6.56, 62.05],
"斐济" : [178.30, -18.06],
"芬兰" : [25.03, 60.15],
"法国" : [2.20, 48.50],
"法属圭亚那" : [-52.18, 5.05],
"法属波利尼西亚" : [-149.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],
"格陵兰" : [-51.35, 64.10],
"瓜德罗普岛" : [-61.44, 16.00],
"危地马拉" : [-90.22, 14.40],
"根西岛" : [-2.33, 49.26],
"几内亚" : [-13.49, 9.29],
"几内亚比绍" : [-15.45, 11.45],
"圭亚那" : [-58.12, 6.50],
"海地" : [-72.20, 18.40],
"赫德岛和麦当劳群岛" : [74.00, -53.00],
"洪都拉斯" : [-87.14, 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],
"牙买加" : [-76.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],
"马提尼克岛" : [-61.02, 14.36],
"毛里塔尼亚" : [57.30, -20.10],
"马约特岛" : [45.14, -12.48],
"墨西哥" : [-99.10, 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],
"荷属安的列斯" : [-69.00, 12.05],
"新喀里多尼亚" : [166.30, -22.17],
"新西兰" : [174.46, -41.19],
"尼加拉瓜" : [-86.20, 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],
"巴拿马" : [-79.25, 9.00],
"巴布亚新几内亚" : [147.08, -9.24],
"巴拉圭" : [-57.30, -25.10],
"秘鲁" : [-77.00, -12.00],
"菲律宾" : [121.03, 14.40],
"波兰" : [21.00, 52.13],
"葡萄牙" : [-9.10, 38.42],
"波多黎各" : [-66.07, 18.28],
"卡塔尔" : [51.35, 25.15],
"韩国" : [126.58, 37.31],
"罗马尼亚" : [26.10, 44.27],
"俄罗斯" : [37.35, 55.45],
"卢旺达" : [30.04, -1.59],
"圣基茨和尼维斯" : [-62.43, 17.17],
"圣卢西亚" : [-60.58, 14.02],
"圣皮埃尔和密克隆" : [-56.12, 46.46],
"圣文森特和格林纳丁斯" : [-61.10, 13.10],
"萨摩亚" : [-171.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],
"苏里南" : [-55.10, 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],
"汤加" : [-174.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],
"美国" : [-77.02, 39.91],
"美属维尔京群岛" : [-64.56, 18.21],
"乌拉圭" : [-56.11, -34.50],
"乌兹别克斯坦" : [69.10, 41.20],
"瓦努阿图" : [168.18, -17.45],
"委内瑞拉" : [-66.55, 10.30],
"越南" : [105.55, 21.05],
"南斯拉夫" : [20.37, 44.50],
"赞比亚" : [28.16, -15.28],
"津巴布韦" : [31.02, -17.43],
"日本":[139.69, 35.70]
},
"UTF8Encoding" : true
}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" : 22
}, {
"name" : "孟加拉国",
"value" : 19
}, {
"name" : "巴西",
"value" : 16
}, {
"name" : "土耳其",
"value" : 30
}, {
"name" : "瑞典",
"value" : 28
}, {
"name" : "欧洲",
"value" : 27
}, {
"name" : "西班牙",
"value" : 26
}, {
"name" : "罗马尼亚",
"value" : 24
}, {
"name" : "柬埔寨",
"value" : 22
}, {
"name" : "文莱",
"value" : 21
}, {
"name" : "阿根廷",
"value" : 21
}, {
"name" : "乌克兰",
"value" : 18
}, {
"name" : "蒙古",
"value" : 16
}, {
"name" : "哥伦比亚",
"value" : 15
}, {
"name" : "南非",
"value" : 12
}, {
"name" : "伊朗",
"value" : 8
}, {
"name" : "匈牙利",
"value" : 7
}, {
"name" : "丹麦",
"value" : 6
}, {
"name" : "哈萨克斯坦",
"value" : 6
}, {
"name" : "阿富汗",
"value" : 6
}, {
"name" : "塞尔维亚",
"value" : 4
}, {
"name" : "关岛",
"value" : 3
}, {
"name" : "巴拿马",
"value" : 3
}, {
"name" : "智利",
"value" : 3
}, {
"name" : "阿拉伯联合酋长国",
"value" : 3
}, {
"name" : "苏丹",
"value" : 1
}, {
"name" : "阿尔及利亚",
"value" : 1
}, {
"name" : "埃及",
"value" : 1
}, {
"name" : "尼日利亚",
"value" : 1
}, {
"name" : "利比亚",
"value" : 1
}, {
"name" : "马里",
"value" : 1
}, {
"name" : "沙特阿拉伯",
"value" : 1
}, {
"name" : "刚果民主共和国",
"value" : 1
}, {
"name" : "安哥拉",
"value" : 1
}, {
"name" : "埃塞俄比亚",
"value" : 1
}, {
"name" : "坦桑尼亚",
"value" : 1
}, {
"name" : "尼日尔",
"value" : 1
}, {
"name" : "乍得",
"value" : 1
}, {
"name" : "毛里塔尼亚",
"value" : 1
}
];
var max = data[0].value; //返回数据按倒序排列，故data[0].value，即为最大值
// 加载地图
load_world_map(max, data);
// 读取世界地图，标出地理位置， 需要world的坐标
var myChart = echarts.getInstanceByDom(document.getElementById("world-map"));
var series = myChart.getOption().series;
var series_geo_data = [];
$.getJSON('/js/echarts/world.json', function (json) {
var worldGeoMap = json.coordinates;
//标注出有数据的国家的地理位置
$.each(data, function(i, obj){
var coordinate = worldGeoMap[obj.name];
if(coordinate){
var geo = {
name : obj.name,
value : coordinate.concat(1) //value[0],value[1]为地理位置，value[2]的值控制geo点的大小
};
series_geo_data.push(geo);
}
});
if(series_geo_data.length>0){
series.push({
name: '世界地图',
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
scale : 5,
brushType: 'stroke' //stroke, geo点的样式
},
symbol:"circle",
//symbolOffset :[0, 0], //geo圆点距离地理位置的便宜量，x:左右偏移，y:上下偏移
symbolSize: 10,
itemStyle : {
normal: {
show: true,
color: "#DC143C" //geo原点的颜色
},
emphasis: {
show:true,
color: "#FF8C00" //geo原点的颜色
}
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
textStyle:{
color: "#000000" //设置geo label的颜色
}
},
emphasis: {
show: true
}
},
tooltip : {
formatter : "{b}<br/>{c}"
},
data: series_geo_data
});
/*
* 更新echart地图，echart3官网，建议更新时用setOption，对应修改其中属性即可,
* 本人在使用的过程中，遇到不能修改的问题，最后总结出如下规律
* 当新的series[i]数据与原series[i],对应的name相同，其他属性发生改变时，用“方法一”可以更新成功；
* 当新的series[i]数据与原series[i],对应的name不相同时，即可新series与原series数据内容相同，顺序发生改变时， 用“方法一”更新无效， 需要使用“方法二”更新；
*/
//更新方法一
myChart.setOption({
series : series
});
// //更新方法二，唯一缺点，会刷新地图（虽然官网不建议这种更新方式，但是特殊情况下，必须这么使用）
// var option = myChart.getOption();
// option.series = series;
// myChart.clear();
// myChart.setOption(option);
}
});
}
定义以上两个js方法，初始化加载一下loadData方法就可以实现图一的效果了
$(function(){
loadData();
});
3、总结
通过完成以上的实例，本人总结了一下，以下几个属性的用法
1. seriesIndex
当series.length>1时，如果设置visualMap属性，不设置visualMap.seriesIndex，所有的图形的颜色都会跟着visualMap的设置而变化，我这里设置 seriesIndex:0，只是希望地图的颜色渐变，geo点的颜色不会渐变；
visualMap: {
show: true,
min: 0,
max: max,
left: 'left',
top: 'bottom',
text: ['高','低'], // 文本，默认为数值文本
calculable: true,
seriesIndex:0, //多个series组成元素，此颜色配置范围只用于series[0]
inRange: {
color: ['lightskyblue', 'yellow', 'orange']
}
}2. geoIndex
此属性，在option中使用了geo属性才有用，在map上设置geoIndex，那么geo将直接使用map最为底图
首先option中使用geo属性
geo: {
map: 'world',
show: true,
zoom: 1.2,
label:{
normal: {
show:false
},
emphasis: {
show:true
}
},
roam: true,
selectedMode : 'single'
}
默认情况下，map series 会自己生成内部专用的 geo 组件。这里我们用 geoIndex 属性给map 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。当放大或者缩小地图时，就不会出现两个不重合的世界地图了
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, //可以去官网查series-map 中 geoIndex的具体用法
}]
当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。
3. nameMap
地图上默认的国家名称是英文的，这里我们可以加入nameMap作为映射，让显示出来的国家名是中文，本文中，我并没有使用nameMap这个属性，因为使用nameMap属性后，国家名称并未显示在地图的中间，而是利用nameMap做了个映射，用format属性来实现
这里在外层定了nameMap对象
var nameMap = {
'Afghanistan':'阿富汗',
'Angola':'安哥拉',
'Albania':'阿尔巴尼亚',
'United Arab Emirates':'阿拉伯联合酋长国',
'Argentina':'阿根廷',
'Armenia':'亚美尼亚',
......
}
这里通过设置label.emphasis.formatter属性，来实现中文显示
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, //可以去官网查series-map 中 geoIndex的具体用法
}]4. echarts的动态更新
这里我想不刷新页面，可以在已有地图上画其他的组件
/*
* 更新echart地图，echart3官网，建议更新时用setOption，对应修改其中属性即可,
* 本人在使用的过程中，遇到不能修改的问题，最后总结出如下规律
* 当新的series[i]数据与原series[i],对应的name相同，其他属性发生改变时，用“方法一”可以更新成功；
* 当新的series[i]数据与原series[i],对应的name不相同时，即新的series与原series数据内容相同，顺序发生改变时， 用“方法一”更新无效， 需要使用“方法二”更新；
*/
//更新方法一
myChart.setOption({
series : series
});
//更新方法二，唯一缺点，会刷新地图（虽然官网不建议这种更新方式，但是特殊情况下，必须这么使用）
var option = myChart.getOption();
option.series = series;
myChart.clear();
myChart.setOption(option);其实在我的实际业务需求中，所要达到的效果比这个复杂，但是实现效果跟这个差不多，现分享给大家，希望有所帮助，也可以相互探讨；
本文实例下载地址：http://download.csdn.net/detail/xiangcaoyihan/9920249