Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] Gradiation doesn't work in a heatmap with categorization #19935

Open
alvarolmedo opened this issue May 14, 2024 · 3 comments
Open

[Bug] Gradiation doesn't work in a heatmap with categorization #19935

alvarolmedo opened this issue May 14, 2024 · 3 comments
Labels
bug en This issue is in English pending We are not sure about whether this is a bug/new feature.

Comments

@alvarolmedo
Copy link

Version

last

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?code=G4QwTgBANglgzgFwEIgMYHsAmBTCBeAbQgHIkkAGSgRmIBoSzLyAmOhiygZjdI_IBYejSgFYhfAGzimAdmmUAHPPIBOeVXLqa9XtVY7hVbgY5VBJ6mIvkqU61Tn2l9tdeaa329pWb7vLY39mcyCrILsgxyDnINd_Tg94r11yTj8UzkCMkIywjIiMqIyYjLiU_kTy5OF-dJqsmpyavJqCmqKakpqy4RFK3uqOETqhhqGmoZahtqGOoa6hno4JfuXBygkRjbGNiY2pjZmNuY2FjaXKGVXL9fIZLbudu727g7uju5O7s7uL8gVrv9bgoHgongoXgo3goPgovgofgo_ipASpbioHionioXio3ioPioviofioLhoPABdABQoEgsEQAGUMGBsIQIDJ-PQEfRMvQuRAsfQJAp6GZ6DJRRypcwZNzOLyRLyBSp6CIZQKQWKqPydRAJKqIFCxeR6KaICIlRAqIaJAK-mrmMLzZwBRThQqLRI1ebmN6LcKrcbrVb-AKJHrhvz7f7XYr6HjeVKVgnPfcfbzzXD-WnDfx_ba5dbzTJ_cFhYabfynRBmFa0hKrcxPRphTWZFaRJW1Yby4K9e6IHyOTXfNy9QLh8wZcK9ZwrYnBUXOLGixVtdya0T-fQ-0jq7QaXToPBkCAAHYgAC2bKIxAAggAHR-wVAgBAwdDniCsjAwKDYJgPBPi-MBvh-X4QAAFtgYBgDA54AObAc-r7vp-35wBeQE6CBaEQd-ABm2Dnue2BQChoHgRhECPqyj5fjgYDoUhlH4TR17oGAH4AF7YGxYHoZBOBQQArleF4wHxAnUZBYnngA1rBCHIbhqGCQREAIGA6CiXAcDYCAokyUJ34IRg55wKeJGoAAniZmkAEbgOR9lqVRpkQHAACOomGQpMDYIgDk0QAsugUHXjeOEkHhGk0QBwAwAg778e57GQYyIAAB5fm5sXqbJ36OdgADuyWoDBMUPoVnmPqJ56VYFwXpfFkGEVAID5TVHmaQg5EhZBb7ORRrVFRAADiolQIRDHcYN34oOeCDGWNnnALBmAwIh8EGdVcXjegCldQtEAYFAAGoAgXGnfeV7bSAp3YIhiEvheCCnZVF6oLB3UHZ5w2XSALUFb1NGPu-lWnQAYrBl7npg6CnVtiBgHpCCEdNp2_rpy2AadjkwFejlI2tmkBZgiOnXAj7kVAlXYKgSn7bVmmleR_WsizYNDV-iEkTAIAXX9rM0ayQtBR9ZM0clsGpdzGXfjgN4XqdpW_gFrHS5BiDA1Vp07SA6la6DiteW-eMgz1Zssoj56ndej5QTAhOq9r34AArgGAp0ACJlclUum2137adNIs80RonwbpcBQBHZsIWHOAKyHEC-SASeS6dENgMdBvMee03gKdABy2AQ7Ap3haJ132-7XlE9Nb6IPjDdwKgaOgSb1tpwAUghl5QQT6AJ2nnfy09DHZWP40IFBpVoApMMVcPDelegjmObAsGfegV4vrPnkScTpPB-NqMqYFPsN8xDVNbv7d0dg2AqadKUH-_hdWUHvfjQAotHLA6ALolwbgAaV2ilU6SBmKYHjsjeAN5iawTbufTyoV_zoAMklVAp0AAqR1bJnz_p5RyekYIXTfg3CSYA4BQQkhddApVsaMw_IRa-t0bzwQRoLeu6DNIwA9lgB2jlMCiSumg0hmkDJ6y4mlARNF-rgAAFawSUjfRRkEAL6RfqddAG1mIXVOgAJVEoTSy_UEIO0IoRLimAQDbwUdIpRUF4IbVOg1I2z9UCCw_B4huoVgZyw_J9cW11NEuMgrQxCCEhYIPXi_JKo0tGYU6lAfeMD4BQXQI-J654ko6XPDeZaQs6BHnACeRAABheCH5fEOMwOyYgAAJbaa8SChUAjAcSPBanJUEik4gXStq9J0G0xCHTWntJ4AAGWYX0upgzFkDLfEM_p9SynjJmToeZLDdkLJ0Bs5ZBz9mdO6WMkgeyVmbKGdcnQIyelXh4I8y5xBjlrLmYc85oznkPIuX8kgEypnApuScq53zpmTLBZ8o5SzYU_KeTCrZEKznEHuUCnZqKeCgu2dC05OKsVQqma8wFxKXkAopb8r5aKMXkrxVMj5KL6WYvxayqZdLSU0sJWy9FkKuUErhas5luLEVvIFWKslor3nwuZXS6VTKhkSuGZSoVtzuWCvZTyklqrJUapIIqqlSKGVGrefKol5reWct1XytF0rpXKsNf86larwUqpdRU-kp4kAAFVmlID0ghIKcAIANWShAapQhA1kX0qG884akBRqsjGkNYaEAQETQYaNwa43hvvEmoNsa00QF9gWlNub035qzcmnNxbS3VsLam-Nlay21ubRG1tRb231oYNmrt4bI0NvLcWqtvaa39vTYOsdjaK0dqHW2vNnam2LvnROud07h3ttHaQPty7J1LtnVOnd4690QG3QGk9s6e3HpncWo9F7b3tszRuhd6br0Ps3QOg9I7v3tvvbu2dz6b2frfb-r9q7T3voA8WoDH7X3ruA_B_9l6f0Qdnee6Df6wOgbQ3e7DJb8NQZQ92wj-HkOPoTaR3DW78Owcw-Bl9a6iMUZw4x095GQMEeoyutjgHaNUd43h7jrHENrro8RhjonT0YYk-m8TLGM1kf48Js9-GZMKeY5x-TnH1NaYE1Jw9SmVOafg9p-DunTP6bg0xozgmn1Wfo3J5TdmeMGaEy5pzKmLNiec25kjKmzNru85B2zfnw0mZ84eakDIECXhvPgCABAaT9QPglpL0XTwcMvFANLNJqTUhgIRCAAAKGLKAMA4AAHQASQvPCAABCPAEByAAEoIAAG9qQQAgAAeh6xAExjMuKsnpCAKpKUIA4AgMyeRIbbJnXFpALx42xtTa2qgXxX5wCfhDb5XAoAIBjYsv1Mio2fzkTQDAAAz0rXAM3WQQHm6XfejkHt7a8vtsbY2rzYO0pUrLQsSn9Uq11iAdjIDFZgAl8gABuCAUOAA8437vYGqyRRC884cwAANTY7a517r3WUuPkq_VehxWCeE-66AKAfkABctFwAGWhhk98pXTwo4IDASkLXKvXWhjAbKgFivMBa7QUHVO4vYAZ2Vi815sBc8pJViy4FivEAgAAWhIPQWXFWFfc7FxLwnndVkwEaTL08HyzcgEwIro3ABfFroP7f5dB316baBKkxeBpN3ASB7whrmgt03jTQcxaZblsPp57xQAm019L3WYuPLG_HmkifvUgBUSnxLeXuvg5K1DprsP4cQCR8TtHtWoJY9x_jo3hWSvE8V8r-F1vMD4CazK4VFFa9U_TzU2VpOKHFcb9zyrUundU_txAciBl4dFeH9gA-TeTf1Nb-3rVPfe8xZjylQf5OR9K_Hw76fUBZ_14X0v0fK-wJr7wB3rlm-qdJ-6SAPfUEL-Pib0fyfJ-z_z4P83iHjbuvrasQI_oTrLlnm_h_l_vLhPoTi7t1i7m7v1gAPJgBMSXiQBB72IkSHYzSOIACX9S6AZ0NuY23uvuGa-acAoOuBYAEeTW4eA-cAXECAxWmMjUmkxWIA9Ajk4BrIK0YA34r-10eysE1SwSxWvOGSay2A1S-8uc2AxWjkfO6A4hDBUhLWLWMOzu8B9BO-2e2-ser-rB3EHB983BvBEA_BHWRugh0cIhahGhkhBk0h1W6AchChB8LkKhzhzCEhWhOhehdBGBsEyeCWz-W0phbBFhXBNEPBfBAh2AQhThYhARmhbhMhnhEs3hShfh6R7MmRyh2huhSB-hYRYAKAWekRGeUBZh7BnBV0CR1hthlO3WDhwhh2_hRRrhJRHhXhihvhqhhRgRWRwR5R-W3W9BMWUuCW9BTKyuX4quBhJh9A9Bye6xlR1RIATuUxvW_Wkh9M00pBOAOW54AAX9wqcX7jQbRFxGDv-CAKDk0ZpGsqgMXP1EgCkZzIyBnKyL7KePBOQgRMVueOAeft-Hfk1lQG1p0d-AQAOJSHDu7q4aQc5LPrnGNlQPsYnikRAPdOeICbYglueGURAfiSVIgCYswiGjCeSXiemlSQgAoafqSboUbvnqVviTpKVHSdaHDrySGgjk1kEvPJVj5OYeCYKbSTXnYb3tAPiedPyWKVBMrq_FAGCb1j-LSTod1u7j6lhD9iGj9P-IzsxIdgZIhNHJUh8a9jAJANdIjCGhkiGuRIviRNdLQQqQBOmtdClFANUnTPyUKRAAAFRnQgJwAMkUnppbQkminvhqmOJwDFahla7KnBFG76mHGKE6TOTGmNzT66yRnngcLWnMS-I3bFkEnYAqJcTZlz4N7oABlBkXQhoAB8TW34AAZD2ZNoVkVkjoScSYROAVTiOYOQlvGYRDGVTsyTSXyQlkKXOYTsyayfycqauYgQgbiedqkYlgubSXwZLBucic7vse7oyLgAhDfkLFJBQWNnSILE4hANlIds1uaWNovrTDxJUmNo-EnJUngZ1PcVZFWd-OQL7jlnWbgDkvBDxF-AGSVo-fDjxL5NfA4tBVpMArzqDu-UXqDueP7tDlHogADoGbKpHn3hjHElAIYdReNhRREanmRbRdljsYxVeTefGr4veX-dAE-dto4gBI9vgVpNeCAAAI-kHvYHZjYnawRkFYXnTiSXj0BYnT4HzYB_mQAAVAV6VwQuyrbkQ4WIzT7w6QCRR8WHbOT1kg7dbzZNbvGfHYDfEIC_H_HYCAmXwgkYTFYzGnhS4V4Y5QQtYEDkBp4HEZp6RviQCmUo5UFvhYUkWaWdyGRLaXgQBFzYAHaUFrZgSbZYE7ahofiwB_kIykGgWUG4GXhYVTb-7EBwCVZnpSU24OkSXEwwCEHfiukQA06zZUGdQmnoC1XkGB7gD6WlKjYhqNVunfimUfE246QOVg4PGQ7Q5Y6l4QCBWIDBU1ahXV547ymE6onkH9U6Xpx-SCX9XCWvnzZBS1nngPHvbmgITrZjbva2Rjaz6RS0RAXmWgWqVXhZWelyxiVn68WCzlUXi3UZKshwAaXAzYSkGoVWTWmBR4yRm04g1jbFbPkiW4DZTY6wl17z7zZI6tYnVU5OVkHHGdRfE_GwR_GiQuQ-XaQuy1z-W7Wxby4hXzzhWRWNnvnY4wkO5G4xYUXQHtGE40706JbZT0C2T0Dl5ZaYAcH4Adlg5j7y7r481S6K685y3YAq0_mVZq0a14Ba2EQ63xZ347WVGzHy6G2AGr6NKUji4KlS4M763O3c4O7wE5nTa4CiUI0TZUDT7fjJVjayyVnXYiE3UE33Vfn_XTVUHezGXQSXZfZ2XoCrWOWa5i2S4kWi3WhG7u6Da3l8WQDHY26DVB7R0QA7SiQMQhoNV3FTbX4NI25k0lbEX3jr7MHCr81QQQAAA-Y92VJF9tQ9myI9EA2O42hh89E9U9A9M9luA-B1dWi9xhu-29o9u9p4yeI945b5C9RdvetNLlDNblTNYALNbNQJnNoJvtN4p9EVUVSBe5fWdEfkzkKd0l7VkABNIaBk8EQU9Ay2QezdDESVLeoeVOkJ09TBm9w9B9Z9ktdFjBTFdFntCpuD2WjF39SD8-_dg9aDc9B9C9S9Jhp91NEBmWdFDFqD5FeDjZNFFFxDEAO53WyD69rDLJW96OO9tD-9Ijh942J9GDDDnDdFLFhDQs-DPpTDRDrFk-F5cjHFmeRhqjQsl5_WAAandaJWlYtnGodnBF1FQZcdcc1RAF7Bae9YJPFTBWoo9qtRZIgJY8xLZCYhePzAlsVrrNxPQIgLkmE_1I-G1lbUbveFY7ZObTpFeMVo2e1oqZXgzsE9dI-Jrl5ClNxG1v1q3Lk4vRHfbso4TvjULH5PQO9dgNlDE1rSE-movfU--RGSU0blmXQY-JpE1jLddCAh-I-AzjLd1q3QMl-AzsQDk8QA7pUztGbmM42TkzMyIAAKTzOT6VPZT3jZTwArMKkIC2S0wzPgTPRcRuSNk0ywAIDxOGRHMEP0LMIM5hzYCNkVM3M5KlQM6ERCwGQLNG62T7OHOyNaSnPS4kAXOIRXN0CNkOIpQM7exdT-NITKHmg32pTuWeWs0AnP1-VfgBWO1BV80YOf1iiG4Km3PJQPMgBPPUs_NvNowfMKlfOMuvNg4AussIGVNJRwCs1QBBKjPgsnNnMQAABEgFjMAcBkErlT3WMLXEzUDOBAEriq8rErwKmrpKmreyErHtjZhJDOpoRrOUDO7ojZWLTizLtTjZyrnpMz8FUkSFWyjZAEhECA5zYNN8jZCEaL_MDLvefW50XEqrxAAAxNDNG77P_EUFG9GyoNUjkAm9DF2Neqmw4AUAm__P_OqDwDm0gJwEBlG77L7GCHkAm77CIPwNDAW9G9UveNOPW9DNUhoPG9G0W5QC2_ePcNm4mwCJUFG0gAoNUt2zoFGyIDIGO0O__NDBIDOwW__BICIBSMQF_cGz1qG2AOG6m0mym9G7m_mxOwO-OyQBG8u6u92xu1Ttu2M-q7KlABK3TgQJG9G9DPuy20eyUAmySGe5G5e2ux7RK8-8QINkBLw7uTs0buAyq4lmkxwxC-K8QDBO-BJHkgq4Toi_S4o5RcKph4no4uREGxy781pCywR6dYcagaXBAP_IyPgqgRAC0veNUv_KFKgYyBAAAIo-r_zTb8ehR8cMcmL8f_yzIRoADLvsAAkhNEx7G9QRGqgRxxALMveEgOJyWvx4277APdUj6veL7CYkZ6gYh3nlxBJB5bBDM-1o5PbvCwQ4TpMwRDMwhFZDgI505xAOVJgPPBa5QJR9MYYh1Jy7M2jI1KlNswQ-ywQ7LFeIyCcwBCR73iTJUayWGyQFzNF2y5Rz-ZFFZHACl0gylol7ZMl-C4y3XaVEgLTju8WEF4TvQtVxl_V8QGAIhM5MVuaD12aJViIC1jlzF4h5B0gZh-M4TmK1Cyh4ZAgOh15wqdhxbmw9loYZR51CVFAMV010y-R3a959FdUjR3Rwx0xyx2xxx1x7x_x4yIJ8J_gqJ3RxJ9UtJ3Jwp_xyRUd6p-p5pxJ4p7p_p4Z8Z6Z-Z2tWAFZ5zLZ_ZwtwQy5xhG55ZGbmlKD75_58WKawdwYrBKF2R-F_fFFyN5R_F2VxVxN_OQsSApl8QPVGAC-PxIT4h_l8DGC2T4TsT0l1C6z1Ts14jDV3VwF4191jz8wq1zMx1117181n1wN0N2yyN58-N4h1N067N_N5R0t7h5sYhxt8R5Vzt5y-8416icd_R4x8x6x-x5xzx3xwJxAEJ6b491py97J_J9p0p190xz91p_90Z4D0ZyZ77GZwd-DhDzZyQHZw5413D9MyQO50jzDwqaj1BAFxj951j2ADjzM2HJF_1LL7y4h-z-V5z6D2l0xKLyQNvH5Hn2N4zwfAVyz6D4X6T6D0L5FLz7V9HALy315G3yL5T21-LyAN12aCP81v14N6D6N1B73rF1Tqz8ryQKh3N0bAn1h--Dh1g9o1nut0R1t3r63wbxR6D8b7R6b2dxb5d9bzd3dw72J8969674p59yp57xp97zp77xGkDwH0H95yH--JD3D7Q8o-2CKZueAR4edkeB3JPin0a7p9M-JAbPhc2r48MiepXDntt26yl8JC_fGZjtBfj2wGeTnJnoV0wHw50BRfMga32q4d96urYbvsL1Kjl92unXIfpLx67j8UBJDYbnLypxRUXc9uIAA

