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: 0textBorderColor: '#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
}

echarts中在地图上显示label时的阴影问题相关推荐

用echarts 中的地图来显示区域分布情况(vue),包括地理数据来源生成的制作注意事项
由于国家测绘部门的一些相关法律规定,现在版本的ecahrts 中的地图资源已经不能制作和直接使用,只能通过自己注册地图regiseterMap(name,json),来实现地图的区域,这些数据,学GI ...
echarts中中国地图的显示
1.如果引用echarts,则需引入china.js,文档在我的资源页中有. 2.代码如下,然后具体的配置,如颜色之类的配置问题到echarts中官网查找(https://echarts.baidu. ...
echarts 地图和柱状图结合（在地图上显示柱状图）
如图,需求要做一个在地图上显示柱状图的echarts图,但是百度了半天,发现很少有人发这种例子.这个代码也是借鉴的别人的文章,但需求肯定不完全一致,那我会根据我的需求把代码和注意事项发出来并解释.(如 ...
ECharts如何制作省份地图并在地图上显示自定义图标/散点图
之前一直被客户提的一个需求烦恼着,他要只显示某个省份的地图,并且呢要在地图上显示小车的图标,还有其它一些点的信息.我以前只用过echarts做过图表,没做过地图,所以自己也是网上看了很多并且看了很多a ...
echarts 自作地图上高亮显示散点图 tooltips自定义内容，tooltips固定位置
最近公司在用echarts弄地图,就自己尝试着研究了一下,研究不深,但也有些了解, 首先是自己做一份地图,然后在地图上显示一些正在移动的点,鼠标放到这些点上,就显示这些点的基本信息,就如这样的图: 其 ...
插件～使用ECharts动态在地图上标识点
ECharts可以很方便的在网页上绘制地图,图表,并且可以提供下载图像,放大,缩小,拖动等功能,今天主要说一下它的地图类型(type:＇map＇)是如何实现的．首先在ECharts地图的坐标需要我们 ...
python爬虫租房信息在地图上显示
本人初学python是菜鸟级,写的不好勿喷. python爬虫用了比较简单的urllib.parse和requests,把爬来的数据显示在地图上.接下里我们话不多说直接上代码: 1.安装python环 ...
中高德地图只显示某一城市_小O地图 - 城市交通态势数据查询及下载
小O地图是一款互联网地图数据挖掘.分析.图表软件.具有专业.稳定.高效的特点.提供地图功能多达30余项,并持续更新中. 感兴趣的朋友可以登录官网下载使用 .www.GIS9.com [概述] 本文介绍 ...
中高德地图只显示某一城市_干货 | 如何快速制作数据地图？让你的可视化逼格再高一级！...
在数据可视化中,地图可视化是高频应用的一种.我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图. 数据地图可以最直观的表达出数据之间的 ...

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

echarts中在地图上显示label时的阴影问题相关推荐

最新文章

热门文章