apache / echarts

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

[Bug] Heatmap with Decal in data key performs slowly #18307

Open Deohgu opened 1 year ago

Deohgu commented 1 year ago

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

  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.
    // 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.

// 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

- OS: MacOS Ventura
- Browser: Chrome 110.0.5481.100
- Framework: Angular

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.

Deohgu commented 1 year ago

This is likely not unique to the Heatmap, more so,
any graph with a lot of decals if applied through seriesdataitemStyle.