Incubator-echarts: Axis Label overlapping

[geekboy0801]

Hi.
I have a question about axis label of Echarts.
Let's look at this image.

As you can see, when the container of Echarts gets smaller, Echarts does not control axis interval automatically.
So my question is: Do i have to adjust this manually?
I guess Echarts has the built-in function to solve such this small issue.
I want your help!
Thanks.

[100pah]

If yAxis.type is 'value', it can be adjusted automatically.
If yAxis.type is 'category', it uses another strategy to adjust them but not perfect.

Could I have your option to check this issue in detail?

[geekboy0801]

Hi, @100pah . I am now using ReactEchart component. And the code stuff is as below.

eChartOption(graphData, xAxisCategories) {
const yAxisLines = this.getYAxisLines(graphData, xAxisCategories);

......

const chartOption = {
  animation: false,
  legend,
  xAxis: [{
    type: 'category',
    axisLine: { show: false },
    axisTick: { show: false },
    axisLabel: {
      color: '#888',
      rotate: isLarge ? 0 : 45,
      margin: 12,
    },
    data: xAxisCategories.toArray(),
  }],

  yAxis: {
    name: 'Operation Time (minutes)',
    nameLocation: 'middle',
    nameTextStyle: {
      color: '#aaa',
    },
    nameGap: 35,
    type: 'value',   //----------------------------------------
    axisTick: { show: false },
    axisLine: { show: false },
    splitLine: { show: false },
    axisLabel: {
      color: '#888',
    },
  },

  grid: {
    left: 40,
    right: 10,
    bottom: (this.props.operationType === W2W_OPTYPE) ? 50 : 25,
    top: 10,
    containLabel: true,
    show: true,
    borderWidth: 0,
  },

  tooltip: {
    trigger: 'item',
    axisPointer: {
      type: 'shadow',
    },
    backgroundColor: 'rgba(221,221,221,0.9)',
    borderColor: '#198bff',
    borderWidth: 1,
    textStyle: {
      color: '#000',
    },
  },

  series: [...series, {
    name: 'Goal Line',
    type: 'line',
    markLine: {
      silent: true,
      symbol: 'none',
      data: yAxisLines.map(yAxisLine => ({
        yAxis: yAxisLine.get('value'),
        lineStyle: {
          normal: {
            color: yAxisLine.get('color'),
            type: 'solid',
          },
        },
        label: {
          normal: {
            position: yAxisLine.get('position'),
            formatter: `{style|${yAxisLine.get('text')}}`,
            color: yAxisLine.get('color'),
            rich: {
              style: {
                width: '100%',
                align: yAxisLine.get('align'),
                padding: [0, 0, -15, 0],
                rotation: 90,
              },
            },
          },
        },
      })).toArray(),
    },
  }],
};

return chartOption;

}

[100pah]

splitNumber is mainly used to determine the number of displayed label and ticks.

Probably this approach can be tried:
when changing the size of a chart,

function onChartContainerDomChange() {
    var height = chart.getHeight();
    var splitNumber = height < 200
        ? 2
        : height < 300
        ? 4
        : null;
    console.log(height, splitNumber);
    chart.setOption({
        yAxis: {splitNumber: splitNumber}
    });
    chart.resize();
}

[geekboy0801]

Thank you, @100pah .
Just fixed when adding one line such as below

splitNumber: containerPixelHeight < 500 ? 2 : 4,

But split number of axis line is not exactly the same as the value we set (2, 4).
It is random but overlapping does not happen.
Is that expected?

[100pah]

splitNumber is a reference value. The final number of the result segments will be auto-adjusted according to the readability of the value on each tick (for example, round as far as possible).

[geekboy0801]

Thank you, @100pah .
Your comments were very helpful to me.