Open pasqualtroncone opened 1 year ago
我这边也遇到了同样的问题。没找到解决办法,只能去手动计算刻度最大值的长度,然后动态地计算出相应的nameGap。
Basically what @zhaolei2013 states is true. I had the same problem and I was not able to find a way to retrieve that value. My workaround is to use the following config:
/** This represents the space dedicated to the YAxis name label which is required to avoid it overlapping with the following axis or overflowing outside the canvas */
const SPACE_FOR_Y_AXIS_NAME = 40;
/** The space reserved for YAxis tick labels before ellipsis. This also allows us to define part of the horizontal space occupied by one yYAxis */
const Y_AXIS_TICK_LABELS_MAX_WIDTH = 40;
const options = {
yAxis: {
name: "<axis_name>",
nameGap: Y_AXIS_TICK_LABELS_MAX_WIDTH,
nameTextStyle: {
padding: 4,
},
nameLocation: "middle",
axisLabel: {
hideOverlap: true,
overflow: "truncate",
width: Y_AXIS_TICK_LABELS_MAX_WIDTH,
},
// ...
},
grid: {
right: Y_AXIS_TICK_LABELS_MAX_WIDTH + SPACE_FOR_Y_AXIS_NAME,
left: Y_AXIS_TICK_LABELS_MAX_WIDTH + SPACE_FOR_Y_AXIS_NAME,
// Natively echarts supports dynamic spacings around the grid based on the length of the yaxis ticks
// unfortunately this only works for a maximum of 2 yaxis and if we want to manually handle spaces then we need to disable that feature
containLabel: false,
// ...
},
// ...
};
Version
5.3.3
Link to Minimal Reproduction
No response
Steps to Reproduce
yAxis
option:name: 'Axis name'
andnameLocation: 'center'
:Run
button at top and check howAxis name
overlaps few labels:Current Behavior
Axis name overlaps its labels![overlapped value](https://user-images.githubusercontent.com/271477/201137419-41c47ae0-d135-4f67-ba1d-d2c8922b89b9.png)
Expected Behavior
Axis name should appear right next to values![no overlapped](https://user-images.githubusercontent.com/271477/201138224-01e59045-bb85-4a3c-b51f-5fba80f78cd4.png)
Environment
Any additional comments?
I know we can use
nameGap
attribute, but in some cases there is no way to know how long the label will be. Is there a way to get the "size" of the label space/boundaries?