#打卡 Day08

书接上回...
总结（下篇）
上回说到：核心难点就在x轴，因为x轴要求是时间轴，且并不是独立的，需要和图关联，水平条形图长度要表示其在x轴上的值区间。echarts已经pass掉。下面调研antdcharts，惊喜的是有区间条形图的直接示例，且通过文档一步步修改示例，可以做到x轴为时间轴，区间值也很好表示，只要数据体是数组形式，内部直接就处理成对应的条形图了。然后继续，略感遗憾的是，缩略轴slider组件，是根据y轴的名称进行缩略的，至少echarts等我所见过的都是以x轴为基，进行缩略的。只能待定。
在翻阅文档时，不难发现，antdcharts的上面是g2plot，可以说官方示例几乎一模一样，区别就是antdcharts是基于g2plot为react量身打造的。当时心想：都找到你“爸”了，还离成功远吗。当即尝试，结果有喜有悲，喜的是，g2plot更加灵活，时间轴的区间可以根据数据自适应，无需自己设置最大最小值，slider组件竟然是基于x轴。悲的是，slider组件只是基于数据值里面的时间区间，并不是真正意义上可以调整时间区间进行缩略，实际效果与antdcharts一般无二，只是slider轴上的文本不一样，本质上也是可以自定义的，看来这点上也只是继承了。
最后：还是选择了antdcharts。理由是与react亲和度更高，好修改。虽然无法使用自带组件了（slider经调研无法使用），咱可自定义这部分，ui就不自己弄了，结合antd的slider浅浅的实现该功能，也算是师出同门。

代码实现：先以实现为目的，后面根据页面的整体方向进行封装拆分（毕竟现在只知道有这个图）。图的基本框架很好弄，需要做的有自定义tooltip提示框，需要提示其他的数据信息，这里就是纯处理数据了，把接口数据处理成图需要的，再处理成tooltip需要展示的。slider自定义组件弄了一天，要处理的细节有点多，所以慢慢来了，在utils下搞了一个处理时间的工具文件。获取当前日期的前/后N天，两日期之差...总之都是为slider服务，滑动slider也是在操作x轴的区间范围，重绘图表超出进行切割。

后话：这也仅仅只是开始，后面的需求还在继续。例如：页面展示九宫格的图，点其中一个要放大完整展示在当前区域内。以及图上的各种细节...

路遥遥之码(马)力 Ya~~~~
展开
青训营-快乐出发
评论
相关推荐