如何在 Apache Echarts 中以两列方式设置图例区域答案

【问题标题】：How to set the legend area in a two-column fashion in Apache Echarts如何在 Apache Echarts 中以两列方式设置图例区域
【发布时间】：2022-09-29 22:45:11
【问题描述】：

我想在 Apache Echarts 中以两列方式设置图例区域，如何使用图例选项实现这一点？我找不到与此相关的任何示例。

示例图像（我想要一个如下图所示的图例区域）。

option = {
        tooltip: {
           trigger: \'axis\',
           axisPointer: {
           type: \'shadow\'
        }
        },
        legend: {
          top: \'3%\',
        },
        grid: {
           top: \'28%\',
           left: \'3%\',
           right: \'4%\',
           bottom: \'3%\',
           containLabel: true,
        },
        xAxis: {
          type: \'value\',
        },
        yAxis: {
           type: \'category\',
           data: [\'Actual Avg\', \'Min Standard\']
        },
       series: JSON.parse(data),
};

标签： javascript ajax echarts

【解决方案1】：

在“传奇”中，您可以通过编写类似这样的内容来定义数据

legend:{
   ...,
   data: [
       {name: 'series 1', ...},
       {name: 'series 2', ...}
   ]
}

如果您希望图例自动生成，这将取决于您对“系列”的了解。

"如果不指定数据，则自动从series中收集。对于大多数series，将从series.name或series.encode的seriesName指定的维度名称中收集。对于某些类型的series，如饼图和漏斗，它将从 series.data 的名称字段中收集。” - Echarts 文档

因为我不知道你的“系列”是如何定义的，所以我不能给你一个代码示例，但我认为文档部分会对你有所帮助。

【讨论】：

我正在使用 Horizoanla 堆积条形图。我将阅读 E-Chart 文档。谢谢。

【解决方案2】：

我找到了一种拥有 2 列的方法，只需使用垂直图例对齐并根据您希望在一列中显示的元素数量固定高度，例如：（一列中的元素数量）*（图例元素高度）。

option = {
    legend: {
      top: '3%',
      orient: 'vertical',
      align: 'left',
      height: '180px' //example
    },
};

【讨论】：