甘特图（Gantt chart）又称为横道图、条状图(Bar chart)。其通过条状图来显示项目、进度和其他时间相关的系统进展的内在关系随着时间进展的情况。以提出者亨利·劳伦斯·甘特（Henry Laurence Gantt）先生的名字命名。
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script> </head> <body> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <div id="main" style="width: 1200px; height: 400px"></div> <script> let data = [ { list: [ { colorNum: 0, endTime: "2018-08-02 14:00:00", item: "item1", quantity: 1960, startTime: "2018-08-02 8:00:00", }, { colorNum: 1, endTime: "2018-08-04 12:00:00", item: "item2", quantity: 492, startTime: "2018-08-04 08:00:00", }, { colorNum: 2, endTime: "2018-08-04 18:00:00", item: "item3", quantity: 20837, startTime: "2018-08-04 14:00:00", }, { colorNum: 3, endTime: "2018-08-05 12:00:00", item: "item4", quantity: 3620, startTime: "2018-08-04 20:00:00", }, { colorNum: 0, endTime: "2018-08-05 24:00:00", item: "item5", quantity: 7200, startTime: "2018-08-05 14:00:00", }, ], plant: "工厂1", }, { list: [ { startTime: "2018-08-03 12:00:00", endTime: "2018-08-04 12:00:00", quantity: 20, colorNum: 0, item: "item6", }, ], plant: "工厂2", }, { list: [ { startTime: "2018-08-04 12:00:00", endTime: "2018-08-06 00:00:00", quantity: 30, colorNum: 0, item: "item7", }, { startTime: "2018-08-06 08:00:00", endTime: "2018-08-06 12:00:00", quantity: 20, colorNum: 1, item: "item8", }, { startTime: "2018-08-06 14:00:00", endTime: "2018-08-08 12:00:00", quantity: 10, colorNum: 2, item: "item9", }, { startTime: "2018-08-08 20:00:00", endTime: "2018-08-10 12:00:00", quantity: 10, colorNum: 3, item: "item10", }, ], plant: "工厂3", }, { list: [ { startTime: "2018-08-02 20:00:00", endTime: "2018-08-03 12:00:00", quantity: 20, colorNum: 1, item: "item11", }, { startTime: "2018-08-03 20:00:00", endTime: "2018-08-04 12:00:00", quantity: 15, colorNum: 2, item: "item12", }, { startTime: "2018-08-04 20:00:00", endTime: "2018-08-05 12:00:00", quantity: 15, colorNum: 3, item: "item13", }, ], plant: "工厂4", }, ]; let start_ = "2018-08-02 00:00:00", end_ = "2018-11-05 24:00:00"; //自定义时间 let seriesData = []; let yAxisData_plant = []; //工厂名 data.forEach((item, index) => { yAxisData_plant.push(item.plant); let bgColor; item.list.forEach((listItem, listIndex) => { switch (listItem.colorNum) { case 0: bgColor = "rgba(0,187,255,.4)"; break; case 1: bgColor = "rgba(80,227,194,.4)"; break; case 2: bgColor = "rgba(255,115,115,.4)"; break; case 3: bgColor = "rgba(255,207,107,.4)"; break; default: bgColor = "rgba(0,187,255,.4)"; } let startTime = new Date(listItem.startTime).getTime(); let endTime = new Date(listItem.endTime).getTime(); seriesData.push({ name: listItem.item, value: [index, startTime, endTime, listItem.quantity], itemStyle: { normal: { color: bgColor, }, }, }); }); }); option = { backgroundColor: "#26263C", tooltip: { formatter: function (params) { //console.log(params) return params.marker + params.name; }, }, grid: { top: 48, left: 100, right: 50, bottom: 50, height: 300, }, dataZoom: [ { show: true, type: "slider", filterMode: "none", realtime: false, height: 10, top: 370, startValue: new Date(start_).getTime(), endValue: new Date(start_).getTime() + 3600 * 24 * 1000 * 7, minValueSpan: 3600 * 24 * 1000 * 7, handleIcon: "path://path://M100, 100m -75, 0a75,75 0 1,0 150,0a75,75 0 1,0 -150,0", handleSize: "120%", handleStyle: { color: "#fff", shadowColor: "rgba(0, 0, 0, 0.5)", shadowBlur: 4, }, textStyle: { color: "transparent", }, borderColor: "transparent", backgroundColor: "#D7F4FF", dataBackground: { lineStyle: { width: 0, }, areaStyle: { color: "transparent", }, }, fillerColor: "#00EBFF", labelFormatter: "", }, { type: "inside", show: true, zoomOnMouseWheel: false, moveOnMouseWheel: true, moveOnMouseMove: true, preventDefaultMouseMove: true, }, ], xAxis: { type: "time", min: new Date(start_).getTime(), max: new Date(end_).getTime(), scale: true, position: "top", splitNumber: 7, axisLabel: { show: true, textStyle: { color: "#ffffff" }, interval: 0, margin: 15, fontSize: 14, formatter: function (value, index) { var date = new Date(value); var texts = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join("/"); return texts; }, }, axisLine: { show: false }, splitLine: { show: true, lineStyle: { color: "rgba(233,233,233,0.1)" }, }, axisTick: { lineStyle: { color: "#fff", }, }, }, yAxis: { axisLine: { onZero: false, show: false, }, axisLabel: { show: true, textStyle: { color: "#ffffff" }, fontSize: 14, }, splitLine: { show: true, lineStyle: { color: "rgba(233,233,233,0.1)" }, }, inverse: true, data: yAxisData_plant, }, series: [ { type: "custom", renderItem: function (params, api) { var categoryIndex = api.value(0); var start = api.coord([api.value(1), categoryIndex]); var end = api.coord([api.value(2), categoryIndex]); var height = api.size([0, 1])[1] * 0.6; var rectShape = echarts.graphic.clipRectByRect( { x: start[0], y: start[1] - 5, width: end[0] - start[0], height: 10, }, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height, } ); return ( rectShape && { type: "rect", shape: rectShape, style: api.style(), } ); }, encode: { x: [1, 2], y: 0, }, data: seriesData, }, ], }; // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById("main")); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
效果如下
参考： https://echarts.apache.org/examples/zh/editor.html?c=custom-gantt-flight&theme=dark