Steps to Reproduce

1.- Create a Heatmap using VisualMap.
2.- The Heatmap works correctly without categorization
3.- A categorization is added (lines 97-100 & 157,158 )
4.- The gradiaton expected doesn't work: a list (for "Critical" category in the example) is passed and it doesn't work (black color in the background), a string is valid (for any other category in the example) (line 167)

Current Behavior

The gradiaton expected doesn't work: a list (for "Critical" category in the example) is passed and it doesn't work (black color in the background), a string is valid (for any other category in the example) (line 167)

Expected Behavior

The gradiation of heatmap works if a list of colors is passed.

Environment

- OS: Linux
- Browser: Chromium / Firefox
- Framework:

Any additional comments?

No response

@echarts-bot echarts-bot bot added en This issue is in English pending We are not sure about whether this is a bug/new feature. labels May 14, 2024
@helgasoft
Copy link

the Minimal Reproduction is hardly "minimal"...
color: {"Critical":['#FFF9C4',... is not a valid syntax.
dimension is missing.
Demo on how to use VisualMap with categories.

@alvarolmedo
Copy link
Author

Hello @helgasoft, thank you for your response.
In our case the problem is not using categories in VisualMap, the problem is using them in a VisualMap with Heatmap.
If we don't categorize the heatmap works correctly, but when we try to use categories inside of these VisualMap + HeatMap the gradiation of the heatmap is not possible.

@chrisnoisel
Copy link

chrisnoisel commented May 20, 2024

having the same bug, here are my minimal tests cases :

looks like something related to heatmap is trying to cast the categories as integers and it fails when it comes to letters. Maybe something like this ?

function getIsInPiecewiseRange(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug en This issue is in English pending We are not sure about whether this is a bug/new feature.
Projects
None yet
Development

No branches or pull requests

3 participants