自定义Echarts的brush组件

在项目中需要实现一个移动一定像素采样一次的选择刷功能。本人采用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的brush组件》

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

实现方式:

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

《自定义Echarts的brush组件》

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

点赞
  1. 梦梦说道:

    你好,brush会导致散点图重新绘制,超过5k的数据量,就无法框选,请问有什么解决方案码

    1. hello dear说道:

      你好,抱歉回复这么晚。已经这么久了你可能已经解决,我还是回复一下我的解决方案,我当时也陷于这个问题长达一周,我记得在博客记录了,然而刚才找了一遍没找到。后来突然想到的解决方案是按一定数据量对数据切割,对每段数据设置一个series方可解决。如需这部分代码,可以打开浏览器控制台找到我的联系方式。

发表评论

电子邮件地址不会被公开。 必填项已用*标注