[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

[KID-1912]

@xmdong 这确实一个有效的解决方案

[hanaTsuk1]

有配置动画 还是用rendered事件 不然要等动画响应完了才改变高度 legend和图表叠在一起了

[hockor]

这个问题真的需要解决下啊，太影响体验了吧，而且 x/y 轴 的nameLocation = "middle" 时如果设置了axisLabel的旋转角度，也会有这个重叠的问题

[akiozhang]

遇到相同的问题，因需求，不确定series数组中包含多少数据组，期望通过滚动条在底部有固定高度全量展示，目前的legend设置vertical后宽度设置失效 @Ovilia

[dev-orange]

2024年了，这个问题官方有什么好的解法么？同遇到这个问题

[shenxiang216]

有人解决吗？2024年了