实现会拐弯的时间轴

宽度自适应且能拐弯的时间轴效果如下：

背景

大多数的水平时间轴，一行放不下的情况下，会出现滚动条。不在屏幕内的时间点只能通过拖动滚动条的方式来查看。这种实现方式，无法满足用户一眼就能看到所有时间点的需求。

改善思路

一行展示不下的时间轴，拐个弯拐到下一行继续展示，并且监听屏幕宽度的变化，自适应每一行能展示多少个时间点。

实现手段

借助ngx-tethys组件库的水平时间轴(官方示例如下)，通过自己调整样式、动态计算并添加拐线。

具体实现

整个时间轴分为 左、中、右 三个部分。中间时间轴区域定宽且宽度只能是单个时间点宽度的n倍，左、右两侧拐弯线容器的宽度均分剩余宽度且最小宽度定为50。

效果图

宽屏幕时：

缩小屏幕后：

继续缩小屏幕：

再缩小屏幕：

具体实现代码

由于最近比较忙，我还没有去整理(美化)我的实现源码，想要自己试试的小伙伴可以先将就一下，看看我简陋的实现“原理图”，后面有空我会将源码分享给大家。