Deohgu opened a new issue, #18307: URL: https://github.com/apache/echarts/issues/18307
### 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_4H JAHJjBM4wAA5IsOBzjDS4xGWMZKRlSkAYqsnJsvqVK4hACyAoEnKjOMdELIUdETKK6IHIUZyTJyEpnKa4zWEJcoSgs6DE14MkB2w6IkFIOAJX0sko3qKBWHkkiAHFvTtbQisg8ESM8dhgiIIqaNzSqICDIgLSlBAtP-AMg1DcMdvm_5GTSWlSGVXSYNMkzGtOkZXtId6AHU4AUDw-MMgcRnG8kJmtMUJSlGU-PKbj_gR21kZ2xTgGUxNtDgYJ3ygBSlN9ftkhGpM6HGOn6YZxmmeZlnWbZ1naGOEhSCROw4WQTxiDIFIRTNNQwDAIhrvGdAAzUUxGRkQ09FGVoYCQC70FGfnWgQTn2YNw2jeN-mTHMKwbDsTAwBwaQCCFighmiCxRMlCAVq0bl5sNKB20kqw0nIRhfCEXwAC8ncODxEBkaY0EYF4ILUGOzjQIRE_qaOEBkMOuDDjPoZ5Z0UWD7t2JGXd9zsLPY8bCBpl2GuzjWdPRrJXQwBMoOQ_DyOK_AKvzRj6Y1gbofs-b4QdnHnO6_ztu02SH32wwT2TPEMlHA5D2_PIfjel8HJKAErf3c98h5n3_ej5PkBt_P_fL8P4_N7vs_d6fy5r5fkZT53pRr6-B6D_Bab9_4X0Ab0EB0Q_4P0PveYBt974f0gZfaB0AwHnyxAfKBSD35KGwZ_RBr9kEEKAQg9BsDd6EMfsAqmLxl6QCIBvEYPRCRXwstg8yzlfBWX3gVIBj5ehmSASZXwZR-FCKshZJ8YjehWXROI36vgeGbBKEInomIBKWSATkOR7VfDWSAeiO8EAEq8Ksr4EyqiShaM2FfbBJQ5E9AERAGRvR0TmM2OiVRPQygCScYoiArl4GbHcS41RFlTEKPEYSUxJQXHiL0UAnoqiTIaP3iZUxLkgHOTSWIskCUvFON8eiSxEBCTuISr4nySSgHqNEeE5yHCvEWS8akoRtTegWU6fxMk5kgnmXKZ48RviLLuLycY8JhJik iLMc4no-8SglHKX40xnDxGLNEQUkYTjHH-IXFI0x6J96EiEbVcRTlfB2NsYMjqxi5GEiCT02JhjnHlQEksnoVTsFtSSeU5y4SslAOqUkrxCVVntKMZscoQDpGiI0QY_p3yQXtMJOUhK4SLJ3K4TkVZVl2l_N6JiqxhiglxM2TYgasT0b1D8YMpxT4kmmJMu0nxKT2nUs2Gc3wCVTEJSEQk-JOQbE5Hcei8RnUBLsu6U-QlILTE9AheIrxJjJXOISs45yjjzIpPKbYtF8TrmKP6U8oBFk5HaslVfQkzicg2o0RZVRDVcnRPqfqll-rbVwt4eY_pOR2l9BUas3VaiglOMVc5dpAqUmKpyOGpVlz3FWSpcU9hViTW7LVfIuRTjilBo8QyuFV9nKrKiZc_eCVTlXyuZsdJlzVmZvqE41ZIrrn4viZoqxV8q1wtbdM3xCUglDqSYMwFKSNEJIEn1a5k7nWCMcWa4Rsz3FlCkbm5ZKTnk2P1UE5y8SXX9JOfU9pNkVGtNXWwwxNrwkJRyPQ5IxwAAq-pxR6BgDKc0yBHB0knAEWk0w2RaCIEQAI6BfC6AVp6DU3M9CmA4CTekYlkCgCgOgDwyRBCwa4KfSkpAtBCHIOwkofZBBij8gABRw2_PDBGiN-L7M-5OCACgICgNBSAnAZQUQwDAGA3J5C8jQykc2JNfCMngwUSAbI0gAGsWMwFkzICAABJSACBTAgbSGAFjJQAB63zH0TF5GlMgao3R5W5ECEEEplPAymoGN0-hwDJ2E8yCWws4DGGEDAUwGC6TvvFBZxQ2dkhmEsIhwT5BBN9wKN56LlmIAAD4IDbAAGRpeC9yQoUDy71GOMGOM0HXSCYgL5sAiZSsrDQD021FkC5klK2gVQHgZDGFZIHGLGcvMZFKzl9RFlYsTUSwAHzQH1nLCUGsjEnM0SA2RZz5CKNy-rVQah5eiIIAEGd_TxeyJl4BG36gAi4EQIsvAIB6d64lzL6jnw 7YgEmM6eNkDPWO6d87l2MgJbpEllLCUwi3bOX2GGiZYOfbQOD7IuwBsXbQNtxM5GFAUYh6vSjRZp6w_PGvbgJ2ACkvQSj8AXo95IUWj4vGOEZan1OIAUcRAEJ00g3R7jSmF0TlsUh-RAO4WLlcDz0jrpANYwuMii_cHXCylxejPmnn0bcDQOcflAKQIg5AfCal8GAPnA8Bd72l9ruunBG510ZC8AcxwSjMDpwzuwtskDs4i5z7mvMS4h1i8cAAYv-iA5gAyrzBgaFkBpbAcACGBq08AoAVZGIIAAGlwFrGh2t8YoKEU6ABNRP6g2sdYoEIEHYwJgrRaOKUS1hP2MDOIaN6ARnAKe80QKP0m5aM48JaCwLIyRx3rtLuPGdU5T0WBnjOxx7OsGYRqAI8Fhad-1Cxy0d3evlhVwUaPIBMDpG5jYbkcY7DMjX2AEUChTCd-5J4cUlAyQJ7QAnoHhIM5Z7QFn-_o-JiKmBMJcv37cDIB9kfuACTEmFjYwUWM6VgCwNQMrbzDUVIfcEPA8MgPWWPFoKAcobHdHBPXYcHDPXgXgGQDuN3bsDOQQNAnoDA5HbgLAq0MgPQbgLPXYHoPAgg4ubuIfKBEg1AvoCglHag8g7A2g-g5gwgoOaXfeAvTgyAKARZHgqguXaeHAuXYQ1ghYHBM4RYYBN_CAZUPQT4RzWA7nA0fcT9azUEFINIeuMkQQPzNARSWkIOQvY4FTdfVXD0ZwL9cw-A20ESHTMkfnOwFXNXQI8gNA7BaQ7BUwY-SYVXEI-1WELZX3KIuwnnAvBXCAfwvLQTASF3ZELCY8IAA ### Steps to Reproduce 1. Create a Heatmap graph with at least, 2300 cells. 2. Implement Decal per cell. i. Within the data key of the Heatmap series, each index should set the decal. ```javascript // 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: {}, }, }, ], ``` 3. 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. ```javascript // Option { aria: { decal: {} }, series: [ { type: 'heatmap', data: [[0, 0, 1], [1, 0, 5]], }, ] } ``` ### 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 ```markdown - OS: MacOS Ventura - Browser: Chrome 110.0.5481.100 - Framework: Angular ``` ### Any additional comments? [ngx-echarts](https://github.com/xieziyu/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](https://echarts.apache.org/examples/en/editor.html?c=heatmap-large) also significantly impacts performance. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org
