Echarts - как показать горизонтальную полосу прокрутки с 3 строками легенды, а затем прокрутить, если элементы не помещаются в 3 строки

---

Я использую ECharts для отображения данных тренда на линейном графике. У меня есть 50 серий, которые нужно показать на линейном графике. У каждой серии есть легенда, чтобы показать. Я хочу показать легенды в верхней части диаграммы. Но я хочу показать легенды максимум в 3 строках. И если легенды не помещаются в 3 строки, то я хочу показать вертикальный свиток. Но я не могу показать вертикальный свиток максимум с 3 строками легенд. Каждая строка должна содержать более одной легенды.

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]
        }
    ]
};

Что я уже пробовал:

Цитата:

Я попробовал с вертикальной и горизонтальной прокруткой. При вертикальной прокрутке он показывает только одну легенду в одной строке. вот в чем проблема. На самом деле, ECharts должны показывать все возможные легенды в одной строке. Если есть достаточно места, чтобы иметь 2 легенды в одной строке, он должен показать 2 легенды в одной строке. Он должен показывать 3 строки, и если все легенды не помещаются в три строки, то следует добавить вертикальную прокрутку. Но в настоящее время легенды перекрываются с диаграммой.

---