echarts中在地图上显示label时的阴影问题

先来贴一张最终效果图:

对应的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
}

 

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值