[Feature] x轴标签间隔问题(xAxis.axisLabel.interval)question

[leekbillow]

What problem does this feature solve?

希望x轴标签间距的自动计算可以把宽度设置考虑进去，否则即使xAxis.axisLabel.width设置得很小，依然会有标签不显示浪费空间。 It is hoped that the automatic calculation of the X-axis label spacing takes into account the width Settings, otherwise even if xAxis.axisLabel.width is set very small, there will still be labels that do not display wasted space.

option = {
  xAxis: {
    type: 'category',
    data: [
      '标签标签标签标签标签标签标签',
      '标签标签标签标签标签',
      '标签标签标签',
      '标签标签标签标签标签',
      '标签标签标签',
      '标签标签标签标签标签标签标签标签标签标签标签',
      '标签标签',
      '标签标签标签标签'
    ],
    axisLabel: {
      width: 50,
      overflow: 'truncate',
      // interval: 0
    }
  },
  // dataZoom: {
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110, 130, 200]
    }
  ]
};

What does the proposed API look like?

xAxis.axisLabel.interval='auto'

[echarts-bot[bot]]

@leekbillow 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] x-axis label interval problem (xAxis.axisLabel.interval)question

BODY

What problem does this feature solve?

I hope the automatic calculation of the x-axis label spacing can take the width setting into account, otherwise even if xAxis.axisLabel.width is set very small, there will still be labels that are not displayed and waste space. It is hoped that the automatic calculation of the X-axis label spacing takes into account the width Settings, otherwise even if xAxis.axisLabel.width is set very small, there will still be labels that do not display wasted space.

option = {
  xAxis: {
    type: 'category',
    data: [
      'label label label label label label label label',
      'tag tag tag tag tag',
      'label label label',
      'tag tag tag tag tag',
      'label label label',
      'label label label label label label label label label label label label label label',
      'label label',
      'label label label label'
    ],
    axisLabel: {
      width: 50,
      overflow: 'truncate',
      // interval: 0
    }
  },
  // dataZoom: {
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110, 130, 200]
    }
  ]
};

What does the proposed API look like?

xAxis.axisLabel.interval='auto'

[jiawulin001]

我不明白你想要达成的效果是否为展示所有label？当label中有label较长的时候会影响label的自动展示。我看到你有使用xAxis.axisLabel.interval: 0，这个可以展示所有的label，是否能够达成你想要的效果？能否详细描述一下你需要什么效果？ I don't know if what you try to achieve is to display all labels. When one of the labels is too long, it will affect auto distribution of labels. I see that you had used (commented) xAxis.axisLabel.interval: 0, which can display all labels. Why couldn't it help you with your goal? Can you give more details about your goal?

[leekbillow]

我不明白你想要达成的效果是否为展示所有label？当label中有label较长的时候会影响label的自动展示。我看到你有使用xAxis.axisLabel.interval: 0，这个可以展示所有的label，是否能够达成你想要的效果？能否详细描述一下你需要什么效果？ I don't know if what you try to achieve is to display all labels. When one of the labels is too long, it will affect auto distribution of labels. I see that you had used (commented) xAxis.axisLabel.interval: 0, which can display all labels. Why couldn't it help you with your goal? Can you give more details about your goal?

例如上图，xAxis.axisLabel.width已经设置得很窄了，按理来说x轴标签应该全部展示出来（在自动计算的情况下），但实际上标签间隔是2，希望自动计算间隔可以改进一下，在xAxis.axisLabel.width设置得很窄得时候，不需要xAxis.axisLabel.interval: 0强制展示也能计算出理想的结果，在datazoom变化时，自动隐藏看起来会更合理。 For example, the 'xAxis.axisLabel.width' has been set to a very narrow width. Normally the x-axis labels should be displayed in full (in the case of automatic calculation), but in fact the label spacing is 2. Hopefully the automatic calculation spacing can be improved. When xAxis.axislabel.width is set very narrow, the desired result can be computed without the 'xAxis.axisLabel.interval: 0' mandatory display, when the 'Datazoom' changes, autohiding looks more reasonable.

[linghaoSu]

当前的 auto 的模式取得是最长标签的宽度，然后轴空间的总长度 除以 这个最大宽度 计算的得到的间隔。因此与直观理解的重叠隐藏逻辑不太一致（我个人理解的 auto 模式也许是逐个寻找能完整显示的标签，而不是通过最大宽度计算出一个固定间隔？）

PS：overflow: 'truncate' 模式开了也就没必要做自动间隔的计算了吧?（x

The current auto mode takes the width of the longest label, and then divides the total length of the axis space by the max width calculated interval. Therefore, it is not consistent with the intuitively understood overlapping hiding logic (my personal understanding of the auto mode may be to find the labels that can be completely displayed one by one, instead of calculating a fixed interval through the maximum width?)

PS: overflow: 'truncate' mode is on, so there is no need to do automatic interval calculation? (x

https://github.com/apache/echarts/blob/master/src/coord/axisTickLabelBuilder.ts#L255-L278

[leekbillow]

@linghaoSu 是的，你明白我的意思，即使设置了固定宽度，自动计算间隔仍然使用最长的label作为计算参考； overflow: 'truncate'后，可以自己算好间隔然后interval: 0，但是如果同时使用datazoom的话就不太够用了,它不会自动隐藏。

Yes, you see what I mean, even with a fixed width, the automatic calculation interval still uses the longest label as the calculation reference; After overflow: 'truncate', you can calculate the interval and then interval: 0, but it is not enough if you use datazoom at the same time, does not automatically hide.

option = {
  xAxis: {
    type: 'category',
    data: [
      '标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签',
      '标签标签标签标签标签标签标签标签标签标签',
      '标签标签标签标签标签标签',
      '标签标签标签标签标签标签标签标签标签标签',
      '标签标签标签标签标签标签',
      '标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签标签',
      '标签标签',
      '标签标签标签标签标签标签标签标签'
    ],
    axisLabel: {
      width: 250,
      overflow: 'truncate',
      interval: 0
    }
  },
  dataZoom: {
    startValue: 0,
    endValue: 3
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110, 130, 200]
    }
  ]
};

[github-actions[bot]]

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[bot]]

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!