效果图如下：
鼠标移到国家上显示tooltip（白色模块）
html代码如下：
<div class="worldEchart-page">
<div id="echartsMap" style="width: 954px;height: 446px;">
</div>
</div>js代码如下：
mounted:function(){
this.getCountryList()
}// 将坐标与值对应并反映在地图上
convertData(data) {
var res = [];
var that = this
for (var i = 0; i < data.length; i++) {
var geoCoord = that.geoCoordMap[data[i].name];
console.log('geoCoord',geoCoord)
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
console.log('----res----',res)
return res;
},
/*获取国家列表*/
getCountryList() {
var that = this;
/* 根据请求的数据实例化地图 */
var chart = echarts.init(document.getElementById('echartsMap'));
//console.log('chart----',chart)
chart.setOption({
visualMap: { // 分区域着色
//min: 0,
//max: 2200000,
type: 'piecewise',
// splitNumber:5, //对于连续型数据，自动平均切分成几段。默认为5段
hoverLink:false,
itemWidth:12, //图形的宽度，即长条的宽度。
itemHeight:12, //图形的高度，即长条的高度。
pieces: [ //自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
{min: 1500, label: '出口额占比75-100%',color:'#3267D7'}, // 不指定 max，表示 max 为无限大（Infinity）。
{min: 900, max: 1500, label: '出口额占比50-75%',color:'#1681F0'},
{min: 310, max: 1000,label:'出口额占比25-50%',color:'#41ABFF'},
{min: 0, max: 300,label:'出口额占比1-25%',color:'#A3CBFF'},
//{max: 0,label:'无数据',color:'#EDEDED'}
{value: 0, label: '无数据', color: '#EDEDED'}, // 表示 value 等于 123 的情况。
// 不指定 min，表示 min 为无限大（-Infinity）。
],
textStyle: { //文本样式
color: '#777F86'
},
bottom: 15 // 组件离容器下侧的距离
},
// 移到国家上的效果
tooltip: {
trigger: 'item',
padding: 0,
enterable: true,
transitionDuration: 1,
textStyle: {
color: '#818A91',
decoration: 'none',
},
backgroundColor: 'rgba(255,255,255,0.96)',
// borderColor:'#000000',
//borderWidth: 1,
formatter: function(params) {
console.log('移到某个国家上:',params)
var tipHtml = '';
tipHtml = '<div style="box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);border-radius:4px;padding:30px 20px;">'+
'<div style="font-size: 16px;">'+params.name+'</div>'+
'<div style="padding:6px 0;"><i style="display: inline-block;margin-bottom: 3px;width:6px;margin-right:6px;height: 6px;background: #3472EE;border-radius: 50%;"></i>2018年整体进口额为10000323万元;</div>'+
'<div style="padding:6px 0;"><i style="display: inline-block;margin-bottom: 3px;width:6px;margin-right:6px;height: 6px;background: #3472EE;border-radius: 50%;"></i>2018年整体进口所占份额为13%;</div>'+
'<div style="padding:6px 0;"><i style="display: inline-block;margin-bottom: 3px;width:6px;margin-right:6px;height: 6px;background: #3472EE;border-radius: 50%;"></i>2018年年进口额增长率为-10%;</div>'+
'</div>'
return tipHtml;
}
},
geo: {
type: 'map',
name: '世界地图',
map: 'world',
roam: true, // 是否开启鼠标缩放和平移漫游
itemStyle: { // 每个区域的样式
normal: {
areaColor: '#EDEDED',
borderColor: '#D3D7E1', // 图形的描边颜色
borderWidth: 1 //描边线宽
},
emphasis: { // 高亮状态
//areaColor: '#7d7d7d'
}
},
left: 20, // 组件离容器左侧的距离
top: 20, // 组件离容器上侧的距离
right: 160,
//nameMap: that.nameMap, //自定义地区的名称映射(bug1:加了这个visualMap会错乱)
data: that.tempData
},
series: [
{
type: 'map',
name: '世界地图',
map: 'world',
zlevel:2,
roam: true, // 是否开启鼠标缩放和平移漫游
itemStyle: { // 每个区域的样式
normal: {
areaColor: '#EDEDED',
borderColor: '#D3D7E1', // 图形的描边颜色
borderWidth: 1 //描边线宽
},
emphasis: { // 高亮状态
//areaColor: '#7d7d7d'
}
},
left: 20, // 组件离容器左侧的距离
top: 20, // 组件离容器上侧的距离
right: 160,
//nameMap: that.nameMap, //自定义地区的名称映射(bug1:加了这个visualMap会错乱)
data: that.tempData
},
// 打点
{
type: 'scatter',
coordinateSystem: 'geo',
data: this.convertData([
{name: "中国", value: 110},
{name: "以色列", value: 110},
{name: "法国", value: 110},
{name: "澳大利亚", value: 210},
{name: "日本", value: 210},
{name: "韩国", value: 210},
{name: "新加坡", value: 310}
]),
zlevel:12,
symbolSize: [20,37], // 标记的大小,[宽、高]
//symbol: 'pin', //气泡
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAlCAYAAABCr8kFAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAC1klEQVRIx+2WS0gVURjHf6OXvD4jM1+ZVhJmWNfwolmhqxaWRFQgLcwIWkVFG90EEUGhmyBKcpdUCGaPhenClZDgq8iyMqy8lo+0C5nPaz6+FndGx7mP5rqIFv3hwJnvO+d3zjffOd+MggnF1l8WM+MAgswONCtLIINHC68of32H/4H/INCrRCRYRE6LyCMR6RmeGZePk04Rkaeq3fxGRMQmIr3iXx9EZLcZWKEEpkJ/sJQAYZqS9BxFB+wEsrRn1+Ist4fv8tjZyNCvERLXxHE0poCzCaewBoXoGa2KouSuAIrIPuC5ZpxZdHHi3UU6J7o9IrFHZlCz4wahQVa9OUdRlHZYPjbFeu+trw/pGHMgCxEerWPMQeVAnXGdEq2jAXfqvU9G2rzCtFY33GoE7tI6WvmK13sHpuaQxSifCRycnjOaEozAFXUu0bIJx7TTJzA+dL3RFGwMeVDvPRK3x2/IxxP2GoHfjcBOvfdCaj72tWleYfa1aZzbmmcEtmsd7dhkA236Ea6FeW72dnLP0T3lnJ22xoSEuYo3Z4Sf32bHGuzx5chUFKVrhUVEXqzypjR4fdEikrlKYLTP7IlIbYCwS/iTiISIyLhJWB9mJCKHTQJtpoAqtO4PsHLTMBVoERGnD9hnf3NXXLmSsooQIBaILjqYn1OQl11lnFDb2Hyyobn9NfADGKkuL531AJaUVUQA23EXiaVFys4UHUtPTV4qTZ++DNVerXxwXx8M8A3oqS4vnQQILimriAVygSjcVzEJdznKann5Nio9NSU6KiLM2ts/OHrtTs0gsAWIARaBSSACSM7cf+BnV0vTlAWwsVwtDgEp+hCuV9W80j2Gqy1RndcP1KvzbUBTkLrSauXxI2oB3gB2dZVnwEY1rA3qa7CqvgXABYzjLld9LJe9BaDLmJR0IM6YeRM7HAHea0nxdmzigHVAJBCqRmEB5tWdTAMTvo7Nbwng09R+hsh2AAAAAElFTkSuQmCC',
symbolOffset:[0, '-50%'], // 标记相对于原本位置的偏移
label: {
normal: {
show: true,
offset: [18,-10], // 是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
formatter: function(params) {
console.log('气泡：',params)
return '{fline|'+params.data.name+'}';
},
position: 'insideTopLeft', // 标签相对于图形包围盒左上角的位置。
distance:0,
backgroundColor: '#16B47F',
padding: [0, 0],
borderRadius: 3,
// verticalAlign:'middle',
// lineHeight: 32,
color: '#ffffff',
rich: {
fline: {
padding: [4, 6, 4, 6],
color: '#ffffff'
}
}
},
emphasis: {
show: false
}
},
itemStyle: {
emphasis: {
borderColor: '#fff',
borderWidth: 1
}
}
}
]
})
// 地图点击事件
chart.on('click', function(params) {
console.log('---params----',params)
})
}数据定义如下：
chart: null,
geoCoordMap: {},
OMData: [],
// 小飞机的图标，可以用其他图形替换
planePath:'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
color: ['#9ae5fc', '#dcbf71'], // 自定义图中要用到的颜色
series: [],
tempData: [
{
name: 'United States',
value: 2025441
},
{
name: 'China',
value: 0
},
{
name: 'Brazil',
value: 200
},
{
name: 'Russia',
value: 1000
},
{
name: 'United Kingdom',
value: 288827
},
{
name: 'Spain',
value: 288797
},
{
name: 'India',
value: 265869
},
{
name: 'Italy',
value: 235278
},
{
name: 'Peru',
value: 196515
},
{
name: 'France',
value: 191313
},
{
name: 'Germany',
value: 186109
},
{
name: 'Iran',
value: 173832
},
{
name: 'Turkey',
value: 171121
},
{
name: 'Chile',
value: 138846
},
{
name: 'Mexico',
value: 117103
},
{
name: 'Saudi Arabia',
value: 105283
},
{
name: 'Pakistan',
value: 103671
},
{
name: 'Canada',
value: 97498
},
{
name: 'Qatar',
value: 70158
},
{
name: 'Bengal',
value: 68504
},
{
name: 'Belgium',
value: 59348
},
{
name: 'South Africa',
value: 50879
},
{
name: 'Belarus',
value: 49453
},
{
name: 'Netherlands',
value: 47945
},
{
name: 'Sweden',
value: 45133
},
{
name: 'Ecuador',
value: 43378
},
{
name: 'UAE',
value: 39376
},
{
name: 'Colombia',
value: 39364
},
{
name: 'Singapore',
value: 38296
},
{
name: 'Egypt',
value: 35444
},
{
name: 'Portugal',
value: 34885
},
{
name: 'Kuwait',
value: 32510
},
{
name: 'Indonesia',
value: 32033
},
{
name: 'Switzerland',
value: 30972
},
{
name: 'Ukraine',
value: 28077
},
{
name: 'Poland',
value: 27160
},
{
name: 'Ireland',
value: 25207
},
{
name: 'Argentina',
value: 22794
},
{
name: 'Philippines',
value: 22474
},
{
name: 'Afghanistan',
value: 20917
},
{
name: 'Romania',
value: 20604
},
{
name: 'Dominica',
value: 20126
},
{
name: 'Israel',
value: 18032
},
{
name: 'Oman',
value: 17486
},
{
name: 'Japan',
value: 17060
},
{
name: 'Austria',
value: 16968
},
{
name: 'Panama',
value: 16425
},
{
name: 'Bahrain',
value: 15417
},
{
name: 'Bolivia',
value: 13643
},
{
name: 'Iraq',
value: 13481
},
{
name: 'Armenia',
value: 13325
},
{
name: 'Kazakhstan',
value: 12859
},
{
name: 'Nigeria',
value: 12486
},
{
name: 'Denmark',
value: 12162
},
{
name: 'Serbia',
value: 11896
},
{
name: 'Korea',
value: 11814
},
{
name: 'Algeria',
value: 10265
},
{
name: 'Ghana',
value: 9910
},
{
name: 'Moldova',
value: 9807
},
{
name: 'Czech Republic',
value: 9670
},
{
name: 'Norway',
value: 8561
},
{
name: 'Malaysia',
value: 8329
},
{
name: 'Morocco',
value: 8302
},
{
name: 'Cameroon',
value: 8060
},
{
name: 'Azerbaijan',
value: 7876
},
{
name: 'Australia',
value: 7265
},
{
name: 'Guatemala',
value: 7055
},
{
name: 'Finland',
value: 7001
},
{
name: 'Honduras',
value: 6327
},
{
name: 'Sudan',
value: 6081
},
{
name: 'Tajikistan',
value: 4609
},
{
name: 'Uzbekistan',
value: 4440
},
{
name: 'Senegal',
value: 4427
},
{
name: 'Djibouti',
value: 4278
},
{
name: 'Guinea',
value: 4117
},
{
name: 'Congo (DRC)',
value: 4106
},
{
name: 'Luxembourg',
value: 4040
},
{
name: 'Hungary',
value: 4014
},
{
name: 'Ivory Coast',
value: 3881
},
{
name: 'Nepal',
value: 3762
},
{
name: 'Haiti',
value: 3334
},
{
name: 'North Macedonia',
value: 3152
},
{
name: 'Thailand',
value: 3119
},
{
name: 'Salvador',
value: 3104
},
{
name: 'Gabon',
value: 3101
},
{
name: 'Greece',
value: 3049
},
{
name: 'Kenya',
value: 2872
},
{
name: 'Bulgaria',
value: 2727
},
{
name: 'Bosnia and Herzegovina',
value: 2704
},
{
name: 'Venezuela',
value: 2377
},
{
name: 'Somalia',
value: 2368
},
{
name: 'Croatia',
value: 2247
},
{
name: 'Cuba',
value: 2200
},
{
name: 'Ethiopia',
value: 2156
}
],
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': '津巴布韦'
},
// 散点在地图上的坐标
geoCoordMap: { // 经度longitude, 纬度latitude
"中国": [116.4, 39.9],
"以色列": [31.046051, 34.851612],
"法国": [2.352222, 48.856614],
"澳大利亚": [133.775136,-25.274398],
"日本": [140, 35.6],
"韩国": [126.58, 37.33],
"新加坡": [103.51, 1.17]
},
tempListData: [
{
"pubMan":"贸促会",
"coverPhotoUrl":"proxy/iframefile/qybdirprocess/download/ehn-cms/202078/1431/Snipaste_2020-07-06_09-55-35.png",
"logicDel":"0",
"latitude":39.9,
"colCode":"GJXQ",
"locationAdvantage":"中国位于亚洲东部，太平洋西岸。北起漠河附近的黑龙江江心，南到南沙群岛的曾母暗沙。西起帕米尔高原，东至黑龙江、乌苏里江汇合处。陆地面积960万平方千米，陆上边界2万多千米。",
"oid":"rFWPfCH3Qa6MM8iv_EaiPA",
"pubDate":1604989332075,
"pubUid":"E7N3Wk9OR1SdmcAia4e2PQQ",
"population":"据第六次全国人口普查结果，全国总人口为1370536875人。其中：普查登记的大陆31个省、自治区、直辖市和现役军人的人口共1339724852人。香港特别行政区人口为7097600人。澳门特别行政区人口为552300人。台湾地区人口为23162123人。（总体概况-人口）",
"capitalName":"北京",
"naturalResources":"中国幅员广大，地质条件多样，矿产资源丰富，矿产171种。已探明储量的有157种。其中钨、锑、稀土、钼、钒和钛等的探明储量居世界首位。煤、铁、铅锌、铜、银、汞、锡、镍、磷灰石、石棉等的储量均居世界前列。（总体概况-自然资源）",
"tradeDevelop":"<p>中国是世界第二大经济体、世界第一大工业国和世界第一大农业国。2019年11月22日，国家统计局对2018年GDP初步核算数进行了修订。主要结果为：2018年GDP为919281亿元，比初步核算数增加18972亿元，增幅为2.1%。（经贸发展）</p><p><br/></p>",
"clickRate":399,
"countryCode":"China",
"infrastructure":"中国属于第三世界国家，奉行独立自主的和平外交政策，从本国人民和世界人民的长远利益和根本利益出发，把反对霸权主义、维护世界和平、发展各国友好合作和促进共同经济繁荣，作为自己对外工作的根本目标。在处理国与国关系时，中国一贯主张互不干涉内政，以和平共处五项原则为指导，而不以社会制度、意识形态和价值观念的异同为标准，是联合国安全理事会常任理事国和许多国际性组织成员国。（总体概况-基础设施）",
"bilateralRelations":"",
"countryName":"中国",
"colId":"qWdTyD-cSwC32fsWAbPxtQ",
"continentName":"亚洲",
"continentCode":"Asia",
"createDate":1593532800000,
"longitude":116.4,
"status":"YFB"
}
]绘制全球地图的json文件如下：
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
