Implement Decal per cell.
i. Within the data key of the Heatmap series, each index should set the decal.
// Data key value of the Heatmap series.
data: [
{
value: [0, 0, 1],
itemStyle: {
// An empty object seems to be enough to showcase the performance impact.
// Though realistically each would be costumized as per some metric.
decal: {},
},
},
{
value: [1, 0, 5],
itemStyle: {
decal: {},
},
},
],
Attempt to interact with the Heatmap.
i. Zooming in, panning, etc is now significantly slow.
Current Behavior
As soon as the decal is implemented through the data key, the performance is severely impacted.
Which is not the case when applying it more globally through the Aria at the options level.
Version
5.2.2
Link to Minimal Reproduction
https://echarts.apache.org/examples/en/editor.html?c=heatmap-large&code=DYUwLgBAdg9glgZxBAvBA5uAcvJAJEYABxACcAKASgG4AoUSADwBEBDMV1CAbQF06GEAJ5sOXPnViIQAOiQgAJuQCy7ABYzSrKApgBbKjVoAzAK5QAxmDgwoGEFDLsQo1uTBrwrADQQ9cKF89VkZKCABvWggIQQV2TjQJKIhjGFIIckE4LgAGaghsgB40ACYcvIKAakqwyOjo1PTM8AgAK1z89uKIAEZyzura5PqIAHpRmJbGLnJg6YBaPwCwgCoCsYgynIhKpag6EejxycghGbmIRf8oVbaNvu3d64PDuI4ZIlMENXI6w-iAG6sYCmEAALh4cF8rV8UiQHzIwACJXI2QmABYctCNmUwrscjIAKy8bzDQ7HCAAQQUCkUEA8yAARoRgDAAO4QbQKCAKRCsRmgblEUgwdCkEAIBBwAEgMkjCnRADC-j0DkgDIgzOArI5YBgEAstmMcFIenpanYEGFovFkulyEQ0Bg6s8EAQMFABtYX1l_2icDAID0AGUwEJQBC_n6eSALMDI3LDgBfRPRFP_JNGf7HN6sD5fH7cKFtWFpYLAZiIMDuTwcXyhCBrWCm4GVhDVhl14SUXhZ-rp-oseL576ovsDxoZQTtNAVLq9fptQYRMkiYefUetcfJcVgUykOy5ugp2LxLiYRxaQOucglXzzQm-QlGGBEay2Lh_PUe6xESNJ0lokYSlGEQBMRjDEgIQAcjjQN0DSIRoMA-pcwhIcOGSADkiEECwJXCChCgiBYOcBDSCQlDojQ4RXCwlCAUQUxgVUP8CPqa4ISxMk5ghHoqK9YALFMYB-QjelSFBATxWBaxVQhYxgSQASAgAJW0TBwMOQ1WVICFuFTEiAGIAGYehMgA2ABOQlkMM6CjPRQkAHZCUZdE7OjBznPRVgaR6Ty_Qc_kFCskArMC_4HJAHJjBM4wAA5IsOBzjDS4xGWMZKRlSkAYqsnJsvqVK4hACyAoEnKjOMdELIUdETKK6IHIUZyTJyEpnKa4zWEJcoSgs6DE14MkB2w6IkFIOAJX0sko3qKBWHkkiAHFvTtbQisg8ESM8dhgiIIqaNzSqICDIgLSlBAtP-AMg1DcMdvm_5GTSWlSGVXSYNMkzGtOkZXtId6AHU4AUDw-MMgcRnG8kJmtMUJSlGU-PKbj_gR21kZ2xTgGUxNtDgYJ3ygBSlN9ftkhGpM6HGOn6YZxmmeZlnWbZ1naGOEhSCROw4WQTxiDIFIRTNNQwDAIhrvGdAAzUUxGRkQ09FGVoYCQC70FGfnWgQTn2YNw2jeN-mTHMKwbDsTAwBwaQCCFighmiCxRMlCAVq0bl5sNKB20kqw0nIRhfCEXwAC8ncODxEBkaY0EYF4ILUGOzjQIRE_qaOEBkMOuDDjPoZ5Z0UWD7t2JGXd9zsLPY8bCBpl2GuzjWdPRrJXQwBMoOQ_DyOK_AKvzRj6Y1gbofs-b4QdnHnO6_ztu02SH32wwT2TPEMlHA5D2_PIfjel8HJKAErf3c98h5n3_ej5PkBt_P_fL8P4_N7vs_d6fy5r5fkZT53pRr6-B6D_Bab9_4X0Ab0EB0Q_4P0PveYBt974f0gZfaB0AwHnyxAfKBSD35KGwZ_RBr9kEEKAQg9BsDd6EMfsAqmLxl6QCIBvEYPRCRXwstg8yzlfBWX3gVIBj5ehmSASZXwZR-FCKshZJ8YjehWXROI36vgeGbBKEInomIBKWSATkOR7VfDWSAeiO8EAEq8Ksr4EyqiShaM2FfbBJQ5E9AERAGRvR0TmM2OiVRPQygCScYoiArl4GbHcS41RFlTEKPEYSUxJQXHiL0UAnoqiTIaP3iZUxLkgHOTSWIskCUvFON8eiSxEBCTuISr4nySSgHqNEeE5yHCvEWS8akoRtTegWU6fxMk5kgnmXKZ48RviLLuLycY8JhJikiLMc4no-8SglHKX40xnDxGLNEQUkYTjHH-IXFI0x6J96EiEbVcRTlfB2NsYMjqxi5GEiCT02JhjnHlQEksnoVTsFtSSeU5y4SslAOqUkrxCVVntKMZscoQDpGiI0QY_p3yQXtMJOUhK4SLJ3K4TkVZVl2l_N6JiqxhiglxM2TYgasT0b1D8YMpxT4kmmJMu0nxKT2nUs2Gc3wCVTEJSEQk-JOQbE5Hcei8RnUBLsu6U-QlILTE9AheIrxJjJXOISs45yjjzIpPKbYtF8TrmKP6U8oBFk5HaslVfQkzicg2o0RZVRDVcnRPqfqll-rbVwt4eY_pOR2l9BUas3VaiglOMVc5dpAqUmKpyOGpVlz3FWSpcU9hViTW7LVfIuRTjilBo8QyuFV9nKrKiZc_eCVTlXyuZsdJlzVmZvqE41ZIrrn4viZoqxV8q1wtbdM3xCUglDqSYMwFKSNEJIEn1a5k7nWCMcWa4Rsz3FlCkbm5ZKTnk2P1UE5y8SXX9JOfU9pNkVGtNXWwwxNrwkJRyPQ5IxwAAq-pxR6BgDKc0yBHB0knAEWk0w2RaCIEQAI6BfC6AVp6DU3M9CmA4CTekYlkCgCgOgDwyRBCwa4KfSkpAtBCHIOwkofZBBij8gABRw2_PDBGiN-L7M-5OCACgICgNBSAnAZQUQwDAGA3J5C8jQykc2JNfCMngwUSAbI0gAGsWMwFkzICAABJSACBTAgbSGAFjJQAB63zH0TF5GlMgao3R5W5ECEEEplPAymoGN0-hwDJ2E8yCWws4DGGEDAUwGC6TvvFBZxQ2dkhmEsIhwT5BBN9wKN56LlmIAAD4IDbAAGRpeC9yQoUDy71GOMGOM0HXSCYgL5sAiZSsrDQD021FkC5klK2gVQHgZDGFZIHGLGcvMZFKzl9RFlYsTUSwAHzQH1nLCUGsjEnM0SA2RZz5CKNy-rVQah5eiIIAEGd_TxeyJl4BG36gAi4EQIsvAIB6d64lzL6jnw7YgEmM6eNkDPWO6d87l2MgJbpEllLCUwi3bOX2GGiZYOfbQOD7IuwBsXbQNtxM5GFAUYh6vSjRZp6w_PGvbgJ2ACkvQSj8AXo95IUWj4vGOEZan1OIAUcRAEJ00g3R7jSmF0TlsUh-RAO4WLlcDz0jrpANYwuMii_cHXCylxejPmnn0bcDQOcflAKQIg5AfCal8GAPnA8Bd72l9ruunBG510ZC8AcxwSjMDpwzuwtskDs4i5z7mvMS4h1i8cAAYv-iA5gAyrzBgaFkBpbAcACGBq08AoAVZGIIAAGlwFrGh2t8YoKEU6ABNRP6g2sdYoEIEHYwJgrRaOKUS1hP2MDOIaN6ARnAKe80QKP0m5aM48JaCwLIyRx3rtLuPGdU5T0WBnjOxx7OsGYRqAI8Fhad-1Cxy0d3evlhVwUaPIBMDpG5jYbkcY7DMjX2AEUChTCd-5J4cUlAyQJ7QAnoHhIM5Z7QFn-_o-JiKmBMJcv37cDIB9kfuACTEmFjYwUWM6VgCwNQMrbzDUVIfcEPA8MgPWWPFoKAcobHdHBPXYcHDPXgXgGQDuN3bsDOQQNAnoDA5HbgLAq0MgPQbgLPXYHoPAgg4ubuIfKBEg1AvoCglHag8g7A2g-g5gwgoOaXfeAvTgyAKARZHgqguXaeHAuXYQ1ghYHBM4RYYBN_CAZUPQT4RzWA7nA0fcT9azUEFINIeuMkQQPzNARSWkIOQvY4FTdfVXD0ZwL9cw-A20ESHTMkfnOwFXNXQI8gNA7BaQ7BUwY-SYVXEI-1WELZX3KIuwnnAvBXCAfwvLQTASF3ZELCY8IAA
Steps to Reproduce
Current Behavior
As soon as the decal is implemented through the data key, the performance is severely impacted.
Which is not the case when applying it more globally through the
Aria
at the options level.Expected Behavior
To be as performant as when applying it through
aria
.Currently, this is the only option to customize the decal per cell.
Environment
Any additional comments?
ngx-echarts is also being used.
But I suspect that this is not the reason,
as replicating this on the ECharts Heatmap large dataset example also significantly impacts performance.