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

wtlkbnrh  于 4个月前  发布在  Echarts
关注(0)|答案(3)|浏览(40)

Version

last

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

bpsygsoo

bpsygsoo1#

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.

vc6uscn9

vc6uscn92#

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.

uyhoqukh

uyhoqukh3#

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 ?
echarts/src/chart/heatmap/HeatmapView.ts

Line 44 in 75dd430

| | functiongetIsInPiecewiseRange( |

相关问题