[Bug] ’width‘ is not work in axis‘s nameTextStyle

[kitee0325]

Version

5.3.2

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category

Steps to Reproduce

jump to the link, use this option

option = {
  title: {
    text: 'World Population'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    nameLocation: 'center',
    name: 'sdfasdfsadfsddsfasdf',
    nameTextStyle: {
      height: 20,
      width: 500,
      overflow: 'truncate',
      borderColor: '#000',
      borderWidth: 1
    }
  },
  yAxis: {
    type: 'category',
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
  },
  series: [
    {
      name: '2011',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230]
    },
    {
      name: '2012',
      type: 'bar',
      data: [19325, 23438, 31000, 121594, 134141, 681807]
    }
  ]
};

Current Behavior

axisName's width is not change

Expected Behavior

change axisName's width, enable overflow

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[jiawulin001]

Problem locating

This bug is caused because Echarts doesn't seem to be interested in receiving nameTextStyle at all.
Check the class axisName below

echarts/src/component/axis/AxisBuilder.ts

Line 367 in 3961cef

axisName(opt, axisModel, group, transformGroup) {

And you will find nameTextStyle.width is never referred to. Besides the maxWidth, the important width parameter passed in to text element maker, gets its value from three variables.

echarts/src/component/axis/AxisBuilder.ts

Lines 425 to 427 in 3961cef

	const maxWidth = retrieve(
	opt.nameTruncateMaxWidth, truncateOpt.maxWidth, axisNameAvailableWidth
	);

The first two opt.nameTruncateMaxWidth, truncateOpt.maxWidth should come from user input but they are nowhere to be found in documentation. While the last one, axisNameAvailableWidth is derived from opt.axisNameAvailableWidth, another misterious variable. After all, none of them has anything to do with nameTextStyle.width. That's why nameTextStyle.width would never work.

Solution

It's an easy fix, just let axisNameAvailableWidth get nameTextStyle.width if it has no value.
Submitting a PR to fix this

[jiawulin001]

seems that there's already a PR solving this.

[Ovilia]

Fixed in apache/echarts-doc@0d22eaa