apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.49k stars 19.62k forks source link

[Bug] shadows with map issue (overlapping) #17872

Open Imothep44 opened 1 year ago

Imothep44 commented 1 year ago

Version

5.3.3

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=map-usa-projection&lang=js&code=LYTwwgFghgTgLgOgM4QPYHcAyqoBMCWAdgOYAUAlANwBQAJAuhAKaGnUAE79xTcpASgHlBAFQD6ABQCCIgBLsA1OwDkAelxQ4UVVCRJeqnqlUBVAMpSEAKySpCy8gBoOXBDzhmAxjHwAHPsoQcHC-SABcqqoAZrpwADYg1ki4THH4AG4wCIQGhL7A6gDMALSwMFAgDs6c3LxePv6kgcGhEdGxCUkpaZnZuflFxUYO1OQIuHZMpFEAroSecPh27KQwTEjk7ADeLp52SHDsM0hQAFK2hOwAvOxrSADaAAwAujSce4QH7L4wqFZMCyWlxuuEKbiYqCkcQARkwYEgTCcKG92KBILBEBB8ClsHgiGQqC4AdB4EgEGtiPgDnCALJQXxNcxSZSOI4nc52QmcVD-IHXbYuTiLeJMMICzgS9hwJgADzgYuUTPYEh5Mzimj5AFEDvhgJp1isAEyPACMhvILMFEqQM2h0rlCoAIpooOwor9gOx0N6EJ4WDaycRUOlLZLODboWlCABrBVBEJtb3oX3-45uYOqXw89ZwdQuvNafRwMlBYBxUNhuJMKLylQ-YhBZRWgC-1QlcFQqDii18Yp2Yal9Z4MAV-GlwArkpQGEdqQqYsebclcHKnzHQMdM3KizsC4QhpbS_Y6SpMygcTpvfFlerteU9cbR84wCIYoArI9P5-n6ioDKxYUAAcX5fj-RD8FAJCiteA57HEqAjuw9xWgOygAMSFCahQAGwAJxvpOA4qGhAAsb4AOxvtCJGEahaHkSReC4CatFhuhUDQrguFMLhrGSuhTCPFEhRRIBfESuhURSVE0JROJnCSUwgm4Y88nEVEGhMNhLE_vxaFRCR2G4CRhRqehuDkYUjyGuRZloVAH7WdhTZEewzwoewrYefatb3Mosj4A2LIqNg6DKM8P6eOenhqhxVZiiuMxMIeVodl20KoP-MHWmg6AJTASU_pECH4Cwd7pHCixReWP5VjWCp1XArEdleygtaxURMJoW7Qf2REaFoABqpV5dstxdbggiEAkYoxHE-iebp40HAhvVea5JwVVISAAJJ6jwfbNh5R2Sut1pwqV4RIR5fUDoQUDANBioWMqPLaoserSkg4lwCAvhPXqvjiYDCpMuJPx_ACO6EH2HmShD_wLLNcyAsspBZkQcCbLdrnjXAW6XAjUNAujqCY1yuNna5cxE0jboo9DKwY4QWPZa5az4zAhO_Ij0MIEQFXwKT5Moq5J1EVTYZMMAvjQEgVKw7j7DqrCcSK0r7DTqNiXJUr4sDpLkpjtLZi_fFbNTtAEzoGAXYIQqMDENCUCkIu7Bu48FpLZrVsYIIUlFgAGu-3soHgfsB7wACaIdw4tccDVAYrIUrWzsPdj0KlCHEPVAwXpOeSViiRgGGsahqFPHqfpw9T3Z0g0Z56yBdxEX7CWSaJEkbhVe42nGd1z4ABedhN8ehfQdhb5voUhrT73rn97XWcwI3ny6PnE9ioauHd1hJoL0RS-ZyoYDnvgUQIYQ-Bjy3bdAY8JGd1Zh8DsfT22_B5QTJvrfQW-JpAKUVLqyIeYQTSPFfmGd-CpbaEByICGKTVm5b3YIUN8KlCgkXIlAyUMCVCznVOgWATBf5t1wiacijxcKGlwRKfByhHRUhXPgBY7BUBRHYJ_GYwBoQ3zIZPWeQi6GcAYQAMS_tiW-qCTS4UwpRbCgERFjQHgqAA4hCR2_CUF_zFLhCh-iyLKIYbIKAxD8D4AEWKLCNDMKV0NtAmuJ9lA7Q0GgKx7ATQYIooaJRDi8FOKejtOIUYybfR0W3M0QC3xzzfMYwJCodqEAIJBaRuj2BT0KJZLB8TVEqB2hgNJ99HgMUAdhXJy8VAAGlIInHCePdJvjAIYMeHE_x9CEnVLKjMTw0ZKgROgiZYCT82nexUZU5Q2AZhUhvvdDxhlTSATkRU5xdIiCkIGdY2eBjaHtNEZ05QdIYAgHVMkjxb5AKATIthexYyGF0j0FATwEBji8GLB47C2FDKdxIisp6NJWFYmIJBDxuFLmFBwpAvZ4zVlEByLYLQ5yskUMKD3aF9yqTyz0H4XwljNnsB3lcmh5T0UHIBXoVAW48UNLbthaysjLl_IVDSOwWg5n4oga0zuB9SV5OUAAOSYNCcoDcinQUAdPGJoy477L5YKguGgPE2QuXInldyDmCvQOwUxMsUD4DWB4rCxpyKAKZSoTV7BThwn0P0ml0FLlfJaWagVTAtU0llKw1ASrHjNJnn49VcrXXsCjghaMhr8JUMNNpZ1_KEJwAgFw2AXYiBir0ZRY1tyZUwqerG-ACbnTRlQIi_FeFcLYV8c6wQWIvUcq8V3Mu0rq58sENGdUaA9QeKAp3UuUKA0TMEBSOwnallyJns6iQLBPgnILtfVNnibI3JniSvtzj-BoBSOwHaSBTm4ENa06yNDnVmEpfGxNvwoxzuwRXciFcj0nvzVAQtxa7VikAhC9BvzeUTJEJO9Y-gNkvoydcw0JlnU_plBvfFUbWk0MeJmptEyTBaAgEq31vicFfucYNOEwBWUfOgyaNVWaGHDS0bOjxgEJWAWwhhldT0ADqugsQkA7PYEtSyqFmmdfRnM7BSOUnIxy31T94N9wOfRqkHx5ZscAz4m5YLuMgFQC-Eg5zyJfK45hp6EgkrwFQOwfgnrO2fKoVczycd3IGytJZzyKI0QkkQEWQQvI7CkB5NDQkzYqBAA

Steps to Reproduce

  1. type: "map",

  2. itemStyle: { shadowColor: 'rgba(0, 0, 0)', shadowOffsetX: 5, shadowOffsetY: 5, }

  3. result overlapping polygons / shadows

Current Behavior

overlapping shadows by polygons...

Expected Behavior

no overlapping shadows...

Environment

- OS: windows 10
- Browser: chrome
- Framework:

Any additional comments?

No response

Ovilia commented 1 year ago

This is probably inevitable because the shadow is rendered using the shadow feature of Canvas/SVG and it's hard to enforce all shadow appear under the element. See the demo.