echarts gantt甘特图示例

甘特图（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

echarts gantt甘特图示例相关推荐

highcharts中gantt甘特图的使用
示例图: 官方文档参考:highcharts gantt 甘特图示例使用示例: <template><div id="container"></di ...
Silverlight Gantt甘特图项目管理解决方案
2019独角兽企业重金招聘Python工程师标准>>> Silverlight Gantt甘特图是一款非常丰富,可定制,轻量级和高性能的控件. 项目甘特图: 可视化层次的任务列表. ...
动态修改 DHTML Gantt甘特图皮肤样式
初始化一个DHTML Gantt甘特图的皮肤默认为Teracce Skin 现在项目有一个需求通过按钮动态修改甘特图主题(皮肤),在官网提供的API不难发现修改样式办法.说到底,只是改变CSS样式文件 ...
Gantt(甘特图)与PERT(项目计划评审技术)图各自的缺陷
文章目录 1 Gantt(甘特图) 2 PERT(项目计划评审技术)图 3 考题 1 Gantt(甘特图) 甘特图,也称为条状图(Bar chart).是在1917年由亨利·甘特开发的,其内在思想简单 ...
vue+echarts画甘特图
vue项目中添加echarts,只需要增加echarts依赖,然后在main.js中引入echarts就可以使用了. 1.npm install echarts --save 2.修改main.js ...
echart 时间滚动_基于 ECharts 封装甘特图并实现自动滚屏
项目中需要用到甘特图组件,之前的图表一直基于 EChart 开发,但 EChart 本身没有甘特图组件,需要自行封装经过一番鏖战,终于完成了... 我在工程中参考 v-chart 封装了一套图表组件 ...
FineReport新增多项目甘特图示例及操作
1.描述我们在做报表的时候,往往想体现其中随着时间的变化而产生的项目进度的变化和其他相关的系统进展,每当这种时候甘特图便是其中的不二之选.FineReport新增的多项目甘特图可以说是满足了大多数的 ...
gantt(甘特)图
gantt图又叫甘特图. 进度是按时间顺序计划活动的一个列表,我们称之为Gantt图,它有以下几个关键的成分: 1.横跨图顶部排列的是日历表. 2.最左边的一列包含了每项任务的标识号(ID). 3.左 ...
echarts实现甘特图
效果如下图:y轴为餐桌编号,x轴为客人预订的时间: 以8号餐桌为例,甘特数据为阴影部分,表示不同时间段客人用餐占用的时间.如果时间段有交集则说明有时间冲突,应做时间调整. vue 部分代码: < ...

echarts gantt甘特图示例

echarts gantt甘特图示例相关推荐

最新文章

热门文章