Echarts只把最后一个右对齐

问题

Echarts是使用canvas画的图形；在默认的情况下，echarts会和我们写的div有边界，这种情况有时候是我们不想看到的

解决问题的办法

使用echarts中 grid属性

grid: {
       right: 0, // 控制距离div的右边界的距离
       top: '10%',
       bottom: '10px'
       left: 0
      },

下面是仅使用 right形成的效果

option = {
  grid:{
      right: 0
    },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      areaStyle: {}
    }
  ]
};

结果如下图

这个时候就会发现x轴的最后一个 sun显示的不全；这个是我们就可以使用formatter解决这个问题

let xAxisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
option = {
  grid: {
            right: 0,
          },
  xAxis: {
    type: 'category',
    boundaryGap:false,
    data: xAxisData,
    axisTick: {
      show: false
    },
    axisLabel: {
      formatter: (() => {
       return (value, index) => {
      const isLast = value === xAxisData[xAxisData.length - 1]
      const label =isLast? `{a|${value}}` : value
      return label
    }
  })(),
  rich: {
    a: {
      width: 40,
      align: 'left',
      },
    },
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      areaStyle: {}
    }
  ]
};