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
- Create a treemap with ~20+ leaf nodes (many small blocks) and 2-level hierarchy (groups with children)
- Use a rich-text label with 3 lines (e.g. dimension name, main value, minor value) and
overflow: 'truncate'
- 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
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
overflow: 'truncate'labelLayoutcallback to vertically center the label: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