Skip to content

[Bug] [Treemap] Label vertical alignment is broken when style.height is set by beforeUpdate with lineOverflow: 'truncate' #21673

Description

@zhoumutou

Version

5.4.2 (also confirmed in 5.6.0 source, not fixed)

Link to Minimal Reproduction

https://codepen.io/zhoumutou/pen/vEgWrRo

Steps to Reproduce

  1. Create a treemap with ~20+ leaf nodes (many small blocks) and 2-level hierarchy (groups with children)
  2. Use a rich-text label with 3 lines (e.g. dimension name, main value, minor value) and overflow: 'truncate'
  3. Use a labelLayout callback to vertically center the label:
labelLayout(params) {
  const { rect, labelRect } = params
  return {
    y: rect.y + (rect.height - labelRect.height) / 2,
    align: 'center',
    verticalAlign: 'top'
  }
}

### Current Behavior

Labels in large blocks are approximately centered (off by ~3px), but labels in small blocks are significantly misaligned  they appear near the top of the block or offset, not centered.

### Expected Behavior

Labels should be vertically centered in each treemap block, regardless of block size.

### Environment

```markdown
ECharts: 5.4.2
zrender: 5.4.4
Browser: Chrome 126+

Any additional comments?

Suggested fix
The core issue is that style.height serves dual purposes:

Truncation boundary (intended)
outerHeight for vertical alignment (unintended side effect)
Possible approaches:

In parseRichText, use contentHeight (actual text height) for outerHeight instead of style.height, and only use style.height for truncation
Or: provide the truncated labelRect.height to the labelLayout callback (compute it after beforeUpdate)
Or: in TreemapView.beforeUpdate, don't set style.height — use a separate property for truncation boundary

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugenThis issue is in EnglishpendingWe are not sure about whether this is a bug/new feature.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions