在项目中需要实现一个移动一定像素采样一次的选择刷功能。本人采用Echarts官方提供的接口实现了这一功能，关于刷选过程的生成的参考线有以下两个版本。以下如有误漏，敬请指正。

拖动选择刷，生成一条拖动轨迹的参考线：

灵感来源：

http://www.echartsjs.com/gallery/editor.html?c=line-draggable

这个官方实例实现了可以将折线图上的点任意拖拽。实现方式是在原始点上覆盖一个透明的graphic组件，将该组件定义为circle即可覆盖一个圆，而组件中正好有拖拽功能和拖拽过程的事件监听属性ondrag，绑定一个事件处理函数，在函数中定义拖拽过程的数据更改即可。

实现方式：

参考以上，本人使用graphic组件的rect定义一个矩形，设置可拖拽并绑定拖拽的事件处理函数，在函数中记录拖拽过程的位置，判断上次采样位置与当前位置的距离，满足采样精度后调用dispatchAction()接口，更新brush的位置并且会触发brushselected事件从而得到刷选的数据，在配置项中设置brush:{brushStyle: {borderWidth: 0,color:”rgba(0,0,0,0)}}取消边框和完全透明即可。由于记录了拖拽轨迹的点的位置，使用graphic的ployline组件，即可绘出一条轨迹。

绘制一条轨迹，自动采样轨迹上的数据

实现方式：

继续使用echarts的graphic组件，初始化折线的样式，再绘一个圆将其作为绘制轨迹的画笔，在拖动过程中不断记录位置，并使用vue的watch监听拖动轨迹位置的数组，位置数组更新则更新轨迹。采样的方法与上面相似，遍历位置数组，满足采样精度后调用dispatchAction()进行采样。存在的问题是位置计算计算的是点与点之间的距离，并不是轨迹曲线的长度。

项目地址：https://dev.tencent.com/u/sinpor/p/SDC_Vis_frontend/git