唐霜的博客

在我们的数据图表中，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 隐藏起来。

在移动端 touch 事件中，有 touches, targetTouches, changedTouches 这三个属性，它们都是一个 Touch 对象的列表，但它们所代表的意思不同：

• touches: 当前在屏幕上的触点，因为同一时间，用户可能有多个手指同时触摸在屏幕上，touches 中保存了所有触点信息
• changedTouches: 触发当前这个 touch 事件的真正触点信息，当然，也可能有两个以上的手指同时触发，比如 touchmove 事件，可以由两个以上手指同时触发
• targetTouches: 列出 touches 中与 touchstart 事件时所在 target element 相同的 Touch 对象，如果由于 touchmove 移动出了 touchstart 时的 element，那么 targetTouches 不会包含不在 element 中的那些触点信息。

因为 touch 事件和 mouse 事件不同，touch 事件指出事件发生时屏幕上的所有触点信息，表明可能存在多个触点。但是由于事件是不连续的，为了区分触点，Touch 对象会有一个 identifier 属性，它是一个 0 开始的索引值。手指放到屏幕时，会用一个 identifier 标记它，这样开发者就可以知道当前 changedTouches 中每个触点和其他触点的具体对应关系了。