echarts 自定义甘特图

效果
思路
实现
- 先来看ganttItem的实现![在这里插入图片描述](https://img-blog.csdnimg.cn/63c1e30729ea4c2288bc693716acd3f7.png)
- 数组对象分组处理
- y轴自定义的实现就相对简单些
总结

效果

echarts 官网实例

思路

官网展示的甘特图，其实也是通过自定义type: 'custom'实现的。

1.grid,xAxis,yAxis属性可以根据你的业务需求进行样式调整。
2.tooltip,是可选的主要控制的是甘特图鼠标hover的提示文字。
3.series是核心代码。

实现

核心代码如下

      series: [{id: 'flightData',type: 'custom',renderItem: (params:any, api:any)=>{// seriesData 是每个甘特图段的数据值console.log(seriesData,'seriesData')let color = api.value(DIM_TIME_TASK) === currentTask ? currentColor : 'grey'// color 是根据我的业务需求进行的，单行甘特段颜色设置var categoryIndex = api.value(DIM_CATEGORY_INDEX);var timeArrival = api.coord([api.value(DIM_TIME_ARRIVAL), categoryIndex]); //单个段落起始值var timeDeparture = api.coord([api.value(DIM_TIME_DEPARTURE), categoryIndex]);//单个段落结束值var barLength = timeDeparture[0] - timeArrival[0] || 50;var barHeight = api.size([0, 1])[1] * HEIGHT_RATIO;var x = timeArrival[0];var y = timeArrival[1] - barHeight;var rectNormal = this.clipRectByRect(params, {x: x,y: y,width: barLength,height: barHeight,});console.log(rectNormal,'rectNormal')return {type: 'group',children: [{type: 'rect',shape: rectNormal,style: api.style({                                 fill: color,textFill: '#fff',text:aliasValue ? api.value(DIM_TIME_AlIAS)  + '' : api.value(DIM_TIME_TASK) + ''})},]};},encode: {x: [DIM_TIME_ARRIVAL, DIM_TIME_DEPARTURE],y: DIM_CATEGORY_INDEX,tooltip: [aliasValue ? DIM_TIME_AlIAS : DIM_TIME_TASK, DIM_TIME_ARRIVAL , DIM_TIME_DEPARTURE]  //此处控制tooltip展示的值},data:seriesData},{type: 'custom',renderItem: (params:any,api:any)=>{var interval = api.size([0,1])[1]var newY = api.coord([0, api.value(0)])[1];if (newY < params.coordSys.y + 5) {return;}return {type: 'group',position: [60, newY - interval/2 ],children: [{type: 'text',style: {text:arrDataY[api.value(0)],textAlign: 'center',textFill: colorY,}}]};},encode: {x: -1,y: 0},data: arrDataY.map((it:any,i:number)=>i)}]

先来看ganttItem的实现

请仔细看seriseData的值，会发现下标为0，1名字都是demo，最后一项都是0，6,7都是demo14，最后一项都是5，那是因为是我将后台返回的数据进行了进行分组（分组方法下面会讲到）。

同时会按照分组后，为其添加下标，官网数据也是如此的，。

也就是说，如果想让甘特图一行显示多块儿，就要满足这两个数组会有同样的值（注意：这个值必须是数字，在canvas绘制并且会根据你的这个值进行排序绘画）,这也就是为什么我的demo会显示在最下面第一行。

细心的同学也就会发现renderItem 其实是循环处理的seriesData，如上图我打印的4，0，1分别就对应了排序下标，开始时间，结束时间。

简而言之：就是将data数据组成 [ [单个甘特段开始值，单个甘特段结束值，当前甘特行在哪行显示的下标] ],其余的都可以不要

数组对象分组处理

export const getSeriesData = (arr:Array<any>,taskVal:string)=>{// arr 原始数据  taskVal 根据哪个字段进行分组 我是根据 task进行的分组let arrData:any = [];console.log(arr,'原始数据 两笔数据')// 第一步 query 数据整合arr.forEach((item:any)=>{let fieldList:any = []item.fields.forEach((it:any) => {fieldList.push({name:it.name,value:it.values.buffer})});     const fieldData = getFieldData(fieldList)arrData = arrData.concat(fieldData.newArr);})console.log(arrData,'将两笔数据进行整合')// 第二部 根据task进行分组处理var taskRather:any = []var taskArr:any = []for(let i = 0 ; i < arrData.length ; i ++){const arrDataInfo = arrData[i];if(!taskRather.find((it:string)=>it === arrDataInfo[taskVal])){// 不重复tasktaskArr.push({task:arrDataInfo[taskVal],children:[arrDataInfo]})taskRather.push(arrDataInfo[taskVal])}else{// 重复的taskfor(let j = 0 ; j < taskArr.length ; j ++){const taskInfo = taskArr[j];if(arrDataInfo[taskVal] === taskInfo.task){taskInfo.children.push(arrDataInfo)}}}}console.log(taskArr,'分组后的数据')// 第三步生成对应的index，用于在panel显示 tips:必须判断children长度，进行newData添加let newData:any = [ ]for(let i = 0 ; i < taskArr.length ; i ++ ){const taskInfo = taskArr[i];if(taskInfo.children.length > 1){for(let j = 0 ; j < taskInfo.children.length; j ++){const data = taskInfo.children[j]data.group = inewData.push(Object.values(data))}}else{for(let j = 0 ; j < taskInfo.children.length; j ++){const data = taskInfo.children[j]data.group = inewData.push(Object.values(data))}}}console.log(newData,'最后组成的符合echarts的数据')return {arrData:newData,}
}

export const getFieldData = (arr:Array<any>)=>{let newArr:any = [];for(let i = 0 ; i < arr[0].value.length ; i ++){let obj:any = {}for(let j = 0 ; j < arr.length ; j ++){obj[arr[j].name] = arr[j].value[i]}newArr.push(obj)}return {newArr}}

运行结果如下

y轴自定义的实现就相对简单些

arrDataY 就对应了每行的名字,data取下标就变成了[0,1,2,3,4,5]。

有个注意点是position: [60, newY - interval/2 ], 我对interval/2这样y轴的文字就会显示在每行的中间位置上，不/2就会在每行x轴显示。

yAxis的max属性换成rrDataY.length 即可

    yAxis: {axisTick: { show: false },splitLine: { show: false},axisLine: { show: true },axisLabel: { show: true },min: 0,max:arrDataY.length},

总结

其实甘特图整个不是特别复杂，只需要组成echarts符合的数据就好，官网的功能更复杂所以看起来很复杂。

为方便理解:可以将下面testData进行替换GanttItem中的data值，就会很明显的理解了

const testData = [['0',1496840400000,  //2017-6-7 21:0:01496934000000,  //2017-6-8 23:0:0],['1',1496924700000,  //2017-6-8 20:25:01496934000000, //2017-6-8 23:0:0],['1',1496840400000,  //2017-6-7 21:0:01496878800000,  //2017-6-8 7:40:0],['2',1496916600000,  //2017-6-8 18:10:01496934000000,//2017-6-8 23:0:0]
]