如何将Vue结合Echarts实现拖拽数据可视化功能？

本文共计2314个文字，预计阅读时间需要10分钟。

背景：我司产品提出了一个需求，做一个基于chars的可拖拽缩放的数据可视化，我在网上百度了一篇，发现出现了两种结构，一种是花币买成熟产品（公司不出钱），另一种是没有成熟代码，只有设计图。

背景

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

前期知识点

1. offset（偏移量）

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

其中：

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

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

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

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

2. 鼠标事件

2.1 当前鼠标的坐标点

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