[Feature] 请问legend可以分别设置水平和垂直的间隔吗

[fssh]

What problem does this feature solve?

itemGap
这个属性的官方描述是这样的：图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
但是经测试发现改这个值会同时改变水平和纵向间隔。

What does the proposed API look like?

希望官方提供的itemGap支持输入数组，数组项分别是水平间隔和纵向间隔，或是提供其它可行的解决方案，在此深表感谢。

[echarts-bot]

@fssh It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

[Feature] Can legend set the horizontal and vertical intervals separately?

BODY

What problem does this feature solve?

itemGap
The official description of this property is as follows: the interval between each item in the legend. Horizontal intervals in landscape layout and vertical intervals in portrait layout.
However, tests have shown that changing this value will change both the horizontal and longitudinal intervals.

What does the proposed API look like?

I hope that the official provided itemGap supports input arrays, array items are horizontal interval and vertical interval, or provide other feasible solutions, thank you very much.

[helgasoft]

But after testing, it is found that changing this value will change the horizontal and vertical intervals at the same time.

Could you provide your test code?
Our Demo Code shows correct spacing for the two orient options - horizontal' and 'vertical'.

[fssh]

But after testing, it is found that changing this value will change the horizontal and vertical intervals at the same time.

Could you provide your test code? Our Demo Code shows correct spacing for the two orient options - horizontal' and 'vertical'.

option = {
  dataset: {
    source: [
      ["type", "2012", "2013", "2014", "2015", "2016"],
      ["Forest", 320, 332, 301, 334, 390],
      ["Steppe", 220, 182, 191, 234, 290],
      ["Desert", 150, 232, 201, 154, 190],
      ["Wetland", 98, 77, 101, 99, 40],
       ["AAAAAAA", 98, 77, 101, 99, 40],
        ["BBBBBBB", 98, 77, 101, 99, 40],
         ["CCCCCCC", 98, 77, 101, 99, 40],
         ["DDDDDDD", 98, 77, 101, 99, 40],
         ["EEEEEEE", 98, 77, 101, 99, 40],
         ["FFFFFFF", 98, 77, 101, 99, 40],
         ["GGGGGGG", 98, 77, 101, 99, 40],
         ["HHHHHHH", 98, 77, 101, 99, 40],
         ["IIIIIII", 98, 77, 101, 99, 40],
         ["JJJJJJJ", 98, 77, 101, 99, 40],
         ["KKKKKKK", 98, 77, 101, 99, 40],
    ]
  },
  legend: {
    orient: 'horizontal', 
    itemGap: 50,
  },
  xAxis: {
    type: "category"
  },
  yAxis: {},
  series: [{
    type: "bar",
    seriesLayoutBy: "row"
  }, {
    type: "bar",
    seriesLayoutBy: "row"
  }, {
    type: "bar",
    seriesLayoutBy: "row"
  }, {
    type: "bar",
    seriesLayoutBy: "row"
  },{
    type: "bar",
    seriesLayoutBy: "row"
  },{
    type: "bar",
    seriesLayoutBy: "row"
  },{
    type: "bar",
    seriesLayoutBy: "row"
  },{
    type: "bar",
    seriesLayoutBy: "row"
  },{
    type: "bar",
    seriesLayoutBy: "row"
  },{
    type: "bar",
    seriesLayoutBy: "row"
  },{
    type: "bar",
    seriesLayoutBy: "row"
  },{
    type: "bar",
    seriesLayoutBy: "row"
  },{
    type: "bar",
    seriesLayoutBy: "row"
  },{
    type: "bar",
    seriesLayoutBy: "row"
  },{
    type: "bar",
    seriesLayoutBy: "row"
  },
  
  ]
}

[helgasoft]

ok, so it is for a legend with many items auto-wrapped on two or more lines. Agree, it's a bug.
Maybe vertical will work better for you:

  legend: {
    orient: 'vertical', 
    itemGap: 4, right: 0
  },

[fssh]

ok, so it is for a legend with many items auto-wrapped on two or more lines. Agree, it's a bug. Maybe vertical will work better for you:

  legend: {
    orient: 'vertical', 
    itemGap: 4, right: 0
  },

The same goes for vertical.

[helgasoft]

yes, the bug is there. But when working with many legend items, using smaller itemGap is always better.
I was just looking for a solution/workaround.

[bestsamsg]

可以通过脚本替换实现itemGap分别在水平与垂直方向进行独立控制，我这里在npm start的 脚本前，添加了命令，比如:

node ./patchEcharts.js&&set PORT=8004&&set RUN_ENV=START&&set BUILD_ENV=PROD&&set BASE_PATH=%npm_config_basePath%&&max dev --progress

后续在打包脚本中也需要同样的处理，需要注意的是，为了避免重复替换，替换后的字符串内容要做一个差异处理，比如减少一个空格。

patchEcharts.js

const replace = require("replace");

replace({
    // regex: 'warning\\([^\n\r]*\\);',
    regex:'var currentLineMaxSize = 0;',

    //减少一个空格避免重复匹配替换, 其他replace保持一致
    replacement: `
    var currentLineMaxSize= 0;
    //add-begin
    let gapList = [];
    if(typeof gap === 'string' || typeof gap === 'number'){
        gapList = [gap, gap];
    }else if(gap instanceof Array){
        gapList = [gap[0], gap[1]];
    }
    //add-end
    `,
    paths: ['node_modules/echarts/lib/util/layout.js'],
    recursive: true,
    limit:1000,
    silent: false,
    multiline:true,
});

replace({
    // regex: 'warning\\([^\n\r]*\\);',
    regex:'y \\+= currentLineMaxSize \\+ gap;',
    replacement: `
    y+= currentLineMaxSize + gapList[1];
    `,
    paths: ['node_modules/echarts/lib/util/layout.js'],
    recursive: true,
    multiline:true,
});

replace({
    // regex: 'warning\\([^\n\r]*\\);',
    regex:'x \\+= currentLineMaxSize \\+ gap;',
    replacement: `

    //replace-begin
    x+= currentLineMaxSize + gapList[0];
    //replace-end
    `,
    paths: ['node_modules/echarts/lib/util/layout.js'],
    recursive: true,
    multiline:true,
});
replace({
    // regex: 'warning\\([^\n\r]*\\);',
    regex:"orient === 'horizontal' \\? x = nextX \\+ gap : y = nextY \\+ gap;",
    replacement: `
    //replace-begin
    orient=== 'horizontal' ? x = nextX + gapList[0] : y = nextY + gapList[1];
    //replace-end
    `,
    paths: ['node_modules/echarts/lib/util/layout.js'],
    recursive: true,
    multiline:true,
});

我看这个feature 23年已经提交了，但为何demo上还是没能实现对应功能