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

5uzkadbs  于 4个月前  发布在  Echarts
关注(0)|答案(6)|浏览(53)

What problem does this feature solve?

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

What does the proposed API look like?

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

wz1wpwve

wz1wpwve1#

@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.

rslzwgfq

rslzwgfq2#

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'.

r1zhe5dt

r1zhe5dt3#

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"
  },
  
  ]
}

ercv8c1e

ercv8c1e4#

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
  },
xzabzqsa

xzabzqsa5#

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.

33qvvth1

33qvvth16#

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.

相关问题