ECharts-如何显示带有3行图例的水平滚动条，如果项目不适合3行则滚动

Question

我正在使用ECharts 以折线图的形式显示趋势数据。我有 50 个系列要显示在折线图中。每个系列都有一个传奇可以展示。我想在图表顶部显示图例。但是，我想显示最多 3 行的图例。如果图例不适合 3 行，那么我想显示垂直滚动。但是，我无法显示最多 3 行图例的垂直滚动。每一行都应该显示一个以上的图例。

我尝试了垂直和水平滚动。在垂直滚动中，它在一行中只显示一个图例。这就是问题。实际上，ECharts 应该在一行中显示所有可能的图例。如果有足够的 space 在一行中有 2 个图例，它应该在一行中显示 2 个图例。它应该显示 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.data 将包含基本数组的前 3 个项目，第二个 legend.data 将包含接下来的 3 个...并通过每个 [=] 中的 adding/removing 个项目从外部控制内容12=].

无论如何，这显然不是一个好的解决方案。卷轴看起来有问题。

我建议您 post 在他们的 official feature request form 上为您的想法提供一个清晰的示例和用例，这是您无需编写庞大且不可扩展的解决方法即可获得此功能的最佳方式。

ECharts-如何显示带有3行图例的水平滚动条，如果项目不适合3行则滚动

ECharts- How to show horizontal scroll bar with 3 lines of legend, and after that scroll if items doesn't fit in 3 lines

javascript

linechart

typescript

echarts

angular