请问柱状图宽度如何与X轴关联

[FengTian2]

What problem does this feature solve?

比如要展示各个区间数量 ，
X轴表示区间 ，Y轴是区间的数量

比如X轴坐标， 1-10 范围 ，数量有100个
11-20 范围 ，数量有200 个
21-30 范围 ，数量有 0个 ，
31-40范围 ， 数量有 50个 ，

这样应该如何配置 ？谢谢！
百度好久，基本有是按照X 轴分类方式显示，没有看到范围显示

What does the proposed API look like?

None

[echarts-bot]

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

May I ask how the width of the histogram is related to the x-axis

BODY

What problem does this feature solve?

For example, to show the number of individual intervals,
The X axis represents the interval, and the Y axis is the number of intervals

For example, the X axis coordinate, 1-10 range, has 100 numbers
11-20 range, the number is 200
21-30 range , quantity 0 ,
31-40 range , quantity 50 ,

How should this be configured? Thank you!
Baidu for a long time, basically according to the X axis classification method display, did not see the range display

What does the proposed API look like?

None

[jiawulin001]

你好，我理解柱状图的本质就是类别与数值的映射关系，如果把数值区间作为一个分类的话是可以实现你说的效果的，比如：
Hello, as I see, bar chart is a mapping from category to value. If we treat each interval as a category, the illustrated effect can be achieved as followed:

示例代码 Example Code

Copy the following code to https://echarts.apache.org/examples/zh/editor.html
复制以下代码到https://echarts.apache.org/examples/zh/editor.html

option = {
  xAxis: {
    type: 'category',
    data: ['1-10', '11-20', '21-30', '31-40']
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      shadowStyle: {
        color: 'blue',
        opacity: 0.1
      }
    },
  },
  series: [
    {
      data: [100, 200, 0, 50],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};

这个问题可能更像是数据处理方面需要做的事。
如果我没理解对意思的话，请随时指正。
This issue might be more relavant to data process than echarts itself.
If I got anything wrong or unclear, please correct me anytime.

[FengTian2]

你好，我理解柱状图的本质就是类别与数值的映射关系，如果把数值区间作为一个分类的话是可以实现你说的效果的，比如：

示例代码
这个问题可能更像是数据处理方面需要做的事。 如果我没理解对意思的话，请随时指正。

多谢回复 。
用你这方法貌似也可以，只是这样柱子与柱子之间有缝隙 ，效果不那么好 ，
我这个需求，其实是想拿来展示CPK图 （就是要统计每个区间值的数量） 。
所以这样看，如果能解决柱子间缝隙 ，也可以将就着用 ！

[jiawulin001]

@FengTian2 你好，缝隙是可以去除的，只要将barCategoryGap设为0%即可，详细可见：https://echarts.apache.org/zh/option.html#series-bar.barCategoryGap
Hi, the gap between bars can be eliminated by setting barCategoryGap to 0%. Details can be referred to at: https://echarts.apache.org/zh/option.html#series-bar.barCategoryGap

示例代码 Example Code

Copy the following code to https://echarts.apache.org/examples/zh/editor.html
复制以下代码到https://echarts.apache.org/examples/zh/editor.html

option = {
  xAxis: {
    type: 'category',
    data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      shadowStyle: {
        color: 'blue',
        opacity: 0.1
      }
    },
  },

  series: [
    {
      data: [100, 200, 0, 50,150,250,125,365,111,52,88,44,44,44,44],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      itemStyle:{
        borderColor:'red',
        borderWidth: 1
      },
      barCategoryGap:'0%'
    }
  ]
};

[FengTian2]

@FengTian2 你好，缝隙是可以去除的，只要将barCategoryGap设为0%即可，详细可见：https://echarts.apache.org/zh/option.html#series-bar.barCategoryGap Hi, the gap between bars can be eliminated by setting barCategoryGap to 0%. Details can be referred to at: https://echarts.apache.org/zh/option.html#series-bar.barCategoryGap

示例代码 Example Code

好的，非常感谢 ，看起来能解决这个问题了

[github-actions]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!