Incubator-echarts: 柱状图不能设置间距

[0x018]

Version

4.4.0

Steps to reproduce

// 官网样例, option 修改如下:

option = {
xAxis: {
data: ['a', 'b', 'c', 'd','a', 'b', 'c', 'd','a', 'b', 'c', 'd','a', 'b', 'c', 'd','a', 'b', 'c', 'd'],
},
yAxis: {
splitLine: {show: false}
},
series: [{
type: 'bar',
barWidth: 40,
barCategoryGap:10, // 如果设置了 barWidth , 会导致间距自动适应, 从而 barCategoryGap 的值失效
data: [10, 20, 30, 40, 50, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60]
}]
};

What is expected?

希望能设置间距,或者增加属性最小间距

What is actually happening?

当柱子特别多的时候, 间距可能会过小,并在一起

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to [email protected]. Please attach the issue link if it's a technical questions.

If you are interested in the project, you may also subscribe our mail list.

Have a nice day! 🍵

[pissang]

It's becuase you have fixed your barWidth to 40

[0x018]

It's becuase you have fixed your barWidth to 40

I know, but i must to set barWidth and barCategoryGap.

[karma2014]

@0x018 Your data is too much，and the screen is narrow，you should reduce your data or reduce barwidth.

[zuiyuexuan]

@0x018 一般这种业务场景，考虑数据少时和数据多时的适配。
我是采用设置bar的最大宽度 barMaxWidth ，不去固定 barWidth 大小。这样当数据量少时，Bar 不会很宽。当数据量大时，barWidth 会自适应大小。此时设置 barCategoryGap ，也不会受影响。

这样的处理方法，应该是正确的方向。毕竟图表宽度是固定的，你想 barwidth 和间隙固定，除非你的数据刚好平分这个图表宽度，不然数据量较多时，就会出现你说的挤在一起的现象。

[0x018]

@0x018 一般这种业务场景，考虑数据少时和数据多时的适配。
我是采用设置bar的最大宽度 barMaxWidth ，不去固定 barWidth 大小。这样当数据量少时，Bar 不会很宽。当数据量大时，barWidth 会自适应大小。此时设置 barCategoryGap ，也不会受影响。

这样的处理方法，应该是正确的方向。毕竟图表宽度是固定的，你想 barwidth 和间隙固定，除非你的数据刚好平分这个图表宽度，不然数据量较多时，就会出现你说的挤在一起的现象。

数据量和内容不是我能控制的,所以我就是需要同时设置 宽度 和 间距.

他自带的自适应不能解决, 所以才希望能够自己指定.

设置 barMaxWidth 或 barMinWidth ,一样导致 barCategoryGap 失效

[mzvast]

@0x018 一般这种业务场景，考虑数据少时和数据多时的适配。
我是采用设置bar的最大宽度 barMaxWidth ，不去固定 barWidth 大小。这样当数据量少时，Bar 不会很宽。当数据量大时，barWidth 会自适应大小。此时设置 barCategoryGap ，也不会受影响。
这样的处理方法，应该是正确的方向。毕竟图表宽度是固定的，你想 barwidth 和间隙固定，除非你的数据刚好平分这个图表宽度，不然数据量较多时，就会出现你说的挤在一起的现象。

数据量和内容不是我能控制的,所以我就是需要同时设置 宽度 和 间距.

他自带的自适应不能解决, 所以才希望能够自己指定.

设置 barMaxWidth 或 barMinWidth ,一样导致 barCategoryGap 失效

我跟你一样，需求是固定条宽度和间距，而echarts只能二选一：选了宽度，间距就失效
；选了间距宽度就失效。

设计图：

实现尝试

固定宽度

• 代码
  
• 效果
  

固定间距

• 代码
  
• 效果
  

哭兮兮😭，改不动，求大佬指教！万谢！

[zuiyuexuan]

数据多的情况，又想同时保证宽度、间隔不变，怎么可能！
举个例子：图表宽度 100px,需求 bar宽 15px,间隔5px。
当bar条数大于5条时，（bar宽+间隔）* 条数 > 100px 。你让 chart 怎么显示，才能满足你两者都固定不变的需求？同样的问题，你只固定bar宽，结果也会大于100px。
所以数据多的情况不能固定bar宽，而是只固定间隔大小。

[mzvast]

@zuiyuexuan 我觉得你的这个例子超过了可以出滚动条或者直接溢出不显示。

[zuiyuexuan]

@zuiyuexuan 我觉得你的这个例子超过了可以出滚动条或者直接溢出不显示

横向滚动条，对于交互来说，一般不会采用。
无论滚动条或溢出不显示，都会有一个问题，一眼看不出趋势，需要操作成本才能知晓。

[mzvast]

@zuiyuexuan 我觉得你的这个例子超过了可以出滚动条或者直接溢出不显示

横向滚动条，对于交互来说，一般不会采用。
无论滚动条或溢出不显示，都会有一个问题，一眼看不出趋势，需要操作成本才能知晓。

先引用一下百度百科，一眼看出数据趋势不是条形图的特点。可能你说的是折线图吧。

条形图是统计图资料分析中最常用的图形。主要特点有：
1、能够使人们一眼看出各个数据的大小。
2、易于比较数据之间的差别。

需求是一共就一组对比数据，不需要看趋势，只对比ab两个数据的多少。

[zuiyuexuan]

@zuiyuexuan 我觉得你的这个例子超过了可以出滚动条或者直接溢出不显示

横向滚动条，对于交互来说，一般不会采用。
无论滚动条或溢出不显示，都会有一个问题，一眼看不出趋势，需要操作成本才能知晓。

先引用一下百度百科，一眼看出数据趋势不是条形图的特点。可能你说的是折线图吧。

条形图是统计图资料分析中最常用的图形。主要特点有：
1、能够使人们一眼看出各个数据的大小。
2、易于比较数据之间的差别。

需求是一共就一组对比数据，不需要看趋势，只对比ab两个数据的多少。

针对你的需求，是不需要。我之前的回答主要考虑楼主的需求。
目前你的问题，先做个视觉欺骗吧。只有bar是echarts渲染，其他用背景图。

[Alicelijia]

麻烦请问谁知道，标红区域的怎么调整小一些，目前的barGap，只针对绿色的区域的间隔有效，设置barCategoryGap无效，为何？

[0x018]

barCategoryGap失效的临时解决方案:

通过滚动条的缩放达到控制间距的效果

1.设置滚动条(可以隐藏)

2.设置滚动条的endValue控制一次显示的数量