世界地图echarts 地图配置项内容和展示
配置项如下
function randomData() {
return Math.round(Math.random() * 10);
}
var worlddata = [{
name: 'Afghanistan',
value: 5
},
{
name: 'Angola',
value: 5
},
// {name: 'Albania', value: randomData()},
{
name: 'United States',
value: 200
},
{
name: 'United Arab Emirates',
value: randomData()
},
{
name: 'Argentina',
value: 5
},
{
name: 'Armenia',
value: randomData()
},
{
name: 'French Southern and Antarctic Lands',
value: 180
},
{
name: 'Australia',
value: 180
},
{
name: 'Austria',
value: randomData()
},
{
name: 'Azerbaijan',
value: randomData()
},
{
name: 'Burundi',
value: randomData()
},
{
name: 'Belgium',
value: randomData()
},
{
name: 'Benin',
value: randomData()
},
{
name: 'Burkina Faso',
value: randomData()
},
{
name: 'Bangladesh',
value: randomData()
},
{
name: 'Bulgaria',
value: randomData()
},
{
name: 'The Bahamas',
value: randomData()
},
{
name: 'Bosnia and Herzegovina',
value: randomData()
},
{
name: 'Belarus',
value: randomData()
},
{
name: 'Belize',
value: randomData()
},
{
name: 'Bermuda',
value: randomData()
},
// {name: 'Bolivia', value: randomData()},
{
name: 'Brazil',
value: 80
},
{
name: 'Brunei',
value: randomData()
},
{
name: 'Bhutan',
value: randomData()
},
{
name: 'Botswana',
value: randomData()
},
{
name: 'Central African Republic',
value: randomData()
},
{
name: 'Canada',
value: 180
},
{
name: 'Switzerland',
value: randomData()
},
{
name: 'Chile',
value: randomData()
},
{
name: 'China',
value: randomData()
},
{
name: 'Ivory Coast',
value: randomData()
},
{
name: 'Cameroon',
value: randomData()
},
{
name: 'Democratic Republic of the Congo',
value: randomData()
},
{
name: 'Republic of the Congo',
value: randomData()
},
{
name: 'Colombia',
value: randomData()
},
{
name: 'Costa Rica',
value: randomData()
},
{
name: 'Cuba',
value: randomData()
},
{
name: 'Northern Cyprus',
value: randomData()
},
{
name: 'Cyprus',
value: randomData()
},
{
name: 'Czech Republic',
value: randomData()
},
{
name: 'Germany',
value: 55
},
{
name: 'Djibouti',
value: randomData()
},
{
name: 'Denmark',
value: randomData()
},
{
name: 'Dominican Republic',
value: randomData()
},
{
name: 'Algeria',
value: randomData()
},
{
name: 'Ecuador',
value: randomData()
},
{
name: 'Egypt',
value: 55
},
{
name: 'Eritrea',
value: randomData()
},
{
name: 'Spain',
value: randomData()
},
{
name: 'Estonia',
value: randomData()
},
{
name: 'Ethiopia',
value: randomData()
},
{
name: 'Finland',
value: randomData()
},
{
name: 'Fiji',
value: randomData()
},
{
name: 'Falkland Islands',
value: randomData()
},
{
name: 'France',
value: 170
},
{
name: 'Gabon',
value: randomData()
},
{
name: 'United Kingdom',
value: 101
},
{
name: 'Georgia',
value: randomData()
},
{
name: 'Ghana',
value: randomData()
},
{
name: 'Guinea',
value: randomData()
},
{
name: 'Gambia',
value: randomData()
},
{
name: 'Guinea Bissau',
value: randomData()
},
{
name: 'Equatorial Guinea',
value: randomData()
},
{
name: 'Greece',
value: randomData()
},
{
name: 'Greenland',
value: randomData()
},
{
name: 'Guatemala',
value: randomData()
},
{
name: 'French Guiana',
value: randomData()
},
{
name: 'Guyana',
value: randomData()
},
{
name: 'Honduras',
value: randomData()
},
{
name: 'Croatia',
value: randomData()
},
{
name: 'Haiti',
value: randomData()
},
{
name: 'Hungary',
value: randomData()
},
{
name: 'Indonesia',
value: randomData()
},
{
name: 'India',
value: randomData()
},
{
name: 'Ireland',
value: randomData()
},
{
name: 'Iran',
value: randomData()
},
{
name: 'Iraq',
value: randomData()
},
{
name: 'Iceland',
value: randomData()
},
{
name: 'Israel',
value: randomData()
},
{
name: 'Italy',
value: 102
},
{
name: 'Jamaica',
value: randomData()
},
{
name: 'Jordan',
value: 50
},
{
name: 'Japan',
value: randomData()
},
{
name: 'Kazakhstan',
value: randomData()
},
{
name: 'Kenya',
value: randomData()
},
{
name: 'Kyrgyzstan',
value: randomData()
},
{
name: 'Cambodia',
value: randomData()
},
{
name: 'South Korea',
value: randomData()
},
{
name: 'Kosovo',
value: randomData()
},
{
name: 'Kuwait',
value: randomData()
},
{
name: 'Laos',
value: randomData()
},
{
name: 'Lebanon',
value: randomData()
},
{
name: 'Liberia',
value: randomData()
},
{
name: 'Libya',
value: randomData()
},
{
name: 'Sri Lanka',
value: randomData()
},
{
name: 'Lesotho',
value: randomData()
},
{
name: 'Lithuania',
value: randomData()
},
{
name: 'Luxembourg',
value: randomData()
},
{
name: 'Latvia',
value: randomData()
},
{
name: 'Morocco',
value: randomData()
},
{
name: 'Moldova',
value: randomData()
},
{
name: 'Madagascar',
value: randomData()
},
{
name: 'Mexico',
value: 120
},
{
name: 'Macedonia',
value: randomData()
},
{
name: 'Mali',
value: randomData()
},
{
name: 'Myanmar',
value: randomData()
},
{
name: 'Montenegro',
value: randomData()
},
{
name: 'Mongolia',
value: randomData()
},
{
name: 'Mozambique',
value: randomData()
},
{
name: 'Mauritania',
value: randomData()
},
{
name: 'Malawi',
value: randomData()
},
{
name: 'Malaysia',
value: randomData()
},
{
name: 'Namibia',
value: randomData()
},
{
name: 'New Caledonia',
value: randomData()
},
{
name: 'Niger',
value: randomData()
},
{
name: 'Nigeria',
value: 60
},
{
name: 'Nicaragua',
value: randomData()
},
{
name: 'Netherlands',
value: randomData()
},
{
name: 'Norway',
value: randomData()
},
{
name: 'Nepal',
value: randomData()
},
{
name: 'New Zealand',
value: randomData()
},
{
name: 'Oman',
value: randomData()
},
{
name: 'Pakistan',
value: randomData()
},
{
name: 'Panama',
value: randomData()
},
{
name: 'Peru',
value: randomData()
},
{
name: 'Philippines',
value: randomData()
},
{
name: 'Papua New Guinea',
value: randomData()
},
{
name: 'Poland',
value: randomData()
},
{
name: 'Puerto Rico',
value: randomData()
},
{
name: 'North Korea',
value: randomData()
},
{
name: 'Portugal',
value: randomData()
},
{
name: 'Paraguay',
value: randomData()
},
{
name: 'Qatar',
value: randomData()
},
{
name: 'Romania',
value: randomData()
},
{
name: 'Russia',
value: 55
},
{
name: 'Rwanda',
value: randomData()
},
{
name: 'Western Sahara',
value: randomData()
},
{
name: 'Saudi Arabia',
value: randomData()
},
{
name: 'Sudan',
value: randomData()
},
{
name: 'South Sudan',
value: randomData()
},
{
name: 'Senegal',
value: randomData()
},
{
name: 'Solomon Islands',
value: randomData()
},
{
name: 'Sierra Leone',
value: randomData()
},
{
name: 'El Salvador',
value: randomData()
},
{
name: 'Somaliland',
value: randomData()
},
{
name: 'Somalia',
value: randomData()
},
{
name: 'Republic of Serbia',
value: randomData()
},
{
name: 'Suriname',
value: randomData()
},
{
name: 'Slovakia',
value: randomData()
},
{
name: 'Slovenia',
value: randomData()
},
{
name: 'Sweden',
value: randomData()
},
{
name: 'Swaziland',
value: randomData()
},
{
name: 'Syria',
value: randomData()
},
{
name: 'Chad',
value: randomData()
},
{
name: 'Togo',
value: randomData()
},
{
name: 'Thailand',
value: randomData()
},
{
name: 'Tajikistan',
value: randomData()
},
{
name: 'Turkmenistan',
value: randomData()
},
{
name: 'East Timor',
value: randomData()
},
{
name: 'Trinidad and Tobago',
value: randomData()
},
{
name: 'Tunisia',
value: randomData()
},
{
name: 'Turkey',
value: randomData()
},
{
name: 'United Republic of Tanzania',
value: randomData()
},
{
name: 'Uganda',
value: randomData()
},
{
name: 'Ukraine',
value: randomData()
},
{
name: 'Uruguay',
value: randomData()
},
// {name: 'United States of America', value: randomData()},
{
name: 'Uzbekistan',
value: randomData()
},
{
name: 'Venezuela',
value: randomData()
},
{
name: 'Vietnam',
value: randomData()
},
{
name: 'Vanuatu',
value: randomData()
},
{
name: 'West Bank',
value: randomData()
},
{
name: 'Yemen',
value: randomData()
},
{
name: 'South Africa',
value: randomData()
},
{
name: 'Zambia',
value: randomData()
},
{
name: 'Zimbabwe',
value: randomData()
},
{
name: '浙江',
value: 260
},
{
name: '北京',
value: 180
},
{
name: '香港',
value: 10
}
];
var geoCoordMap = {
// 上海: [121.4648, 31.2891],
浙江: [119.8313, 29.8773],
杭州: [119.8313, 29.3773],
北京: [116.405285, 39.904989],
尼日利亚: [6.815625, 8.546875],
美国洛杉矶: [-118.24311, 34.052713],
香港邦泰: [114.195466, 22.282751],
美国芝加哥: [-87.801833, 41.870975],
加纳库马西: [-4.62829, 7.72415],
英国曼彻斯特: [-1.657222, 51.886863],
德国汉堡: [10.01959, 54.38474],
哈萨克斯坦阿拉木图: [45.326912, 41.101891],
俄罗斯伊尔库茨克: [89.116876, 67.757906],
巴西: [-48.678945, -10.493623],
埃及达米埃塔: [31.815593, 31.418032],
西班牙巴塞罗纳: [2.175129, 41.385064],
柬埔寨金边: [104.88659, 11.545469],
意大利米兰: [9.189948, 45.46623],
乌拉圭蒙得维的亚: [-56.162231, -34.901113],
莫桑比克马普托: [32.608571, -25.893473],
阿尔及利亚阿尔及尔: [3.054275, 36.753027],
阿联酋迪拜: [55.269441, 25.204514],
匈牙利布达佩斯: [17.108519, 48.179162],
澳大利亚悉尼: [150.993137, -33.675509],
美国加州: [-121.910642, 41.38028],
澳大利亚墨尔本: [144.999416, -37.781726],
墨西哥: [-99.094092, 19.365711],
加拿大温哥华: [-123.023921, 49.311753],
法国: [2.8719426, 46.8222422]
};
var BJData = [
[{
name: "尼日利亚",
value: 10
}, {
name: "杭州"
}],
[{
name: "美国洛杉矶",
value: 200
}, {
name: "杭州"
}],
/*
[{
name: "香港邦泰",
value: 90
}, {
name: "杭州"
}],*/
[{
name: "美国芝加哥",
value: 200
}, {
name: "杭州"
}],
[{
name: "北京",
value: 180
}, {
name: "杭州"
}],
[{
name: "英国曼彻斯特",
value: 160
}, {
name: "杭州"
}],
[{
name: "德国汉堡",
value: 100
}, {
name: "杭州"
}],
/*
[{
name: "哈萨克斯坦阿拉木图",
value: 100
}, {
name: "杭州"
}],*/
[{
name: "俄罗斯伊尔库茨克",
value: 55
}, {
name: "杭州"
}],
[{
name: "巴西",
value: 120
}, {
name: "杭州"
}],
[{
name: "埃及达米埃塔",
value: 130
}, {
name: "杭州"
}],
[{
name: "西班牙巴塞罗纳",
value: 90
}, {
name: "杭州"
}],
/*
[{
name: "柬埔寨金边",
value: 30
}, {
name: "杭州"
}],*/
[{
name: "意大利米兰",
value: 90
}, {
name: "杭州"
}],
[{
name: "澳大利亚悉尼",
value: 200
}, {
name: "杭州"
}],
[{
name: "美国加州",
value: 200
}, {
name: "杭州"
}],
[{
name: "澳大利亚墨尔本",
value: 100
}, {
name: "杭州"
}],
[{
name: "墨西哥",
value: 120
}, {
name: "杭州"
}],
[{
name: "加拿大温哥华",
value: 190
}, {
name: "杭州"
}],
[{
name: "法国",
value: 190
}, {
name: "杭州"
}]
];
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem[0].value
},
{
coord: toCoord
}
]);
}
}
return res;
};
var convertData2 = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[1].name];
var toCoord = geoCoordMap[dataItem[0].name];
if (fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem[0].value
},
{
coord: toCoord
}
]);
}
}
return res;
};
var series = [];
[
["杭州", BJData]
].forEach(function(item, i) {
series.push({
name: '',
type: 'map',
geoIndex: 0,
mapType: 'world',
// layoutCenter: ["50%", "50%"], //地图位置
// layoutSize: "160%",
roam: true,
itemStyle: {
emphasis: {
label: {
show: true
}
}
},
data: worlddata
}, {
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
//涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: "stroke", //波纹绘制方式 stroke, fill
scale: 6 //波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
color: "#fff",
position: "right", //显示位置
offset: [5, 0], //偏移设置
formatter: "{b}" //圆环显示文字
},
emphasis: {
show: true,
color: "#FF6A6A"
}
},
symbol: "circle",
symbolSize: function(val) {
return 6 + val[2] / 1000; //圆环大小
},
itemStyle: {
normal: {
show: true,
color: "#fff",
},
emphasis: {
show: true,
color: "#FF6A6A"
}
},
data: item[1].map(function(dataItem) {
return {
name: dataItem[0].name,
value: geoCoordMap[dataItem[0].name].concat([100]),
visualMap: false
};
})
},
//被攻击点
{
type: "scatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
period: 4,
brushType: "stroke",
scale: 4
},
label: {
normal: {
show: true,
position: "right",
color: "#00ffff",
formatter: "{b}",
textStyle: {
color: "red",
fontWeight: 'bold'
}
},
emphasis: {
show: true,
color: "#FF6A6A"
}
},
symbol: "pin",
symbolSize: 30,
itemStyle: {
normal: {
show: true,
color: "red",
fontWeight: 'bolder'
},
emphasis: {
show: true,
color: "#FF6A6A",
fontWeight: 'bolder'
}
},
data: [{
name: item[0],
value: geoCoordMap[item[0]].concat([100]),
visualMap: false
}]
}
);
});
option = {
// backgroundColor: '#000',
tooltip: {
trigger: "item",
// backgroundColor: "#1540a1",
borderColor: "#FFFFCC",
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: "z-index:100",
formatter: function(params, ticket, callback) {
//根据业务自己拓展要显示的内容
var res = "";
var name = params.name;
var value = params.value[params.seriesIndex + 1];
res =
"<span style='color:#fff;'>" +
name +
"</span><br/>数据：" +
value;
return res;
}
},
visualMap: {
//图例值控制
show: true,
type: 'piecewise',
min: 0,
max: 300,
splitNumber: 6,
color: ['#d94e5d', '#eac736', '#50a3ba'],
// color: ['rgba(23,216,161,0.5)', 'rgba(244,201,7,0.5)', 'rgba(129,59,219,0.5)', 'rgba(219,51,90,0.5)'],
// color: ['orangered','yellow','lightskyblue'],
calculable: true,
textStyle: {
color: '#fff',
fontWeight: 'bold'
},
// inRange: {
// color: ['#ffffff', '#E0DAFF', '#ADBFFF', '#9CB4FF', '#6A9DFF', '#3889FF']
// }
left: 160,
bottom: 150,
itemWidth: 30,
itemHeight: 20,
// text:['合作次数','']
},
geo: {
map: "world",
show: true,
label: {
emphasis: {
show: false
}
},
roam: true, //是否允许缩放
layoutCenter: ["48.3%", "50%"], //地图位置
layoutSize: "180%",
itemStyle: {
normal: {
show: 'true',
color: "#04284e", //地图背景色
borderColor: "#5bc1c9" //省市边界线
},
emphasis: {
show: 'true',
color: "rgba(37, 43, 61, .5)" //悬浮背景
}
}
},
series: series
};
截图如下
