effectScatter时，无法更改itemStyle 颜色echarts 地图配置项内容和展示
按照api文档没法更改散点颜色，颜色貌似自适应了
配置项如下
function convertData(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
symbol:data[i].symbol,
value: geoCoord.concat(data[i].value),
percentum:data[i].percentum
});
}
}
return res;
};
// 一带一路国家
var oborArr = ["哈萨克斯坦","伊拉克","俄罗斯","印尼","土库曼斯坦","伊朗","埃及","叙利亚","老挝","缅甸","蒙古","吉尔吉斯斯坦",
"塔吉克斯坦","也门","阿曼","沙特阿拉伯","新加坡","阿富汗","阿联酋","泰国","阿塞拜疆","巴基斯坦","菲律宾","越南",
"马来西亚","柬埔寨","阿尔巴尼亚","格鲁吉亚","印度","乌兹别克斯坦","中国"];
// 中英名称映射
var nameMap = {
Afghanistan: "阿富汗",
Albania: "阿尔巴尼亚",
Algeria: "阿尔及利亚",
Andorra: "安道尔",
Angola: "安哥拉",
Antarctica: "南极洲",
"Antigua and Barbuda": "安提瓜和巴布达",
Argentina: "阿根廷",
Armenia: "亚美尼亚",
Australia: "澳大利亚",
Austria: "奥地利",
Azerbaijan: "阿塞拜疆",
"The Bahamas": "巴哈马",
Bahrain: "巴林",
Bangladesh: "孟加拉国",
Barbados: "巴巴多斯",
Belarus: "白俄罗斯",
Belgium: "比利时",
Belize: "伯利兹",
Benin: "贝宁",
Bermuda: "百慕大",
Bhutan: "不丹",
Bolivia: "玻利维亚",
"Bosnia and Herz.": "波黑",
Botswana: "博茨瓦纳",
Brazil: "巴西",
Brunei: "文莱",
Bulgaria: "保加利亚",
"Burkina Faso": "布基纳法索",
Burundi: "布隆迪",
Bahamas: "巴哈马国",
Cambodia: "柬埔寨",
Cameroon: "喀麦隆",
Canada: "加拿大",
"Cape Verde": "佛得角",
"Central African Rep.": "中非共和国",
Chad: "乍得",
Chile: "智利",
China: "中国",
Colombia: "哥伦比亚",
Comoros: "科摩罗",
Congo: "刚果共和国",
"Costa Rica": "哥斯达黎加",
Croatia: "克罗地亚",
Cuba: "古巴",
Cyprus: "塞浦路斯",
"Czech Rep.": "捷克共和国",
"Côte d'Ivoire": "科特迪瓦",
Denmark: "丹麦",
Djibouti: "吉布提",
"Dominican Rep.": "多米尼加",
"Dominican Republic": "多明尼加共和国",
Ecuador: "厄瓜多尔",
Egypt: "埃及",
"El Salvador": "萨尔瓦多",
"Eq. Guinea": "赤道几内亚",
Eritrea: "厄立特里亚",
Estonia: "爱沙尼亚",
Ethiopia: "埃塞俄比亚",
"Falkland Islands": "福克兰群岛",
"Faroe Islands": "法罗群岛",
Fiji: "斐济",
Finland: "芬兰",
France: "法国",
"French Guiana": "法属圭亚那",
"French Southern and Antarctic Lands": "法属南半球和南极领地",
Gabon: "加蓬",
Gambia: "冈比亚",
"Gaza Strip": "加沙",
Georgia: "格鲁吉亚",
Germany: "德国",
Ghana: "加纳",
Greece: "希腊",
Greenland: "格陵兰",
Grenada: "格林纳达",
Guadeloupe: "瓜德罗普",
Guatemala: "危地马拉",
Guinea: "几内亚",
"Guinea-Bissau": "几内亚比绍",
Guyana: "圭亚那",
Haiti: "海地",
Honduras: "洪都拉斯",
"Hong Kong": "香港",
Hungary: "匈牙利",
Iceland: "冰岛",
India: "印度",
Indonesia: "印尼",
Iran: "伊朗",
Iraq: "伊拉克",
"Iraq-Saudi Arabia Neutral Zone": "伊拉克阿拉伯中立区",
Ireland: "爱尔兰",
"Isle of Man": "马恩岛",
Israel: "以色列",
Italy: "意大利",
"Ivory Coast": "科特迪瓦",
Jamaica: "牙买加",
"Jan Mayen": "扬马延岛",
Japan: "日本",
Jordan: "约旦",
Kazakhstan: "哈萨克斯坦",
Kenya: "肯尼亚",
Kerguelen: "凯尔盖朗群岛",
Kiribati: "基里巴斯",
"Dem. Rep. Korea": "朝鲜",
"Korea": "韩国",
Kuwait: "科威特",
Kyrgyzstan: "吉尔吉斯斯坦",
"Lao PDR": "老挝",
Latvia: "拉脱维亚",
Lebanon: "黎巴嫩",
Lesotho: "莱索托",
Liberia: "利比里亚",
Libya: "利比亚",
Liechtenstein: "列支敦士登",
Lithuania: "立陶宛",
Luxembourg: "卢森堡",
Macau: "澳门",
Macedonia: "马其顿",
Madagascar: "马达加斯加",
Malawi: "马拉维",
Malaysia: "马来西亚",
Maldives: "马尔代夫",
Mali: "马里",
Malta: "马耳他",
Martinique: "马提尼克",
Mauritania: "毛里塔尼亚",
Mauritius: "毛里求斯",
Mexico: "墨西哥",
Moldova: "摩尔多瓦",
Monaco: "摩纳哥",
Mongolia: "蒙古",
Morocco: "摩洛哥",
Mozambique: "莫桑比克",
Myanmar: "缅甸",
Namibia: "纳米比亚",
Nepal: "尼泊尔",
Netherlands: "荷兰",
"New Caledonia": "新喀里多尼亚",
"New Zealand": "新西兰",
Nicaragua: "尼加拉瓜",
Niger: "尼日尔",
Nigeria: "尼日利亚",
"Northern Mariana Islands": "北马里亚纳群岛",
Norway: "挪威",
Oman: "阿曼",
Pakistan: "巴基斯坦",
Panama: "巴拿马",
"Papua New Guinea": "巴布亚新几内亚",
Paraguay: "巴拉圭",
Peru: "秘鲁",
Philippines: "菲律宾",
Poland: "波兰",
Portugal: "葡萄牙",
"Puerto Rico": "波多黎各",
Qatar: "卡塔尔",
Reunion: "留尼旺岛",
Romania: "罗马尼亚",
Russia: "俄罗斯",
Rwanda: "卢旺达",
"San Marino": "圣马力诺",
"Sao Tome and Principe": "圣多美和普林西比",
"Saudi Arabia": "沙特阿拉伯",
Senegal: "塞内加尔",
Seychelles: "塞舌尔",
"Sierra Leone": "塞拉利昂",
Singapore: "新加坡",
Slovakia: "斯洛伐克",
Slovenia: "斯洛文尼亚",
"Solomon Is.": "所罗门群岛",
Somalia: "索马里",
"South Africa": "南非",
Spain: "西班牙",
"Sri Lanka": "斯里兰卡",
"St. Christopher-Nevis": "圣",
"St. Lucia": "圣露西亚",
"St. Vincent and the Grenadines": "圣文森特和格林纳丁斯",
'Sudan': "苏丹",
Suriname: "苏里南",
Svalbard: "斯瓦尔巴特群岛",
Swaziland: "斯威士兰",
Sweden: "瑞典",
Switzerland: "瑞士",
Syria: "叙利亚",
Taiwan: "台湾",
Tajikistan: "塔吉克斯坦",
Tanzania: "坦桑尼亚",
Thailand: "泰国",
Togo: "多哥",
Tonga: "汤加",
"Trinidad and Tobago": "特里尼达和多巴哥",
Tunisia: "突尼斯",
Turkey: "土耳其",
Turkmenistan: "土库曼斯坦",
"Turks and Caicos Islands": "特克斯和凯科斯群岛",
"Timor-Leste": "东帝汶",
Uganda: "乌干达",
Ukraine: "乌克兰",
"United Arab Emirates": "阿联酋",
"United Kingdom": "英国",
"United States": "美国",
Uruguay: "乌拉圭",
Uzbekistan: "乌兹别克斯坦",
Vanuatu: "瓦努阿图",
Venezuela: "委内瑞拉",
Vietnam: "越南",
"W. Sahara": "西撒哈拉",
"Western Samoa": "西萨摩亚",
Yemen: "也门",
Yugoslavia: "南斯拉夫",
"Dem. Rep. Congo": "刚果民主共和国",
Zambia: "赞比亚",
Zimbabwe: "津巴布韦",
"S. Sudan": "南苏丹",
Somaliland: "索马里兰",
Montenegro: "黑山",
Kosovo: "科索沃",
Serbia: "塞尔维亚"
};
// 国家颜色映射
var colorMapData = [
{ 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 },
{ name: "土库曼斯坦", value: 1 },
{ name: "哈萨克斯坦", value: 1 },
{ name: "老挝", value: 1 },
{ name: "阿富汗", value: 1 },
{ name: "菲律宾", value: 1 },
{ name: "新加坡", value: 5 },
{ name: "印尼", value: 2 },
{ name: "韩国", value: 1 },
{ 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: 5 },
{ name: "沙特阿拉伯", value: 1 },
{ name: "亚美尼亚", value: 3 },
{ name: "科威特", value: 1 },
{ name: "塞浦路斯", value: 3 },
{ name: "阿曼", value: 1 },
{ name: "格鲁吉亚", value: 3 },
{ name: "阿塞拜疆", value: 1 },
{ name: "文莱", value: 5 },
{ name: "不丹", value: 1 },
{ name: "约旦", value: 1 },
{ name: "也门", value: 1 },
{ name: "东帝汶", value: 1 },
{ name: "卢旺达", value: 25 }, //非洲
{ name: "布隆迪", value: 25 },
{ name: "乌干达", value: 25 },
{ name: "埃塞俄比亚", value: 25 },
{ name: "马达加斯加", value: 25 },
{ name: "海地", value: 25 },
{ name: "肯尼亚", value: 25 },
{ name: "索马里", value: 25 },
{ name: "厄立特里亚", value: 25 },
{ name: "布基纳法索", value: 25 },
{ name: "马拉维", value: 25 },
{ name: "埃及", value: 25 },
{ name: "塞拉利昂", value: 25 },
{ name: "坦桑尼亚", value: 25 },
{ name: "尼日利亚", value: 25 },
{ name: "尼日尔", value: 25 },
{ name: "毛里塔尼亚", value: 25 },
{ name: "喀麦隆", value: 25 },
{ name: "贝宁", value: 25 },
{ name: "摩洛哥", value: 25 },
{ name: "马里", value: 25 },
{ name: "刚果民主共和国", value: 25 },
{ name: "几内亚", value: 25 },
{ name: "利比里亚", value: 25 },
{ name: "多哥", value: 25 },
{ name: "毛里求斯", value: 25 },
{ name: "莫桑比克", value: 25 },
{ name: "阿尔及利亚", value: 25 },
{ name: "斯威士兰", value: 25 },
{ name: "乍得", value: 25 },
{ name: "塞内加尔", value: 25 },
{ name: "津巴布韦", value: 25 },
{ name: "科特迪瓦", value: 25 },
{ name: "赞比亚", value: 25 },
{ name: "突尼斯", value: 25 },
{ name: "加纳", value: 25 },
{ name: "中非共和国", value: 25 },
{ name: "安哥拉", value: 25 },
{ name: "冈比亚", value: 25 },
{ name: "刚果共和国", value: 25 },
{ name: "苏丹", value: 25 },
{ name: "加蓬", value: 25 },
{ name: "利比亚", value: 25 },
{ name: "南非", value: 25 },
{ name: "纳米比亚", value: 25 },
{ name: "博茨瓦纳", value: 25 },
{ name: "南苏丹", value: 25 },
{ name: "索马里兰", value: 25 },
{ name: "赤道几内亚", value: 25 },
{ name: "几内亚比绍", value: 25 },
{ name: "西撒哈拉", value: 25 },
{ name: "莱索托", value: 25 },
{ name: "吉布提", value: 25 },
{ name: "俄罗斯", value: 15 }, //欧洲
{ name: "波兰", value: 15 },
{ name: "希腊", value: 15 },
{ name: "马其顿", value: 15 },
{ name: "阿尔巴尼亚", value: 15 },
{ name: "西班牙", value: 15 },
{ name: "克罗地亚", value: 15 },
{ name: "瑞士", value: 15 },
{ name: "英国", value: 15 },
{ name: "爱尔兰", value: 15 },
{ name: "意大利", value: 15 },
{ name: "荷兰", value: 15 },
{ name: "黑山", value: 15 },
{ name: "斯洛文尼亚", value: 15 },
{ name: "德国", value: 15 },
{ name: "卢森堡", value: 15 },
{ name: "葡萄牙", value: 15 },
{ name: "塞尔维亚", value: 15 },
{ name: "法国", value: 15 },
{ name: "奥地利", value: 15 },
{ name: "捷克共和国", value: 15 },
{ name: "斯洛伐克", value: 15 },
{ name: "拉脱维亚", value: 15 },
{ name: "挪威", value: 15 },
{ name: "比利时", value: 15 },
{ name: "丹麦", value: 15 },
{ name: "匈牙利", value: 15 },
{ name: "瑞典", value: 15 },
{ name: "罗马尼亚", value: 15 },
{ name: "保加利亚", value: 15 },
{ name: "立陶宛", value: 15 },
{ name: "爱沙尼亚", value: 15 },
{ name: "白俄罗斯", value: 15 },
{ name: "摩尔多瓦", value: 15 },
{ name: "芬兰", value: 15 },
{ name: "乌克兰", value: 15 },
{ name: "科索沃", value: 15 },
{ name: "波黑", value: 15 },
{ name: "哥斯达黎加", value: 32 }, //北美洲
{ name: "萨尔瓦多", value: 32 },
{ name: "多米尼加", value: 32 },
{ name: "危地马拉", value: 32 },
{ name: "洪都拉斯", value: 32 },
{ name: "巴拿马", value: 32 },
{ name: "古巴", value: 32 },
{ name: "牙买加", value: 32 },
{ name: "墨西哥", value:32 },
{ name: "波多黎各", value: 32 },
{ name: "特立尼达和多巴哥", value: 32 },
{ name: "伯利兹", value: 32 },
{ name: "加拿大", value:32 },
{ name: "美国", value: 32 },
{ name: "巴哈马", value: 32 },
{ name: "格陵兰", value: 32 },
{ name: "哥伦比亚", value: 32 }, //南美洲
{ name: "尼加拉瓜", value: 32 },
{ name: "厄瓜多尔", value: 32 },
{ name: "秘鲁", value: 32 },
{ name: "委内瑞拉", value: 32 },
{ name: "玻利维亚", value: 32 },
{ name: "巴西", value: 32 },
{ name: "智利", value: 32 },
{ name: "苏里南", value: 32 },
{ name: "乌拉圭", value: 32 },
{ name: "巴拉圭", value: 32 },
{ name: "圭亚那", value: 32 },
{ name: "阿根廷", value: 32 },
{ name: "澳大利亚", value: 7 }, //大洋洲
{ name: "巴布亚新几内亚", value: 7 },
{ name: "斐济", value: 7 },
{ name: "新喀里多尼亚", value: 7 },
{ name: "新西兰", value: 7 },
{ name: "北马里亚纳", value: 7 }
];
// 某类资源Top5国家经纬度
var geoCoordMap = {
"俄罗斯": [59.96721495767213, 60.98510469491138],
"刚果": [15.254963449121078, -4.465206556066021],
"巴西": [-43.83932104232787, -14.267918333305161],
"南非": [20.608404437499985, -32.28440433356615],
"澳大利亚": [146.5722984027327, -23.132110184751177]
};
// 某类资源Top5国家 数据
var geoCoordData = [
{name:"俄罗斯",symbol:"image://img/icons/icon-top5.png",value: 10,percentum:"20%"},
{name:"刚果",symbol:"image://img/icons/icon-top5.png",value: 9,percentum:"14%"},
{name:"巴西",symbol:"image://img/icons/icon-top5.png",value: 9,percentum:"10%"},
{name:"南非",symbol:"image://img/icons/icon-top5.png",value: 9,percentum:"11%"},
{name:"澳大利亚",symbol:"image://img/icons/icon-top5.png",value: 12,percentum:"21%"}
];
// 一带一路国家路线
var oborData = {
"regions": [{
"name": "西安",
"value": [108.94819,34.351799],
"symbolSize": 2,
"itemStyle": {
"normal": {
"color": "#000"
}
}
},{
"name": "兰州",
"value": [103.838799,36.066535]
},{
"name": "乌鲁木齐",
"value": [87.60834,43.831804]
},
{
"name": "阿拉木图",
"value": [77.002105,43.276609]
},
{
"name": "北海",
"value": [109.119632,21.491948]
},{
"name": "海口",
"value": [110.197895,20.052472]
},{
"name": "吉隆坡",
"value": [101.707542,3.20636]
}
],
"moveLines": [{
"fromName": "西安",
"toName": "兰州",
"coords": [
[108.94819,34.351799],
[103.838799,36.066535]
]
},
{
"fromName": "兰州",
"toName": "乌鲁木齐",
"coords": [
[103.838799,36.066535],
[87.60834,43.831804]
]
},
{
"fromName": "乌鲁木齐",
"toName": "阿拉木图",
"coords": [
[87.60834,43.831804],
[77.002105,43.276609]
]
},
{
"fromName": "北海",
"toName": "海口",
"coords": [
[109.119632,21.491948],
[110.197895,20.052472]
]
},
{
"fromName": "海口",
"toName": "吉隆坡",
"coords": [
[110.197895,20.052472],
[101.707542,3.20636]
]
}
]
};
var latlong = {},latlong1 = {};
latlong.AF = { latitude: 33, longitude: 65 };
latlong.AL = { latitude: 41, longitude: 20 };
latlong.DZ = { latitude: 28, longitude: 3 };
latlong.CN = { latitude: 35, longitude: 105 };
latlong1.AF = { latitude: 32, longitude: 65 };
latlong1.AL = { latitude: 43, longitude: 21 };
latlong1.DZ = { latitude: 34, longitude: 4 };
latlong1.CN = { latitude: 35, longitude: 98 };
var mapData = [
{
code: "AF",
name: "Afghanistan",
value: 32358260,
color: "#eea638",
number: 1
},
{
code: "AL",
name: "Albania",
value: 3215988,
color: "#d8854f",
number: 2
},
{
code: "DZ",
name: "Algeria",
value: 35980193,
color: "#de4c4f",
number: 3
},
{
code: "CN",
name: "China",
value: 1347565324,
color: "#eea638",
number: 4
}
];
option = {
visualMap: {
type: 'piecewise',
min: 1,
max: 5,
pieces: [
{gt: 40}, // (41, Infinity] 一带一路
{gt: 30, lte: 40}, // (31, 40] 北、南美
{gt: 20, lte: 30}, // (21, 30] 非洲
{gt: 10, lte: 20}, // (11, 20] 欧洲
{gt: 5, lte: 10}, // (6, 10] 大洋洲
{lt: 5} // (-Infinity, 5) 亚洲
],
text: ['High', 'Low'],
inRange: {
color: ['#8ff202', '#e9e9eb', '#004fed', '#01e098', '#00deeb','#ffdc7b']
},
show: false
},
geo: {
show: true,
type: 'map',
map: 'world',
roam: true,
zoom: 1,
nameMap: nameMap,
scaleLimit: {
min: 1,
max: 3
},
selectedMode: 'single',
label: {
normal: {
show: false,
color: '#fff'
},
emphasis: {
show: true,
color: '#ff5400',
fontSize: 22,
fontWeight: 'bold'
}
},
itemStyle: {
normal: {
areaColor: '#02dce3',
borderColor: '#017688'
},
emphasis: {
areaColor: '#ffdc7b'
}
}
},
series: [{
name: 'mapBg',
type: 'map',
map: 'world',
geoIndex: 0,
roam: true,
selectedMode: 'single',
nameMap: nameMap,
data: colorMapData
},{
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'image://img/legend_3px/alumina.png',
symbolSize:20,
data: mapData.map(function(itemOpt) {
return {
name: itemOpt.name,
value: [
latlong[itemOpt.code].longitude,
latlong[itemOpt.code].latitude,
itemOpt.value
],
label: {
emphasis: {
position: 'right',
show: false
}
},
itemStyle: {
opacity:1
}
};
})
},{
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'image://img/legend_3px/uranium.png',
symbolSize:20,
data: mapData.map(function(itemOpt) {
return {
name: itemOpt.name,
value: [
latlong1[itemOpt.code].longitude,
latlong1[itemOpt.code].latitude,
itemOpt.value
],
label: {
emphasis: {
position: 'right',
show: false,
}
},
itemStyle: {
opacity:1
}
};
})
},{
name: '排名Top5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(geoCoordData),
symbolSize: function (val) {
return val[2] * 4; //根据 value 动态大小，也可以直接返回固定值 35
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
show: true,
formatter:function(param){
return param.data.percentum;
},
fontSize:12,
color:'#fff',
fontStyle:'normal',
fontFamily:'Arial'
},
itemStyle: {
opacity:1
}
},{
name: '一带一路点',
type: 'effectScatter',
coordinateSystem: 'geo',
symbol: 'circle',
zlevel: 3,
rippleEffect: {
brushType: 'stroke',
period: 5,
scale: 10
},
label: {
show: true,
color: '#fff',
position: 'right',
formatter: '{b}'
},
symbolSize: 3,
itemStyle:{
normal: {
color: '#000'
}
},
data: oborData.regions
}, {
name: '一带一路线',
type: 'lines',
coordinateSystem: 'geo',
zlevel: 2,
large: true,
effect: {
show: true,
constantSpeed: 15,
symbol: 'arrow', //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize: 5,
trailLength: 0,
color: '#fd3a24',
delay: 200
},
lineStyle: {
normal: {
color: '#32abff',
width: 1.5,
opacity: 0.8,
curveness: 0.2
}
},
data: oborData.moveLines
}]
};
截图如下
