[Question]图例可能会有多行时，如何避免图形与图例重叠？

[xmdong]

Version

5.3.0

Link to Minimal Reproduction

No response

Steps to Reproduce

Current Behavior

因为需求关系，这块不能使用scroll类型图例，并且由于图例数量不确定，没法给图形设置一个合适的top值，导致图例与图形可能重叠

Expected Behavior

能不能实现图例把图形挤下去的效果？或者能不能获取到图例的高度，这样我就可以给图形设置一个合适的top值。

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[echarts-bot]

@xmdong It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

[Question] When the legend may have multiple lines, how do I avoid overlapping graphics with the legend?

BODY

Version

5.3.0

Link to Minimal Reproduction

No response

Steps to Reproduce

Current Behavior

Because of the demand, the scroll type legend cannot be used in this piece, and because the number of legends is uncertain, it is impossible to set a suitable top value for the graph, resulting in the legend and the graph may overlap.

Expected Behavior

Is it possible to achieve the effect of the legend squeezing the graphics down? Or is it possible to get the height of the legend so that I can set a suitable top value for the graph.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[Ovilia]

目前没有很好的办法，只能根据图形数量大致估计一下，然后手动设置 grid.top 来调整

[jiawulin001]

I think this question shall be solved by a similar way as #16880, where grid is adjusted to accommodate too long labels.
If we can find bounding rect of labels, we can adjust the size of grid to save space for legends too. I might try submitting a PR to do so.

[yswang0927]

图例多行显示时，grid.top 的值应该自适应的，目前靠估算修改 top 值是不合理的，体验很差。
ECharts功能很强，但是不少细节处理的很糟糕，例如：

1. X轴 Label 标签太长不能智能处理。
2. Y轴，配置了 grid.containLabel=true，即使配置不显示Y轴，左侧还是保留了containLabel=true计算出来的空白。
3. 图例多行展示和下面的图表重叠

[xmdong]

我现在的解决办法如下（使用react hooks）,大体思路就是渲染完成后通过echartInstance实例获取到legend高度，然后根据高度重新设置top再渲染一次

[wuh]

这个需求实在是太频繁了，改变组件大小等很多情况都会导致图例显示换行，需要提供一个智能或可编程的办法，总是用重渲染的方式实在是显得有些low。 @Ovilia