vue基于Echarts的拖拽数据可视化功能实现

背景

我司产品提出了一个需求，做一个数据基于echars的可拖拽缩放的数据可视化，上网百度了一番，结果出现了两种结局，一种花钱买成熟产品（公司不出钱），一种没有成熟代码，只能自己写了，故事即将开始，敬请期待......。  不，还是先上一张效果图吧，请看......

前期知识点

1. offset（偏移量）

定义：当前元素在屏幕上占用的空间，如下图：

其中：

offsetheight: 该元素在垂直方向上的占用的空间，单位为px，不包括margin。

offsetwidth：该元素在水平方向上的占用空间，单位为px，不包括margin。

offsetleft: 该元素距离左侧并且是定位过（relative || absolute）的父元素内边框的距离。注意：如果父元素中没有一个是定位的，则是距离body元素的距离。

offsettop：该元素距离顶部并且是定位过（relative || absolute）的父元素内边框的距离。注意：如果父元素中没有一个是定位的，则是距离body元素的距离。

2. 鼠标事件

2.1 当前鼠标的坐标点

clientx：返回鼠标触点相对于浏览器可视区域的x坐标，单位为px，这个属性值可以根据用户对可视区的缩放行为发生变化。

clienty：返回鼠标触点相对于浏览器可视区域的y坐标，单位为px，这个属性值可以根据用户对可视区的缩放行为发生变化。

2.2 相关的鼠标事件

ondragstart： 规定当元素被拖动时，发生什么，该属性调用一个函数，drag（event），它规定了被拖动的数据。可通过datatransfer.setdata() 方法设置被拖数据的数据类型和值：

ondragover： 规定在何处放置被拖动的数据，默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventdefault() 方法：

ondrop：当放置被拖数据时，会发生 drop 事件。ondrop 属性调用了一个函数，drop(event)：

onmousedown: 鼠标上的按钮被按下时触发的事件

onmousemove：鼠标移动时触发的事件

onmouseup：鼠标按下后，松开时激发的事件

拖拽功能

本功能以echarts图表中柱状图为例，进行讲解：

先定义可拖拽元素

注意：元素默认是不能进行拖拽的，需要将draggable属性设置为"true",即draggable="true" 

定义放置区域

其中drop事件如下：

基于自己封装的组件的源码请看github：github地址

效果图如下：

拖动功能

此功能用到了上面提到的offsetleft、offsettop、clientx，clienty。实现思路如下：

（1）当鼠标刚按下去时，记录当前元素距离带定位的父元素的offsetleft、offsettop距离；以及当前鼠标在浏览器可视区的坐标clientx、clienty的距离。

（2）分别计算两者的差值作为偏移常量，如下：

（3）监听鼠标的移动事件，获取当前鼠标距离浏览器可是区域的坐标clientx，clienty；然后减去偏移常量，即为当前元素的坐标

说明：el为当前图表对象

由于本人封装了通用vue组件，详细拖拽方法代码如下：

如果想看封装的组件，请查看github地址：github地址

拖动效果如下图：

缩放功能

此功能用到了上面提到的 offsetwidth、offsetheight、offsetleft、offsettop、clientx，clienty。实现思路如下：

（1）先设置可缩放的四个拖拽方框

其中isresize 与 resizeflag表示是否可缩放以及是否可拖拽

（2）为每个可可缩放方框设置缩放函数，请看注释

如果想看封装的组件，请查看github地址：github地址

缩放效果如下图：

echarts缩放中存在的问题

vue中使用echarts图表自适应的几种基本解决方案，此处不再进行赘述，详情请参考如下链接：

结束语

本文只是粗略的记录了数据可视化简单demo的实现思路，如果您觉得对您有帮助，请下载源码 

喜欢的小伙伴给个star,谢谢

参考文献

到此这篇vue基于echarts的拖拽数据可视化功能实现的文章就介绍到这了,更多相关vue基于echarts拖拽数据可视化内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！