Vue+Element制作横道图

横道图，现在记录一下代码

参考： https://blog.csdn.net/qq_3359...
根据以上参考的思路，做了优化，但是整体还是有些区别的。

思路：

1.根据表格的开始与结束时间，记录每条数据的开始与结束时间戳，并对比出所有表格最开始的时间与最晚时间
2.根据表格最开始的时间与最晚时间，记录展示列(eg:[{year: 2015,months: [],days: []}])，细节就是每个月都记录开始日与结束日的时间戳，每天天也记录时间戳
3.利用展示列的时间戳，来动态计算

备注：一开始做的时候，每个单元格只计算出自己的单元格内条幅宽度然后优化就是把每个单元格去掉，每行只留下一个就可以了，然后算出总体条幅宽度计算，后来发现当你的列足够少，那么单元格的宽度是不固定的，那么此种方法就不合适了，因此仍然在列少时，使用第一次做的，每个单元格只计算出自己的单元格内条幅，在代码中有体现

效果图

代码

HTML：

JAVASCRIPT

CSS

---

右侧图表与左侧的滚动条独立互不影响

效果图

代码

html

JAVASCRIPT

CSS

---

发现：

当使用element 表格的fixed，会把表格绘制两份，导致有些计算方法重复执行。

测试

月|日
2016-05-15至2017-01-30工时为275天，大约渲染耗时:3s
2016-05-15至2017-10-30工时为183天，大约渲染耗时:2s
2016-05-15至2017-07-30工时为91天，大约渲染耗时:1.5s
2016-05-01至2016-07-30工时为16天，大约渲染耗时:1s

年|月
2016-05-01至2017-07-30工时为395天，大约渲染耗时:1s
2016-05-01至2017-12-30工时为609天，大约渲染耗时:1s
2016-05-01至2018-12-30工时为974天，大约渲染耗时:1s
2016-05-01至2019-12-30工时为1339天，大约渲染耗时:1.5s
2016-05-01至2020-12-30工时为1705天，大约渲染耗时:1.5s
2016-05-01至2021-12-30工时为2070天，大约渲染耗时:1.5s
2016-05-01至2022-12-30工时为2435天，大约渲染耗时:1.5s
2016-05-01至2025-12-30工时为2435天，大约渲染耗时:2s
2016-05-01至2026-12-30工时为2435天，大约渲染耗时:2.5s