ECharts-如何顯示帶有三行圖例的水平滾動條，然后在滾動條顯示不適合三行的情況下顯示

Question

我正在使用ECharts在折線圖中顯示趨勢數據。 我有50個系列要顯示在折線圖中。 每個系列都有一個傳奇來顯示。 我想在圖表頂部顯示圖例。 但是，我想以最多3行顯示圖例。 如果圖例不適合3行，那么我想顯示垂直滾動。 但是，我無法顯示最多3行圖例的垂直滾動。 每行中應顯示多個圖例。

我嘗試了垂直和水平滾動。 在垂直滾動中，它僅在一行中顯示一個圖例。 這就是問題。 實際上，ECharts應該在一行中顯示所有可能的圖例。 如果有足夠的空間在一行中包含2個圖例，則應在一行中顯示2個圖例。 它應該顯示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]
        }
    ]
};

Answer 1

我很確定您正在嘗試做ECharts不支持的事情。

從程序上來說：

• 您無法在一行中找到多少個項目。
• 由於上述原因，您無法知道圖例塊中有多少行。
• 尚無最大行數或每行最大項目數控件。

我想您最好的辦法是制作3個圖例塊，並使用legend.left和legend.top像素配置垂直legend.left legend.top ，並將整個圖例數據的一部分放入這些塊中。 第一個legend.data將包含基本數組的前3個項，第二個legend.data將包含后三個項的第三個...並通過在每個legend.data添加/刪除項目來從外部控制內容。

無論如何，這顯然不是一個好的解決方案。 滾動看起來像馬車。

我建議您在其正式功能請求表上發布一個清晰的示例和您的想法的用例，這是獲得此功能的最佳方法，而無需編寫龐大且不可擴展的解決方法。