美文网首页
echarts实现图表标签(label)可拖拽,以及保存拖拽后的

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

作者: pudding的旋律 | 来源:发表于2023-08-24 16:05 被阅读0次

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

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

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


拖拽前.jpg

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


拖拽后png

具体实现

实现label可拖拽

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

注意:
1、echarts从 v5.0.0 开始支持 labelLayout
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
 }
}

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

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

相关文章

  • RecyclerView 拖拽item后顺序错乱

    问题描述 recyclerview实现(2行4列)拖拽图标能调整顺序。同一行图标拖拽后保存无异常,不同行图标拖拽切...

  • NGUI背包系统

    NGUI背包系统实现装备的拾取、拖拽,交换以及数量的叠加 步骤一:实现游戏装备的拖拽 首先导入NGUI插件,导入后...

  • HTML5拖拽drag

    通过拖拽实现页面元素的位置改变 实现拖拽效果 源元素 - 要拖拽的文件 目标元素 - 要拖拽到哪里去 目前实现拖拽...

  • 拖拽操作

    应用: 1.拖拽排序2.拖拽上传3.拖拽裁剪 拖拽流程 确定可拖拽的内容-->开始拖拽-->拖拽过程-->结束拖拽...

  • HTML5实现拖拽

    实现拖拽效果源元素 - 要拖拽的文件目标元素 - 要拖拽到哪里去 目前实现拖拽效果使用原生DOM就能实现 - 最麻...

  • 拖拽API

    实现拖拽效果 目前实现拖拽效果 HTML5拖拽 源元素事件例子 目标元素事件 从本地拖放图片到页面中 实现拖拽

  • 原生拖拽,拖放事件(drag and drop)

    拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的...

  • AndroidTagView 云标签

    介绍 可自定义的标签视图,支持添加标签,点击,长按弹出删除对话框,以及拖拽排序。 Github 类似控件 andr...

  • 利用转场动画来实现类似QQ语音通话界面隐藏和出现的效果

    浮动可拖拽按钮功能的实现可以参考前一篇文章。利用手势拖拽控件并设置拖拽范围.接下来利用转场动画来实现类似QQ语音通...

  • MacOS 开发(十六) : 文件拖拽

    文件拖拽的核心是拖拽目标视图 (DragDestinationView),此方法会检测目标是否可拖拽类型,拖拽文件...

网友评论

      本文标题:echarts实现图表标签(label)可拖拽,以及保存拖拽后的

      本文链接:https://www.haomeiwen.com/subject/ifbmmdtx.html