Is there a way to prevent the axis name from automatically overlapping with its labels?

[pasqualtroncone]

Version

5.3.3

Link to Minimal Reproduction

No response

Steps to Reproduce

1. Go to Heatmap on Cartesian chart example from project web page.
2. Add the following attributes to yAxis option: name: 'Axis name' and nameLocation: 'center':
3. Press Run button at top and check how Axis name overlaps few labels:

Current Behavior

Axis name overlaps its labels

Expected Behavior

Axis name should appear right next to values

Environment

- OS: Any
- Browser: Chrome or Firefox. Latest versions

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?

[zhaolei2013]

我这边也遇到了同样的问题。没找到解决办法，只能去手动计算刻度最大值的长度，然后动态地计算出相应的nameGap。

[vandelpavel]

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,
      // ...
    },
    // ...
  };