Thanks to @kikon for the insight. The issue is indeed geometric: trying to center labels on the edge of the container (where `left: 0` and `right: 0`) will inevitably cause them to be cut off.

There are two ways to solve this, depending on your ECharts version.

### Solution 1: The Modern Way (ECharts v5.5.0+)

If you can upgrade to version 5.5.0 or later, ECharts introduced specific properties to handle exactly this scenario: `alignMinLabel` and `alignMaxLabel`.

This allows the first label to be left-aligned and the last label to be right-aligned automatically, keeping the middle ones centered.

    xAxis: {
      // ... other configs
      axisLabel: {
        // Force the first label to align left (inside the chart)
        alignMinLabel: 'left', 
        // Force the last label to align right (inside the chart)
        alignMaxLabel: 'right',
        
        align: 'center', // All other labels remain centered
        // ...
      }
    }

### Solution 2: The Manual Way (For older versions)

Since I am currently on **v5.4.2** and cannot upgrade immediately, the workaround is to manually set the `align` property using a callback function. This achieves a similar effect without using `padding` (which messes up the equidistant spacing).

    xAxis: {
      // ...
      axisLabel: {
        // ...
        align: function(value, index) {
          // Assuming you know the index or value of your start/end points
          if (index === 0) return 'left'; 
          if (index === data.length - 1) return 'right';
          return 'center';
        }
      }
    }

This ensures the labels are fully visible inside the container without distorting the visual spacing between ticks.