Apache Echarts中如何設置兩欄樣式的圖例區域

Question

我想在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),
};

         

Answer 1

在“傳奇”中，您可以通過編寫類似這樣的內容來定義數據

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

如果您希望圖例自動生成，這將取決於您對“系列”的了解。

"如果不指定數據，則自動從series中收集。對於大多數series，將從series.name或series.encode的seriesName指定的維度名稱中收集。對於某些類型的series，如餅圖和漏斗，它將從 series.data 的名稱字段中收集。” - Echarts 文檔

因為我不知道你的“系列”是如何定義的，所以我不能給你一個代碼示例，但我認為文檔部分會對你有所幫助。

Answer 2

我找到了一種有 2 列的方法，只需使用垂直圖例 alignment 並根據您希望在列中顯示的元素數量固定高度，例如：（列中的元素數）*（圖例元素高度).

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