无限走势图业务组件

133 阅读1分钟

背景:

  1. 业务需要一个能够支持无限滚动,拖拽的走势图

特点

  1. 首屏最大支持7条,各一年的数据量,并且支持任意左右拖拽,查看任意时间点数据。

效果图

image.png

思路分析

  1. 首屏数据,首次先渲染可使区域内,一年的数据量
  2. 为了能支持拖拽效果,需要用到 datazoom,实现拖拽效果
  3. 其次需要判断更新的边界,可以判断当前拖拽距离距离当前日期上下界 4.并且要求纵轴分割线需要随着拖拽,实时发生计算 并且拖拽后,由于并没有记录当期拖拽,具体位置,会导致重渲染后,丢失位置信息,因此,还需要把每次拖拽后的,对应横轴坐标,进行实时记录。

优化

  1. 实现后,发现,由于一次性加载的数据量较大,导致当触发到底后,。得等待大概3秒以上,这样对于用户体验较差
  2. 结合虚拟滚动思想,对于固定高度的情况,将整体视图分为,上缓冲区,可视区域,下缓冲区,对于可视区域,我预先加载一年,上缓冲区,加载3个月,下缓冲区添加3个月,如该判断拖拽距离上下边界一定距离,如该时间靠前,继续向前请求,一年。
  3. 如果遇到了,超大量级数据,可以采用echarts的采样策略,开启sampling lttb 采样策略,过滤一些数据,确保以性能优先

代码 写作中。。。。。。。。。。