echart x轴标签偏移_echarts x 轴最后一个刻度右对齐

在我们的数据图表中，x 轴的最后一个 label 应该是右对齐的。echarts 官方没有参数来配置这个功能，导致文字被截掉了半截。挺失望的，这种情况实在是太有需求了。在不能修改源码的情况下，我们只能通过自己手动来实现这个需求。

xAxis: {

type: 'category',

boundaryGap: true,

data: xAxisData,

axisTick: {

show: false,

},

axisLine: {

lineStyle: {

width: 1,

color: '#ccc',

}

},

axisLabel: {

color: '#89889C',

showMinLabel: true,

showMaxLabel: true,

formatter: (() => {

let currentYear = ''

return (value, index) => {

const year = value.substr(0, 4)

const month = value.substr(4, 2)

const shouldNotShowYear = index > 0 && currentYear === year

const isLast = value === xAxisData[xAxisData.length - 1]

const text = shouldNotShowYear ? month : year + '/' + month

const label = isLast && !shouldNotShowYear ? `{a|${text}}` : text

currentYear = year

return label

}

})(),

rich: {

a: {

width: 70,

align: 'left',

},

},

},

上面红色部分是关键，我们要让最后一个 label 靠右对齐，但是它受到宽度的限制，所以我们干脆来了一个宽度，直接将 label 的宽度和文字的整体高度相等，这样就可以让文字显示完整了。

但是，你可能会说，我怎么知道文字的总体宽度是多少？label 的字数可多可少，不可控啊。我会告诉你，有一个东西可以帮助你在 canvas 中获取文本的宽高，你听说过吗？通过 canvas 计算文字宽高之后，赋值给 rich 里面的 width。echarts 内部会根据你给定的宽度重新布局 x 轴文本的展示，由于我们设置了 showMaxLabel，所以，无论如何最后一个 label 都会展示，如果空间不够，它会把前一个 label 隐藏起来。