Echarts坐标轴首尾刻度标签显示不全

问题

echarts折线图坐标轴首尾刻度标签某些场景下显示不全

解决方案

echarts@5.5.0

alignMinLabel 最小的坐标刻度标签的对齐方式

alignMaxLabel 最大的坐标刻度标签的对齐方式

echarts@5.5.0以前

通过axisLabel的rich+formatter配合padding偏移首尾刻度标签

示例代码

var data = [
  ['2019-10-10', 200],
  ['2019-10-11', 560],
  ['2019-10-12', 750],
  ['2019-10-13', 580],
  ['2019-10-14', 250],
  ['2019-10-15', 300],
  ['2019-10-16', 450],
  ['2019-10-17', 300],
  ['2019-10-18', 100]
];
option = {
  grid: {
    left: 0,
    right: 0,
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisTick: { show: false },
    axisLabel: {
      align: 'center',
      showMaxLabel: true,
      showMinLabel: true,
      rich: {
        l: {
          padding: [0, -70, 0, 0], // 偏移量可根据label文字长度计算
          color: 'red'
        },
        r: {
          padding: [0, 70, 0, 0], // 偏移量可根据label文字长度计算
          color: 'red'
        }
      },
      formatter: function (value, index) {
        if (index === 0) {
          return `{l|${value}}`;
        }
        if (index === data.length - 1) {
          return `{r|${value}}`;
        }
        return value;
      }
    }
  },
  yAxis: { type: 'value' },
  series: [{ type: 'line', smooth: true, data }]
};

效果展示