Version
5.3.1
Link to Minimal Reproduction
https://codepen.io/littleKoi/pen/xxpJJLy
Steps to Reproduce
I've set Grid.containLabel to true, but the axisLabel is still out of the container, causing it to be truncated.
Current Behavior
This is an EX: ex
Expected Behavior
If grid.containLabel is true, all lables should be included in the container during echarts init or resizes.
Perhaps the spacing algorithm for axisLabel should be optimized for the length of the lable at the end
Environment
- OS:macOS Monterey
- Browser:Chrome 96.0.4664.55
- Framework:Any additional comments?
- No response*
4条答案
按热度按时间wtzytmuj1#
This is caused by a bug in the logic of
containLabelhere:echarts/src/coord/cartesian/Grid.ts
Lines 188 to 204 in 2a67f86
| | if(isContainLabel){ |
| | each(axesList,function(axis){ |
| | if(!axis.model.get(['axisLabel','inside'])){ |
| | constlabelUnionRect=estimateLabelUnionRect(axis); |
| | if(labelUnionRect){ |
| | constdim: 'height'|'width'=axis.isHorizontal() ? 'height' : 'width'; |
| | constmargin=axis.model.get(['axisLabel','margin']); |
| | gridRect[dim]-=labelUnionRect[dim]+margin; |
| | if(axis.position==='top'){ |
| | gridRect.y+=labelUnionRect.height+margin; |
| | } |
| | elseif(axis.position==='left'){ |
| | gridRect.x+=labelUnionRect.width+margin; |
| | } |
| | } |
| | } |
| | }); |
Echarts is adjusting the grid's width by the width of yAxis label and grid's height by the height of xAxis label. But the overflow in width caused by xAxis label is not considered.
This is a logic bug which fails to achieve the goal of option
containLabel, but can be solved quite easily by adjustinggrid.width.@plainheart@pissang Do we need a PR to solve this? I can submit one if needed.
6ie5vjzr2#
This is caused by a bug in the logic of
containLabelhere:echarts/src/coord/cartesian/Grid.ts
Lines 188 to 204 in 2a67f86
| | if(isContainLabel){ |
| | each(axesList,function(axis){ |
| | if(!axis.model.get(['axisLabel','inside'])){ |
| | constlabelUnionRect=estimateLabelUnionRect(axis); |
| | if(labelUnionRect){ |
| | constdim: 'height'|'width'=axis.isHorizontal() ? 'height' : 'width'; |
| | constmargin=axis.model.get(['axisLabel','margin']); |
| | gridRect[dim]-=labelUnionRect[dim]+margin; |
| | if(axis.position==='top'){ |
| | gridRect.y+=labelUnionRect.height+margin; |
| | } |
| | elseif(axis.position==='left'){ |
| | gridRect.x+=labelUnionRect.width+margin; |
| | } |
| | } |
| | } |
| | }); |
Echarts is adjusting the grid's width by the width of yAxis label and grid's height by the height of xAxis label. But the overflow in width caused by xAxis label is not considered.
This is a logic bug which fails to achieve the goal of option
containLabel, but can be solved quite easily by adjustinggrid.width.@plainheart@pissang Do we need a PR to solve this? I can submit one if needed.
Thank you!
If it's just a custom chart, adjusting grid.width will do the trick.
However, in real application scenarios, the length and number of lable on the X-axis may not be determined, so adjustinggrid.widthis not elegant.
And in order for all data not to be truncated, there will be too much white space on the right side of the grid.
c3frrgcw3#
@jiawulin001 Yeah it's an bug exists for a long time. A PR will be great!
xxls0lw84#
Sure, submitting a PR.