echarts icon indicating copy to clipboard operation
echarts copied to clipboard

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

Open okatz123 opened this issue 1 year ago • 2 comments

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

okatz123 avatar May 01 '24 10:05 okatz123

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.

helgasoft avatar May 01 '24 18:05 helgasoft

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

okatz123 avatar May 02 '24 06:05 okatz123