怎么实现如图这样的一个流程图

Question

开发需要这要一个图 要怎么实现

这张图每一行是三种颜 每一行都是从右至左移动 最大有32行 (类似于'跑马灯')
现在一点思路没有 求大佬指点
使用canvas 也没有画出来 T_T

Answer 1

人生苦短，宜用 Echarts。
echarts 貌似没有提供定制的甘特图，但是举一反三嘛！

Answer 2

1.CSS 线性渐变linear-gradient呢？不过具体的间隔位置需要计算出来:

div{
    height: 20px;
    background: linear-gradient(to right, red 160px, green 5px, green);
    background-size: 200px 100%;
}

2.使用原生js操作dom去画
3.还可以考虑使用svg或者canvas