apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.29k stars 19.61k forks source link

[Bug] Unable to set multiple legend rows, when legend type is scroll. #19886

Open okatz123 opened 5 months ago

okatz123 commented 5 months ago

Version

5.4.3

Link to Minimal Reproduction

https://codesandbox.io/p/sandbox/pie-with-scrollable-legend-dqj2r2?file=%2Findex.js

Steps to Reproduce

I use your playground https://echarts.apache.org/examples/en/editor.html?c=pie-legend&edit=1&reset=1 and change legend to have an unknown orient string. I also set width and height: legend: { type: 'scroll', orient: 'veeertical', right: 10, bottom: 20, width: 400, height: 200, data: data.legendData },

I can get the legend behavior I am looking for - a multi-line legend with paging.

image

In code it is not possible since the only allowed orient values are 'vertical'/'horizontal', and the code doesn't compile. Is there any valid way to achieve this legend behavior?

Current Behavior

A single row of legend items or a single column of items, that can become very long. When using 'plain' type the legend items overflow. My legend includes a large number of items, and neither one of the solutions fit.

image

image

Expected Behavior

To be able to achieve the same behavior as in echarts playground.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

helgasoft commented 5 months ago

I can get the legend behavior I am looking for - a multi-line legend with paging.

Well done, you got it working. Eventually orient: 'none' should be added to the API documentation.

okatz123 commented 5 months ago

In theory it is working, but when using typescript code will not compile. 'none' should be added to type LayoutOrient