echarts 数据区域缩放dataZoom

先补充一些echarts相关的基础知识:
官方文档:https://echarts.apache.org/zh/api.html#echarts
区域缩放事件:
其实呢,ecahrts实例里面,把toolBox 就可以实现区域的缩放
echarts 数据区域缩放dataZoom
点击右侧,第一个按钮,可以拖动事件轴,点击第二个按钮,可以实现回退的效果。

echarts 数据区域缩放dataZoom
但是:如果,不依官方的api,自己手动实现一个区域缩放、回退的效果,如何实现:
思路如下:
echarts 数据区域缩放dataZoom
大概分为三步:
第一步:判断拖拽的条件:拖拽的本质,是x轴的在修改,举个例子,如果横轴表示的时间,每个点表示一分钟,那么,如果相邻的两个点就是一分钟了,那就没必要进行拖拽了。
除去这个条件,怎样触发拖拽事件呢:
dataZoomSelectActive: true
echarts 数据区域缩放dataZoom
第二步:实现了bar图的拖拽,创建一个空数组,把每一次拖拽的记录,放在这个数组里面。
拖拽的主要数据:无非就是startValue,endValue,
echarts 数据区域缩放dataZoom
echarts 数据区域缩放dataZoom
第三步:回退:
第二步把拖拽的记录都存下来了,回退无非就是把这个数组中的数据依次删除:
echarts 数据区域缩放dataZoom
需要注意的地方:
1.datazoom 事件可以触发,弄清楚他的前提条件。
2. datazoom事件触发的配置:dataZoomSelectActive: true
3. 取消datazoom事件:dataZoomSelectActive: false并没有生效,写了一个方法,让bar图去重绘;
4. 这套逻辑,line图也可以适用
5. 某些情况下,拖拽无效,举个例子:拖到最右端的时候,拖拽无效
echarts 数据区域缩放dataZoom
打印了一下数据:
echarts 索引:
echarts 数据区域缩放dataZoom
而endValue :
echarts 数据区域缩放dataZoom
解决方案:把datazoom 的索引,往前移一位:
echarts 数据区域缩放dataZoom