Echarts按时间生成多个条框的甘特图

怼烎@ 2022-10-17 13:47 11阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70][]

代码：

initChart(item) {
 this.chart = echarts.init(
 document.getElementById("popupGanttDispatchControl")
 );
 
 let seriesData = [];
 let finishSeriesDate = []; //按照完成数量和计划数量 计算时间
 let yAxisData_plant = []; //工位名
 this.seriesDataList.forEach((item, index) => {
 yAxisData_plant.push(item.workCellCode);
 item.dispatchOrderList.forEach((listItem, listIndex) => {
 let startTime = new Date(listItem.planStartTime).getTime();
 let endTime = new Date(listItem.planEndTime).getTime();
 let finishEndTime =
 (endTime - startTime) * (listItem.finishedNum / listItem.needNum) +
 startTime;
 seriesData.push({
 name: listItem.progName,
 value: [index, startTime, endTime],
 dispatchOrderCode: listItem.dispatchOrderCode,
 needNum: listItem.needNum,
 finishedNum: listItem.finishedNum,
 planStartTime: listItem.planStartTime,
 planEndTime: listItem.planEndTime,
 });
 
 finishSeriesDate.push({
 name: listItem.progName,
 value: [index, startTime, finishEndTime],
 dispatchOrderCode: listItem.dispatchOrderCode,
 needNum: listItem.needNum,
 finishedNum: listItem.finishedNum,
 planStartTime: listItem.planStartTime,
 planEndTime: listItem.planEndTime, //parseTime(finishEndTime, "{y}/{m}/{d} {h}:{i}:{s}"),
 });
 });
 });
 
 this.chart.setOption({
 backgroundColor: "#fff",
 tooltip: {
 formatter: function (params) {
 return (
 `程序名: ${params.name}` +
 "" +
 `派工单编码: ${params.data.dispatchOrderCode}` +
 "" +
 `计划数量: ${params.data.needNum}` +
 "" +
 `完成数量: ${params.data.finishedNum}` +
 "" +
 `计划开始时间: ${params.data.planStartTime}` +
 "" +
 `计划完成时间: ${params.data.planEndTime}`
 );
 },
 },
 grid: {
 containLabel: true,
 left: 20,
 },
 dataZoom: [
 {
 show: true,
 type: "slider",
 filterMode: "none",
 realtime: false,
 },
 {
 type: "inside",
 show: true,
 },
 ],
 xAxis: {
 type: "time",
 scale: true,
 
 axisLine: { show: true },
 splitLine: {
 show: true,
 lineStyle: { color: "rgba(233,233,233,0.1)" },
 },
 },
 yAxis: {
 axisLine: { show: true },
 splitLine: {
 show: true,
 lineStyle: { color: "rgba(233,233,233,0.1)" },
 },
 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: 12,
 },
 {
 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,
 },
 itemStyle: {
 normal: {
 color: "#0098d9",
 },
 },
 data: seriesData,
 },
 {
 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: 12,
 },
 {
 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,
 },
 itemStyle: {
 normal: {
 color: "#67C23A",
 },
 },
 zlevel: 2,
 data: finishSeriesDate,
 },
 ],
 });
 },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70]: /images/20221014/848d3234e0f64d98995eb0caeff826f7.png