jiawulin001 commented on code in PR #16880:
URL: https://github.com/apache/echarts/pull/16880#discussion_r852511946
##########
src/coord/cartesian/Grid.ts:
##########
@@ -202,10 +200,32 @@ class Grid implements CoordinateSystemMaster {
}
}
});
-
+ //Adjust grid.width to keep xAxis labels in dom
+ const [xAxis, yAxis] = axesList[0].isHorizontal() ? axesList :
axesList.slice().reverse();
Review Comment:
>You can use api.getWidth and api.getHeight to get the canvas size
Thanks for the tips.
>But still I think getting a union bounding rect and check if the rect
excced the dom is a more proper way.
That seems to be a general solution, but echarts would adjust how many and
which label to display according to dom size. Check the behaviour below, the
last label is very long but echarts chooses not to display it. If we cut the
grid according to bounding rect, there would appear a huge white margin to the
right of the grid, and user won't ever know why.
<img width="528" alt="discussion1#16746"
src="https://user-images.githubusercontent.com/14244944/163899111-ad423c4a-799d-4202-94c6-85a88d75c564.png";>
So my suggestion would still be picking the right-most/left-most displayed
labels and check if they exceed the dom.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
![https://user-images.githubusercontent.com/14244944/163899111-ad423c4a-799d-4202-94c6-85a88d75c564.png"](https://user-images.githubusercontent.com/14244944/163899111-ad423c4a-799d-4202-94c6-85a88d75c564.png"){kind=link}