search

apache / echarts

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

[Bug] Wrong label placement of the pictorial bar elements when symbolRepeat and symbolClip is used #20028

Open battlebeast01 opened 2 months ago

battlebeast01 commented 2 months ago

Version

5.5.0

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=doc-example%2FpictorialBar-symbolSize&reset=1&edit=1&code=G4QwTgBGD2DGDWBTALhAvAKAhA5ABxGQAsAuAejIFkBaAJgBZ6A6AZgE4A2AGkdbbdgAGLsMFN6AdjpM2LAIzT6tKRyYBWObVi0mADjltquprVpyuLEwrlqmEwWwtXqNuw4DOtiWzVc5rXRYuLx8uCVZaNQBhOhZw_V0LNiYObzpedm4M_nTmTJ48_gAvCBpaDjE483oxXWUhEWpLXX0XHTZ6Dia9VrljeQFBRTluMXLaamY1DlGUjkNVDQkiOXCOXXohcTlzfx9aERSJX2Y5QXpD1N9FgwbbWjYFZok_ftXu3Re-1lWACToKqwJHISmU1MwJPRfN8fHJYC4ZI4hpYKkF_KkuijBEFLJDNsIdIJ1n4UponHinKjyYxYHsWiJKYIJuiJNwsRNcYwAMp0NQ6Y5fYyw3kQqGvGQaUG82x88w6Uy6YDUWwOXQrcRM4DMTgCdHYklmIK2DrmFXzMIyQS7HRqIgucKCaIA_xxILhV288IMXyWNRqXTS9RmLjy2i6IplDgql7ZQaNRYSKQQszUBNSOTMXScITKmRKYJ2DrUd2RAveejFiJqdyVWQW-j0yxmXZeQS6GLlGXsHj-TqGTtMQQxwr9qOD4d8NhSyI6FhZWw2AA2CNWXX8pgAMiK7FmeLpl73PpNB_MD4ODCGmDsOGeGwHmuUiMYiRItzPWPOr2oijgANwYaA8GQABLaAADt0AgABvLAIFgaBF2gMASAgABtHAAGIACMsMEPD6BwLhcAwgAxEiABEGwAQRwABdLhYMXRAAHNEDAgATFCYOwbB2MIEAUPQvBgNgZAkOAkBFwgRAmIAWzY5BCNwMBEAAM0QFSwNgRAICw8A6NggBfBjsAADyo0zgPcLjYN4_jBJwEAlJwLDnNgZz2LokyeJASz3AAFRE-AbJ4nj3CIaAAHcUNUyT3EQWyIGMxLfKsjcQCwmSQtCiBgLA5ANNARcUMERLDKM7yAE8LKs7LsFkvKSu87B3DwRdgOQDc8sQLiIHCqKYrinTyuwZLsGYsBgM46DEqY1TkBQmpmqgYDmKIBaIDOCrYPiybEGstDEu4nLkEqvAetwYTRPEySACF9OW7AwJAeSUPwESxMmyTpLkhTCMSlrKtkrCEJQmAEBQR6ICKFCzih2B2rwFDkDAABXRAocXDKspmnKwoi6KIBR9GoewPBoHcDrQLAt7oFR5BKfYxAcABpKob45ABMOvHsGOnmICK9GUJYA5WdC9wgZBxcACVEHOwhkbRjGxbCyWEKiRHFZJlXAeBhCuWAooLpwewAFIcAgCgIAAUQAR1R4CioUonoDQk3BHNoj3fN2idctsgICojjdOgYgIEiqaw5AYOiEQVb1ogc6wG0_KQFYiBwB02BJNgVGsYK9jdJAeL2L9q3wKJ2Pw8jogIGgVSoDUjS2O0ovIEi2OIIlvWZblxBCAgVGS6YFWRpy33QrGiBfcM_8rao9jC6Z9xYEmoDqfcEfVNRrSQIrkBF_I_bV-A9fwPcAAKABKXGBfACBl5Ps-wPcSDUMS9-8ZwbupYNo3BIAERqA9gAoiACzggNov9L-_kiAD1qtAnKOBgGmzrg3FS6lNKtz0u3GuiDQo4Agag-ujdMEtx0jgiAsd47ICYCzUK9EP6s2_mrRcf8LqoSASAoimhBBQKhjgWB8DrL4J4sgj2aDSHNy0hQ--Ed2LEC4KI7AOBVLAVMogQu1C1qoF4XQxKjDQroR_vrQ2F1gHOUQPbR2klnZiTQsAoiwCoGGJ4p_JBJi2FmJQgAs2ADlG4CsQ7J2-UXZoV8dwiAETTYAP4cwgJOAADqnc-qsNlvLVAQ9NFERBsQBJ8io4xzjjoxOGkU6c3TpnBJ2dFy53zpoouJc64QWIDpAptd64JIwdI7B4B9EMNgrRf89VKpRDgWAWh8VkAAHln4XyOqzCaIA8BEBEihQCe8wJMHMn5JgHMQBMFkssi-29d7UwgBfDqiBZIADkXoY1yhxRApkb58xyipZAqMwAQTeXjU6503oTTpngAJoVyaU02ShWSozxm0PgmBYAGlkD-WgAABXUTJC-OAJpTSUqhPKTNTJEXsLRK-pMeKwFWYudimlBJ-15vSni_zjYFVMopcleM5obRwOUjSoKeZiSRrgBqi8mL8rxu4U6TE6r8xOs8jaj816bPcPip5plaJMAAFbQDyligAOmBHAZLGWhTUYuYqxEcJ4XOPQ2Vk8OU5RhptK0jKx78wnjzWerNDJXzKstKCfVgJMXylrYasEr7_nKlMwK8k6bIBOTvUS5zr63wPuxI-K8lUb2vsMiA0KxngFoeBLFqM8Ac00UpNNGan7KojRgYyzrBARqAA

Steps to Reproduce

  1. Use a pictorial-bar series.
  2. Set symbolRepeat and SymbolClip to true.

Current Behavior

Currently there is a gap between the clipped pictorial bar element and the label. ( as seen in the example the value 32 sits above the value 35 on the Y Axis.)

Expected Behavior

The label should be positioned right above the clipped pictorial-bar element, there shouldn't be any unnecessary gap between the pictorial-bar element and the label (32 in the case of the above example.). It should behave exactly the same way as the regular bar chart.

Environment

- OS:Ubuntu 22.04
- Browser:Google Chrome
- Framework:Vue 2.6.14

Any additional comments?

No response

fandi-1205 commented 2 months ago

Maybe you can try this method. Check the official documentation and we can find the location setting of the label. image

You can change the distance between the label and the graphic bar element by setting the label's position.Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box. You can set it uniformly or set it one by one. The effect after setting is as follows image