先来贴一张最终效果图：
对应的option是这样的
option = {
backgroundColor: 'rgb(55, 105, 0, .2)',
title: [{
text: '测试',
left: 'center',
top: '2%',
textStyle: {
fontSize: 30,
color: '#fff',
textShadowColor: '(0, 0, 0, .3)',
textShadowBlur: 5,
textShadowOffsetX: 2,
textShadowOffsetY: 4
}
}],
geo: {
map: 'world',
roam: true,
silent: true,
itemStyle: {
normal: {
areaColor: '#0D1740',
borderColor: '#552183',
shadowColor: '#552183',
shadowBlur: 10
},
emphasis: {
areaColor: '#FF9A78'
}
},
regions: emphasisData() // 在地图中对特定的区域配置样式。
},
series: seriesData()
}别忘了要事先引入echarts组件和世界地图world.js组件：
<script src="https://gallerybox.echartsjs.com/dep/echarts/3.8.0/echarts.min.js"></script>
<script src="https://gallerybox.echartsjs.com/dep/echarts/map/js/world.js"></script>准备好不同国家的用户数数据和经纬度数据：
let cdata = [{
'name': 'Uganda',
'value': 995281
}, {
'name': 'United States',
'value': 855517
}, {
'name': 'Zimbabwe',
'value': 680081
}, {
'name': 'Nigeria',
'value': 661565
}, {
'name': 'Kenya',
'value': 598202
}, {
'name': 'Tanzania',
'value': 585140
}, {
'name': 'Malawi',
'value': 372996
}, {
'name': 'Zambia',
'value': 338748
}, {
'name': 'Dem. Rep. Congo',
'value': 313134
}, {
'name': 'Ethiopia',
'value': 224745
}, {
'name': 'Brazil',
'value': 147337
}, {
'name': 'Rwanda',
'value': 144632
}, {
'name': 'Spain',
'value': 142555
}, {
'name': 'Burkina Faso',
'value': 136620
}, {
'name': 'Mozambique',
'value': 134852
}, {
'name': 'Italy',
'value': 117124
}, {
'name': 'Ghana',
'value': 116783
}, {
'name': 'South Africa',
'value': 106812
}, {
'name': 'India',
'value': 95897
}, {
'name': 'Cameroon',
'value': 78611
}, {
'name': 'Haiti',
'value': 66863
}, {
'name': 'Germany',
'value': 57112
}, {
'name': 'Central African Rep.',
'value': 53151
}, {
'name': 'Thailand',
'value': 52443
}, {
'name': 'Canada',
'value': 46805
}, {
'name': 'Congo',
'value': 45366
}, {
'name': 'Burundi',
'value': 43913
}, {
'name': 'Botswana',
'value': 43245
}, {
'name': 'S. Sudan',
'value': 39857
}, {
'name': 'France',
'value': 38065
}, {
'name': 'Russia',
'value': 37265
}, {
'name': 'Argentina',
'value': 29162
}, {
'name': 'China',
'value': 27489
}, {
'name': 'Chad',
'value': 27469
}, {
'name': 'Mali',
'value': 27212
}, {
'name': 'Mexico',
'value': 23714
}, {
'name': 'Portugal',
'value': 23067
}, {
'name': 'Angola',
'value': 22283
}, {
'name': 'United Kingdom',
'value': 16970
}, {
'name': 'Togo',
'value': 16042
}, {
'name': 'Sudan',
'value': 15662
}, {
'name': 'Namibia',
'value': 15424
}, {
'name': 'Philippines',
'value': 15421
}, {
'name': 'Lesotho',
'value': 14419
}, {
'name': 'Ukraine',
'value': 13396
}, {
'name': 'Australia',
'value': 12605
}, {
'name': 'Netherlands',
'value': 11325
}, {
'name': 'Switzerland',
'value': 9938
}, {
'name': 'Benin',
'value': 9802
}, {
'name': 'Somalia',
'value': 9038
}, {
'name': 'Myanmar',
'value': 8628
}, {
'name': 'Puerto Rico',
'value': 8438
}, {
'name': 'Niger',
'value': 8306
}, {
'name': 'Peru',
'value': 7969
}, {
'name': 'Vietnam',
'value': 7894
}, {
'name': 'Eritrea',
'value': 7532
}, {
'name': 'Senegal',
'value': 7443
}, {
'name': 'Guinea',
'value': 7344
}, {
'name': 'Japan',
'value': 7254
}, {
'name': 'Liberia',
'value': 6939
}, {
'name': 'Colombia',
'value': 5813
}, {
'name': 'Gabon',
'value': 4972
}, {
'name': 'Swaziland',
'value': 4286
}, {
'name': 'Pakistan',
'value': 4056
}, {
'name': 'Belgium',
'value': 4048
}, {
'name': 'Denmark',
'value': 3733
}, {
'name': 'Honduras',
'value': 3638
}, {
'name': 'Bolivia',
'value': 3502
}, {
'name': 'Chile',
'value': 3435
}, {
'name': 'Mauritania',
'value': 3349
}, {
'name': 'Sweden',
'value': 2775
}, {
'name': 'Hungary',
'value': 2653
}, {
'name': 'Malaysia',
'value': 2452
}, {
'name': 'Sierra Leone',
'value': 2342
}, {
'name': 'Austria',
'value': 2199
}, {
'name': 'Guatemala',
'value': 2125
}, {
'name': 'Guinea-Bissau',
'value': 2021
}, {
'name': 'Greece',
'value': 1909
}, {
'name': 'Kazakhstan',
'value': 1907
}, {
'name': 'Jamaica',
'value': 1836
}, {
'name': 'Trinidad and Tobago',
'value': 1709
}, {
'name': 'New Zealand',
'value': 1679
}, {
'name': 'El Salvador',
'value': 1668
}, {
'name': 'Uruguay',
'value': 1663
}, {
'name': 'Venezuela',
'value': 1641
}, {
'name': 'Panama',
'value': 1627
}, {
'name': 'Ecuador',
'value': 1578
}, {
'name': 'Equatorial Guinea',
'value': 1441
}, {
'name': 'Norway',
'value': 1269
}, {
'name': 'Morocco',
'value': 1209
}, {
'name': 'Israel',
'value': 1163
}, {
'name': 'Bahamas',
'value': 1138
}, {
'name': 'Singapore',
'value': 1089
}, {
'name': 'Poland',
'value': 1047
}, {
'name': 'Cambodia',
'value': 1019
}, {
'name': 'Costa Rica',
'value': 982
}, {
'name': 'Turkmenistan',
'value': 948
}, {
'name': 'Cape Verde',
'value': 914
}, {
'name': 'Guyana',
'value': 904
}, {
'name': 'Cuba',
'value': 841
}, {
'name': 'Gambia',
'value': 826
}, {
'name': 'Uzbekistan',
'value': 729
}, {
'name': 'Ireland',
'value': 715
}, {
'name': 'Moldova',
'value': 713
}, {
'name': 'Iran',
'value': 684
}, {
'name': 'Romania',
'value': 679
}, {
'name': 'Yemen',
'value': 595
}, {
'name': 'Madagascar',
'value': 568
}, {
'name': 'Belarus',
'value': 527
}, {
'name': 'Paraguay',
'value': 525
}, {
'name': 'Finland',
'value': 510
}, {
'name': 'Egypt',
'value': 505
}, {
'name': 'Papua New Guinea',
'value': 487
}, {
'name': 'Sri Lanka',
'value': 444
}, {
'name': 'Azerbaijan',
'value': 432
}, {
'name': 'Serbia',
'value': 410
}, {
'name': 'Saudi Arabia',
'value': 394
}, {
'name': 'Lebanon',
'value': 376
}, {
'name': 'Kyrgyzstan',
'value': 370
}, {
'name': 'Afghanistan',
'value': 356
}, {
'name': 'Algeria',
'value': 341
}, {
'name': 'Iraq',
'value': 309
}, {
'name': 'Djibouti',
'value': 303
}, {
'name': 'Suriname',
'value': 293
}, {
'name': 'Latvia',
'value': 283
}, {
'name': 'Tajikistan',
'value': 275
}, {
'name': 'Bulgaria',
'value': 273
}, {
'name': 'Lithuania',
'value': 267
}, {
'name': 'Nicaragua',
'value': 266
}, {
'name': 'Barbados',
'value': 246
}, {
'name': 'Sao Tome and Principe',
'value': 241
}, {
'name': 'Taiwan',
'value': 204
}, {
'name': 'Luxembourg',
'value': 182
}, {
'name': 'Greenland',
'value': 165
}, {
'name': 'Turkey',
'value': 116
}, {
'name': 'Belize',
'value': 113
}, {
'name': 'Malta',
'value': 111
}, {
'name': 'Saint Vincent and the Grenadines',
'value': 106
}, {
'name': 'Tunisia',
'value': 101
}, {
'name': 'Libya',
'value': 98
}, {
'name': 'Bermuda',
'value': 92
}, {
'name': 'Cyprus',
'value': 85
}, {
'name': 'Croatia',
'value': 84
}, {
'name': 'Bhutan',
'value': 77
}, {
'name': 'Iceland',
'value': 74
}, {
'name': 'Syria',
'value': 72
}, {
'name': 'Brunei',
'value': 72
}, {
'name': 'Bosnia and Herzegovina',
'value': 65
}, {
'name': 'Fiji',
'value': 61
}, {
'name': 'Mauritius',
'value': 56
}, {
'name': 'Bahrain',
'value': 51
}, {
'name': 'Georgia',
'value': 51
}, {
'name': 'Grenada',
'value': 46
}, {
'name': 'Antigua and Barbuda',
'value': 46
}, {
'name': 'Oman',
'value': 43
}, {
'name': 'Saint Lucia',
'value': 43
}, {
'name': 'United Arab Emirates',
'value': 41
}, {
'name': 'Kuwait',
'value': 40
}, {
'name': 'Solomon Islands',
'value': 39
}, {
'name': 'Andorra',
'value': 39
}, {
'name': 'Dominica',
'value': 36
}, {
'name': 'Slovenia',
'value': 36
}, {
'name': 'Qatar',
'value': 35
}, {
'name': 'Albania',
'value': 26
}, {
'name': 'Slovakia',
'value': 24
}, {
'name': 'Samoa',
'value': 20
}, {
'name': 'Vanuatu',
'value': 19
}, {
'name': 'Guam',
'value': 19
}, {
'name': 'Palestine',
'value': 16
}, {
'name': 'Jordan',
'value': 14
}, {
'name': 'Armenia',
'value': 13
}, {
'name': 'Tonga',
'value': 13
}, {
'name': 'Macedonia',
'value': 13
}, {
'name': 'Estonia',
'value': 12
}, {
'name': 'Montenegro',
'value': 9
}, {
'name': 'Seychelles',
'value': 8
}, {
'name': 'Nepal',
'value': 7
}, {
'name': 'Comoros',
'value': 7
}, {
'name': 'American Samoa',
'value': 6
}, {
'name': 'Marshall Islands',
'value': 5
}, {
'name': 'Kiribati',
'value': 5
}, {
'name': 'Maldives',
'value': 4
}, {
'name': 'Laos',
'value': 3
}, {
'name': 'Mongolia',
'value': 0
}, {
'name': 'Bangladesh',
'value': 0
}, {
'name': 'Indonesia',
'value': 0
}]
var geoCoordMap3 = {
'Afghanistan': [67.709953, 33.93911],
'Aland Islands': [39.390897, -99.066067],
'Albania': [20.168331, 41.153332],
'Algeria': [1.659626, 28.033886],
'American Samoa': [-14.293662, -170.698357],
'Andorra': [42.54525, 1.576297],
'Angola': [17.873887, -11.202692],
'Anguilla': [18.221643, -63.058971],
'Antigua and Barbuda': [17.07753, -61.800068],
'Argentina': [-63.61667199999999, -38.416097],
'Armenia': [45.038189, 40.069099],
'Aruba': [12.5, -69.977501],
'Australia': [133.775136, -25.274398],
'Austria': [14.550072, 47.516231],
'Azerbaijan': [47.576927, 40.143105],
'Bangladesh': [24.2887, 90.0438],
'Bahrain': [26.066799, 50.511398],
'Bahamas': [-77.39627999999999, 25.03428],
'Barbados': [13.167446, -59.555202],
'Belarus': [27.953389, 53.709807],
'Belgium': [4.469936, 50.503887],
'Belize': [-88.49765, 17.189877],
'Benin': [2.315834, 9.30769],
'Bermuda': [-64.7505, 32.3078],
'Bhutan': [90.433601, 27.514162],
'Bolivia': [-63.58865299999999, -16.290154],
'Bosnia and Herzegovina': [17.679076, 43.915886],
'Botswana': [24.684866, -22.328474],
'Bouvet Island': [-54.4333, 3.4],
'Brazil': [-51.92528, -14.235004],
'Brunei': [114.727669, 4.535277],
'Bulgaria': [25.48583, 42.733883],
'Burkina Faso': [-1.561593, 12.238333],
'Burundi': [29.918886, -3.373056],
'Cambodia': [104.990963, 12.565679],
'Cameroon': [12.354722, 7.369721999999999],
'Canada': [-106.346771, 56.130366],
'Cape Verde': [16.0, -24.0],
'Central African Republic': [6.1428, 20.399599],
'Chad': [18.732207, 15.454166],
'Chile': [-71.542969, -35.675147],
'Christmas Islands': [25.93244, -81.69396],
'Cocos (keeling) Islands': [-12.5, 96.833298],
'Colombia': [-74.297333, 4.570868],
'Comoros': [-11.6474, 43.297699],
'Congo (Congo-Kinshasa)': [-4.37773, 15.27298],
'Congo': [-0.2396, 15.3028],
'Cook Islands': [-21.231001, -159.812195],
'Costa Rica': [-83.753428, 9.748916999999999],
"Cote D'Ivoire": [7.6869, -5.6958],
'China': [104.195397, 35.86166],
'Croatia': [15.2, 45.1],
'Cuba': [-77.781167, 21.521757],
'Czech': [50.4881, 1.61488],
'Cyprus': [33.429859, 35.126413],
'Denmark': [9.501785, 56.26392],
'Djibouti': [42.590275, 11.825138],
'Dominica': [15.427289, -61.356377],
'East Timor': [49.212307, -2.1256],
'Ecuador': [-78.18340599999999, -1.831239],
'Egypt': [30.802498, 26.820553],
'Equatorial Guinea': [10.267895, 1.650801],
'Eritrea': [39.782334, 15.179384],
'Estonia': [25.013607, 58.595272],
'Ethiopia': [40.489673, 9.145000000000001],
'Faroe Islands': [62.139046, -7.006846],
'Fiji': [-17.850599, 177.776901],
'Finland': [25.748151, 61.92410999999999],
'France': [2.213749, 46.227638],
'Franch Metropolitan': [32.13773, -110.76609],
'Franch Guiana': [-53.125782, 3.933889],
'French Polynesia': [-17.651199, -149.546295],
'Gabon': [11.609444, -0.803689],
'Gambia': [-15.310139, 13.443182],
'Georgia': [-82.9000751, 32.1656221],
'Germany': [10.451526, 51.165691],
'Ghana': [-1.023194, 7.946527],
'Gibraltar': [36.145147, -5.348485],
'Greece': [21.824312, 39.074208],
'Grenada': [37.18302, -3.602192],
'Guadeloupe': [16.249007, -61.565044],
'Guam': [13.3532, 144.653198],
'Guatemala': [-90.23075899999999, 15.783471],
'Guernsey': [49.456623, -2.582235],
'Guinea-Bissau': [-15.180413, 11.803749],
'Guinea': [-9.696645, 9.945587],
'Guyana': [-58.93018, 4.860416],
'Hong Kong': [22.264412, 114.167061],
'Haiti': [-72.285215, 18.971187],
'Honduras': [-86.241905, 15.199999],
'Hungary': [19.503304, 47.162494],
'Iceland': [-19.020835, 64.963051],
'India': [78.96288, 20.593684],
'Indonesia': [-0.7366, 113.485001],
'Iran': [53.688046, 32.427908],
'Iraq': [43.679291, 33.223191],
'Ireland': [-8.24389, 53.41291],
'Isle of Man': [54.25, -4.5],
'Israel': [34.851612, 31.046051],
'Italy': [12.56738, 41.87194],
'Jamaica': [-77.297508, 18.109581],
'Japan': [138.252924, 36.204824],
'Jersey': [49.212307, -2.1256],
'Jordan': [36.238414, 30.585164],
'Kazakstan': [66.923684, 48.019573],
'Kenya': [37.906193, -0.023559],
'Kiribati': [-2.8497, -171.623795],
'Korea (South)': [127.766922, 35.907757],
'Korea (North)': [40.534302, 127.222504],
'Kuwait': [47.481766, 29.31166],
'Kyrgyzstan': [74.766098, 41.20438],
'Laos': [102.495496, 19.85627],
'Latvia': [24.603189, 56.879635],
'Lebanon': [35.862285, 33.854721],
'Lesotho': [28.233608, -29.609988],
'Liberia': [-9.429499000000002, 6.428055],
'Libya': [17.228331, 26.3351],
'Liechtenstein': [47.150002, 9.5833],
'Lithuania': [23.881275, 55.169438],
'Luxembourg': [6.129582999999999, 49.815273],
'Macau': [22.191951, 113.538122],
'Macedonia': [21.745275, 41.608635],
'Malawi': [34.301525, -13.254308],
'Malaysia': [101.975766, 4.210484],
'Madagascar': [46.869107, -18.766947],
'Maldives': [-0.6022, 73.084198],
'Mali': [-3.996166, 17.570692],
'Malta': [35.902241, 14.413739],
'Marshall Islands': [7.1482, 171.037399],
'Martinique': [14.611373, -60.962078],
'Mauritania': [-10.940835, 21.00789],
'Mauritius': [-20.2833, 57.549999],
'Mayotte': [-12.8333, 45.166698],
'Mexico': [-102.552784, 23.634501],
'Micronesia': [5.0, 152.0],
'Moldova': [28.369885, 47.411631],
'Monaco': [43.731142, 7.419758],
'Mongolia': [103.846656, 46.862496],
'Montenegro': [19.37439, 42.708678],
'Montserrat': [16.735834, -62.192696],
'Morocco': [-7.092619999999999, 31.791702],
'Mozambique': [35.529562, -18.665695],
'Myanmar': [95.956223, 21.913965],
'Namibia': [18.49041, -22.95764],
'Nauru': [-0.5334, 166.9086],
'Nepal': [84.12400799999999, 28.394857],
'Netherlands': [5.291265999999999, 52.132633],
'New Caledonia': [165.618042, -20.904305],
'New Zealand': [174.885971, -40.900557],
'Nicaragua': [-85.207229, 12.865416],
'Niger': [8.081666, 17.607789],
'Nigeria': [8.675277, 9.081999],
'Niue': [-19.0333, -169.866699],
'Norfolk Island': [-29.0333, 167.949997],
'Norway': [8.468945999999999, 60.47202399999999],
'Oman': [55.923255, 21.512583],
'Pakistan': [69.34511599999999, 30.375321],
'Palau': [7.5216, 134.530807],
'Palestine': [32.0, 35.25],
'Panama': [-80.782127, 8.537981],
'Papua New Guinea': [143.95555, -6.314992999999999],
'Paraguay': [-58.443832, -23.442503],
'Peru': [-75.015152, -9.189967],
'Philippines': [121.774017, 12.879721],
'Pitcairn Islands': [-25.0667, -130.083298],
'Poland': [19.145136, 51.919438],
'Portugal': [-8.224454, 39.39987199999999],
'Puerto Rico': [-66.590149, 18.220833],
'Qatar': [51.183884, 25.354826],
'Reunion': [-21.087161, 55.593724],
'Romania': [24.96676, 45.943161],
'Rwanda': [29.873888, -1.940278],
'Russian Federation': [65.067703, 116.8564],
'Saint Helena': [-15.95, -5.7],
'Saint Kitts-Nevis': [17.31539, -62.74275],
'Saint Lucia': [13.894094, -60.965061],
'Saint Vincent and the Grenadines': [13.246317, -61.19014],
'El Salvador': [-88.89653, 13.794185],
'Samoa': [-13.5945, -172.611298],
'San Marino': [43.932716, 12.457975],
'Sao Tome and Principe': [0.2306, 6.5853],
'Saudi Arabia': [45.079162, 23.885942],
'Senegal': [-14.452362, 14.497401],
'Seychelles': [-4.5833, 55.666698],
'Sierra Leone': [-11.779889, 8.460555],
'Singapore': [1.290453, 103.852038],
'Serbia': [43.871162, 20.603973],
'Slovakia': [19.699024, 48.669026],
'Slovenia': [14.995463, 46.151241],
'Solomon Islands': [160.156194, -9.64571],
'Somalia': [46.199616, 5.152149],
'South Africa': [22.937506, -30.559482],
'Spain': [-3.74922, 40.46366700000001],
'Sri Lanka': [80.77179699999999, 7.873053999999999],
'Sudan': [30.217636, 12.862807],
'Suriname': [-56.027783, 3.919305],
'Swaziland': [31.465866, -26.522503],
'Sweden': [18.643501, 60.12816100000001],
'Switzerland': [8.227511999999999, 46.818188],
'Syria': [38.996815, 34.80207499999999],
'Tajikistan': [71.276093, 38.861034],
'Tanzania': [-5.6088, 34.5294],
'Taiwan': [23.534, 120.559402],
'Thailand': [100.992541, 15.870032],
'Trinidad and Tobago': [10.418848, -61.293797],
'Timor-Leste': [125.727539, -8.874217],
'Togo': [0.824782, 8.619543],
'Tokelau': [-9.0, -171.75],
'Tonga': [-21.149, -175.319595],
'Tunisia': [9.537499, 33.886917],
'Turkey': [35.243322, 38.963745],
'Turkmenistan': [59.556278, 38.969719],
'Tuvalu': [-7.4645, 178.666107],
'Uganda': [32.290275, 1.373333],
'Ukraine': [31.16558, 48.379433],
'United Arab Emirates': [23.341, 52.9063],
'United Kingdom': [-3.435973, 55.378051],
'United States': [-95.712891, 37.09024],
'Uruguay': [-55.765835, -32.522779],
'Uzbekistan': [64.585262, 41.377491],
'Vanuatu': [166.959158, -15.376706],
'Vatican City': [41.902153, 12.452806],
'Venezuela': [-66.58973, 6.42375],
'Vietnam': [108.277199, 14.058324],
'Wallis and Futuna': [-13.2818, -176.185303],
'Western Sahara': [-12.885834, 24.215527],
'Yemen': [48.516388, 15.552727],
'Yugoslavia': [51.023042, -116.526079],
'Zambia': [27.849332, -13.133897],
'Zimbabwe': [29.154857, -19.015438],
'Russia': [116.8564, 65.067703],
'Greenland': [-42.164707, 76.422188],
'Korea': [127.766922, 35.907757],
'Democratic Republic of Congo': [15.27298, -4.37773],
'Dem. Rep. Congo': [15.27298, -4.37773],
'S. Sudan': [30.05489, 7.265386],
'Central African Rep.': [6.1428, 20.399599]
};接下来，我们主要是看option中用到的两个方法：emphasisData() 和seriesData()。
empharisData()主要是返回需要显著标出的若干个国家的数据，showList就是这“若干个国家”：
var showList = ['United States', 'Canada', 'China', 'Germany', 'France', 'Japan', 'Australia', 'Russia', 'Spain', 'Italy']
var showColors = ['lightskyblue', 'yellow', 'orange', 'lightgreen', 'pink', "#1DE9B6", "#F46E36", "#04B9FF", "#5DBD32", "#FFC809"]
var emphasisData = function() {
var res = [];
for (var i = 0; i < showList.length; i++) {
res.push({
name: showList[i],
itemStyle: {
normal: {
areaColor: showColors[(i % showColors.length)], //971345, D60F46
// color: '#2a333d'
}
}
});
}
return res;
}一开始，我的seriesData()是这样的：
var seriesData = function() {
var sdata = [];
for (var i = 0; i < cdata.length; i++) {
if (showList.indexOf(cdata[i].name) > -1) {
var geoCoord = geoCoordMap3[cdata[i].name];
sdata.push({
name: cdata[i].name,
value: geoCoord.concat(Math.round(cdata[i].value))
})
}
}
return [{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 0,
symbolSize: 10,
rippleEffect: {
scale: 3,
brushType: 'stroke'
},
data: sdata,
label: {
normal: {
show: true,
position: 'right',
formatter: param => {
return `{natStyl|${param.name}}\n{labelStyl|用户数：}{numStyl|${param.value[2]}}\n{labelStyl|设备数：}{numStyl|${param.value[2]}}`
},
shadowColor: 'white',
shadowBlur: 20,
backgroundColor: '#fff',
padding: [4, 5],
borderRadius: 4,
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.5)',
rich: {
natStyl: {
color: '#8A3324',
fontSize: '20',
lineHeight: 40
},
labelStyl: {
color: '#495A80',
fontSize: 15,
fontWeight: 'bold',
lineHeight: 24
},
numStyl: {
color: '#019D2D',
fontSize: 18,
fontWeight: 'bold',
lineHeight: 24
}
}
}
},
itemStyle: {
normal: {
color: 'red'
}
}
}]
}
出来的效果如下：
可以看到，所有的label都显示在右边（label.normal.position设置了'right'值），发生了层叠现象。
我希望不同国家的label可以设置不同的position，我最直接的反应就是在label.normal.position上做文章，但是经过在谷歌上一番苦苦搜寻，并没有找到什么解决方案，好像一个series项只能设置一个position值。
后来我灵机一动，把它拆成多个series项，不就能设置不同的position了吗？于是：
var getMapLabelPos = function(name) {
if (['Canada', 'China'].indexOf(name) > -1) return 'left'
if (['France'].indexOf(name) > -1) return 'insideBottomRight'
if (['Italy'].indexOf(name) > -1) return ['100%', '100%']
if (['Spain'].indexOf(name) > -1) return 'insideTopRight'
if (['Germany'].indexOf(name) > -1) return 'insideBottomLeft'
else return 'right'
}
var seriesData = function() {
var res = [];
for (var i = 0; i < cdata.length; i++) {
if (showList.indexOf(cdata[i].name) > -1) {
var geoCoord = geoCoordMap3[cdata[i].name];
res.push({
data: [{
name: cdata[i].name,
value: geoCoord.concat(Math.round(cdata[i].value))
}],
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 0,
symbolSize: 10,
rippleEffect: {
scale: 3,
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: getMapLabelPos(cdata[i].name),
formatter: param => {
return `{natStyl|${param.name}}\n{labelStyl|用户数：}{numStyl|${param.value[2]}}\n{labelStyl|设备数：}{numStyl|${param.value[2]}}`
},
shadowColor: 'white',
shadowBlur: 20,
backgroundColor: '#fff',
padding: [4, 5],
borderRadius: 4,
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.5)',
rich: {
natStyl: {
color: '#8A3324',
fontSize: '20',
lineHeight: 40
},
labelStyl: {
color: '#495A80',
fontSize: 15,
fontWeight: 'bold',
lineHeight: 24
},
numStyl: {
color: '#019D2D',
fontSize: 18,
fontWeight: 'bold',
lineHeight: 24
}
}
}
},
itemStyle: {
normal: {
color: 'red'
}
}
})
}
}
return res
}出来的效果如下：
嗯，position设好了，新的问题又出现了，当position设置为“inside*”时，里面的文字自动加了一层阴影，阴影颜色就是itemStyle.normal.color设置的值。
label中的字体样式我都是在rich中设置的，所以我的自然反应就是，在rich中设置它的阴影样式，把那一圈自动加的阴影去掉，万万没想到，这么个操作，我竟然也折腾了好几个小时ToT
查官方文档（https://echarts.apache.org/zh/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE）：
我试着设置了textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY，然而并没有什么用，Emmm……跟shadow有关的还有shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY，都设置看看吧，然后还是没有用，去谷歌看看有没有人和我遇到一样的问题吧……于是，几个小时过去了……并没有找到类似的情况orz
后来不知道怎么地，设置了一下textBorderColor，居然有反应了，原来是文字描边啊摔！
于是，对应于最终效果图的seriesData()如下：
var seriesData = function() {
var res = [];
for (var i = 0; i < cdata.length; i++) {
if (showList.indexOf(cdata[i].name) > -1) {
var geoCoord = geoCoordMap3[cdata[i].name];
res.push({
data: [{
name: cdata[i].name,
value: geoCoord.concat(Math.round(cdata[i].value))
}],
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 0,
symbolSize: 10,
rippleEffect: {
scale: 3,
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: getMapLabelPos(cdata[i].name),
formatter: param => {
return `{natStyl|${param.name}}\n{labelStyl|用户数：}{numStyl|${param.value[2]}}\n{labelStyl|设备数：}{numStyl|${param.value[2]}}`
},
shadowColor: 'white',
shadowBlur: 20,
backgroundColor: '#fff',
padding: [4, 5],
borderRadius: 4,
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.5)',
rich: {
natStyl: {
color: '#8A3324',
fontSize: '20',
lineHeight: 40,
// textShadowColor: 'black',
// textShadowBlur: 0,
// textShadowOffsetX: 0,
// textShadowOffsetY: 0,
// shadowColor: 'black',
// shadowBlur: 0,
// shadowOffsetX: 0,
// shadowOffsetY: 0
textBorderColor: '#fff'
},
labelStyl: {
color: '#495A80',
fontSize: 15,
fontWeight: 'bold',
lineHeight: 24,
textBorderColor: '#fff'
},
numStyl: {
color: '#019D2D',
fontSize: 18,
fontWeight: 'bold',
lineHeight: 24,
textBorderColor: '#fff'
}
}
}
},
itemStyle: {
normal: {
color: 'red'
}
}
})
}
}
return res
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
