ECharts畫分類甘特圖

• 項目最近做任務排產，需要繪畫甘特圖，並且每兩份一組，做了一個JQuery快速做了POC，實現了大部分功能，後來持續開發，做到了劃定當前時間，任務多了後固定左側列和頂部座標軸行等等。
• 分享博客的話就簡單的分享一下做的POC吧。實現的初步效果如下
  

分析：

• 左側的軸樣式美觀程度比較高，且需要分組，分類，我初次嘗試echarts分組，樣式自定義程度不好，距離還得xy算偏移量
• 左側使用css 右側使用echarts，則會出現圖表和css自定義的樣式行對不上等等，分類隨時還需要空一行
• 每個不同的生產內容顏色區塊，需要對齊時間
  …等等

實現：

• 先畫左側的樣式，固定好行高
• echarts.graphic.clipRectByRect 自定義左側ECharts
• 自定義categories中的一組數據爲blank，則表示要空一行數據
• 採用時間座標

源碼

https://github.com/WionWan/GanttChart