I am currently utilizing ECharts to display trend data in a line chart format. With 50 different series to showcase, each series comes with its own legend. My objective is to arrange the legends at the top of the chart, while limiting them to a maximum of 3 lines. If the legends exceed the 3-line limit, I would like to implement a vertical scroll. However, I am facing difficulties in achieving the vertical scroll with a maximum of 3 lines for the legends. It is essential that each line displays more than one legend.
My attempts with vertical and horizontal scrolling have only resulted in displaying one legend per line in the vertical scroll. This poses a challenge as ECharts should ideally display as many legends as possible in a single line based on available space. If there is room for 2 legends in a line, it should display both. The goal is to have 3 lines for legends and introduce vertical scrolling only if all legends cannot fit within these 3 lines. Currently, the legends overlap with the chart area.
https://i.sstatic.net/F5GIv.png
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}'
},
legend: [{
left: 'left',width:'50%',
type:'scroll',
orient:'vertical',
height:'100',
selectedMode:'multiple',
//pageButtonPosition:'end',
//formatter:'legend {name} ',
data: ['saaaaaaaaaaaaaaa0', 'saaaaaaaaaaaaaaa1','saaaaaaaaaaaaaaa2','saaaaaaaaaaaaaaa3'
,'saaaaaaaaaaaaaaa4','saaaaaaaaaaaaaaa8'
, 'saaaaaaaaaaaaaaa9','saaaaaaaaaa10','saaaaaaaaaa13','saaaaaaaaaa14','saaaaaaaaaa11'
, 'saaaaaaaaaa12','saaaaaaaaaa15','saaaaaaaaaa16'
,'saaaaaaaaaa17'],
},
{
left: 'right',width:'50%',height:'auto',
data: ['saaaaaaaaaaaaaaa5','saaaaaaaaaaaaaaa6','saaaaaaaaaaaaaaa7'],
}
],
xAxis: {
type: 'category',
name: 'x',
splitLine: {show: false},
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
},
grid: {
height:'auto'
},
yAxis: {
type: 'log',
name: 'y'
},
series: [
{
name: 'saaaaaaaaaaaaaaa0',
type: 'line',
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
},
{
name: 'saaaaaaaaaaaaaaa1',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaaaaaaa2',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
},
{
name: 'saaaaaaaaaaaaaaa3',
type: 'line',
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
},
{
name: 'saaaaaaaaaaaaaaa4',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaaaaaaa5',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
},
{
name: 'saaaaaaaaaaaaaaa6',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaaaaaaa7',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
},
{
name: 'saaaaaaaaaaaaaaa8',
type: 'line',
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
},
{
name: 'saaaaaaaaaaaaaaa9',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaa10',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
},
{
name: 'saaaaaaaaaa11',
type: 'line',
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
},
{
name: 'saaaaaaaaaa12',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaa13',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
},
{
name: 'saaaaaaaaaa14',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaa15',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
}
]
};