echarts实现图表标签(label)可拖拽，以及保存拖拽后的位置

需求背景：
当echarts图表中像素点非常多，或者有像素点重合的时候，标签就会被覆盖或者重叠。为了解决这个问题，让用户体验更加友好，于是就实现了对label进行拖拽。用户可以把label拖拽到任何他想要的位置，并且能够将位置保存下来，下次还能进行编辑回显。（下文将以折线图作为示范）

实现思路：
1、首先需要实现label可拖拽
2、将拖拽后的label坐标记录下来，回传到服务端进行保存
3、编辑回显的时候将保存过的位置取出来赋值给对应的label

实现拖拽前的效果展示:
我们可以看到，线条之间重合的部分和值很接近的部分label都重叠在一起了，非常影响观看效果。

实现拖拽后的效果展示:
按照自己的审美，将label拖拽到旁边的空白区域后看起来就要好很多了。

具体实现

实现label可拖拽

我们通过对echarts官网文档的查阅，可以发现能通过配置series-line.labelLayout. draggable实现拖拽效果

注意：
1、echarts从 v5.0.0 开始支持 labelLayout。本文使用的是(echarts v5.4.0)
2、仅仅设置daggable:true是不会生效的，daggable需要跟x和y同时设置才能生效（备注：这点官方文档并没有说明，导致浪费了很多时间）
3、labelLayout在本地运行正常，但是打包后失效了：
LabelLayout需手动引入，否则打包会被tree shaking。
import { LabelLayout } from ‘echarts/features’;

我们已经知道了如果要实现拖拽，draggable需要设为true，那x和y需要设置成什么值呢，初始化的时候建议设置成label的默认位置，比如折线图的label默认展示在当前坐标点的上方，那这就是折线图标签的默认位置。可以通过labelLayout回调函数第一个参数的labelRect获取到当前label的默认位置：

 labelLayout: (e:any) => {
      return {
        draggable: true,
        y: e.labelRect.y,
        x: e.labelRect.x
      }
    }

获取拖拽后的坐标位置并保存

通过上一步的配置，我们已经能够实现label的拖拽了，那拖拽后的坐标点的位置我们要怎么获取呢？把echarts文档上上下下看了好多遍也没有发现他们给标签拖拽提供了drag回调，所以只能想办法自己实现了。
首先我们可以通过监听图表的mouseup事件来获取到鼠标松开时的坐标点位置。

  myChart.value.on('mouseup', function (params: any) {
      if (params.event.target.style.text) {
        const offsetX = params.event.offsetX / echartMain.value.offsetWidth
        const offsetY = params.event.offsetY / echartMain.value.offsetHeight
        emit('dragEnd', params, offsetX, offsetY)
      }
    })

注意：
1、我们可以看到上面代码中有一个 params.event.offsetX / echartMain.value.offsetWidth，为啥要这么写呢？
主要是为了适配不同大小的屏幕。因为图表一般都是用做大屏展示，会面临缩放，以及适配不同屏幕大小的问题，如果label位置保存的是一个固定值，那在不同的屏幕下始终在相同坐标位置展示的话就会有问题，所以这里建议保存一个相对值。我这里保存的是当前鼠标松开时的坐标点与图表区域宽高的一个比值，这样在不同的屏幕下，只需要用当前的图表宽高*这个比值就能完美的还原label的位置了。
2、mouseup能被多个元素触发，那怎样判断当前触发mouseup的元素就是label呢？
当params.event.target.style.text有值的时候说明点击的是label。因为echart的监听的mouseup方法只对图表中的元素有效果，对于横纵轴等其他地方的元素不会触发回调。如果要获取其他地方的点击回调，需要使用getZr()。而图表中的点线柱等元素都没有text属性，只有label有这个属性，所以能准确的拿到label拖拽时松开鼠标的事件。

编辑回显

此时我们已经获取到每个label移动后的位置并保存下来了，当点编辑的时候，需要将之前保存的标签位置在图表中回显出来继续编辑。我们将labelLayout改造下：

labelLayout: (e:any) => {
     const field = item.data[e.dataIndex]
     const cachePos = position?.find((item:any) => item.name === field.name && item.value === field.value)
     let x = e.labelRect.x
     let y = e.labelRect.y
     if (cachePos) {
       x = (cachePos.offsetX) * echartMain.offsetWidth
       y = (cachePos.offsetY) * echartMain.offsetHeight
     }
     return {
       draggable: true,
       y,
       x
     }
   }

前两行是取出当前标签对应的label位置，这两行代码不用关注，因为每个项目上存储的方式都不一样。当我们找到当前标签对应的位置后，用这个位置乘以图表区域的宽高，就得到了横纵轴的偏移量，再把这个值返回出去就大功告成啦！

可是真的大功告成了吗？

此时才发现一个很严肃的问题，因为用户在拖拽标签的时候，有可能拖动的是标签的头部，也有可能是中间或者尾部的位置，而labelLayout中设置的x和y是相对于标签的左上角进行设置的。比如用户拖拽的是标签的尾部，那最后记录的位置就是标签尾部拖拽完成后所在的位置。当编辑回显的时候，又相对于标签左上角来进行赋值，那么最后的效果就会产生一个标签长度的误差。
所以我们需要计算出鼠标拖拽时点击的位置相对于标签头部的偏移量，然后保存offsetX和offsetY的时候需要减去这个偏移量再保存，这样存下来的值就是相对于标签头部的坐标位置。
首先我们可以通过监听mousedown事件来获取当前鼠标按下时的位置，然后再减去上一次的位置（如果是第一次拖拽的话，就减去标签的初始位置，如果是第二次及以上次数拖拽的话，就减去上一次存储的标签位置），就得到了鼠标点击的位置相对于标签头部的偏移量：

// 监听鼠标按下事件
myChart.value.on('mousedown', function (params: any) {
     if (params.event.target.style.text) {
       const startOffsetX = params.event.offsetX / echartMain.value.offsetWidth
       const startOffsetY = params.event.offsetY / echartMain.value.offsetHeight
       emit('dragStart', params, startOffsetX, startOffsetY)
     }
   })
// 获取鼠标按下的位置相对于标签头部位置的偏移量
const dragStart = (params:any, startOffsetX:number, startOffsetY:number) => {
 const cachePos = labelPosition?.find((item:any) => item.name === params.data.name && item.value === params.data.value )
 let distX = startOffsetX
 let distY = startOffsetY
 if (cachePos) {
   distX = Math.max(startOffsetX - cachePos.offsetX, 0)
   distY = Math.max(startOffsetY - cachePos.offsetY, 0)
 }
 cachePos.distX = distX
 cachePos.distY = distY
}
// 在计算拖拽后的位置时，减去这个偏移量
const dragEnd = (params:any, offsetX:number, offsetY:number) => {
 const cachePos = props.data.chartStyle.labelPosition?.find((item:any) => item.name === params.data.name && item.value === params.data.value)
 if (cachePos) {
   cachePos.offsetX = offsetX - cachePos.distX
   cachePos.offsetY = offsetY - cachePos.distY
 }
}

到这里就真的大功告成啦～

感谢你能看到这里，有任何问题或者建议都可以与我联系，如果我的文章对你有一点点帮助或者启发，可以给我点一个小小的赞或者关注，这将是对我最大的鼓励！