最近接到一个将多人任务进度做成甘特图的需求,本以为用echars很容易就实现了,没想到啊,断断续续搞的头大,大概就是使用EChars官网的实栗不足以打到需求目标,所以开始了我为期一周的修修补补,终于是完成了,写一下总结:
包含了缩放、横轴分组显示一行展示多条内容、以及数据之间的对比效果
首先效果图上个: 数据mock有点少,可自行添加,项目中数据量大,我添加了分页,可按需添加
点击效果:
点击对比效果:
右边的点击效果这次需求赶还没有添加,后续更新。。。上代码啦
加粗!! 完整到带mock数据的代码~~
index.vue
<style scoped lang="scss" src="./_.scss" />
<style lang="scss" src="./index.scss" />
<template lang="pug" src="./_.pug" />
<script src="./_.js" />
_.js
/**
* 工序多人模式甘特图
* 甘特图官网:https://echarts.apache.org/zh/option.html#title
*/
import echarts from 'echarts';
import moment from 'moment';
import * as R from 'ramda';
import {
MOCKData, employeesMOCK } from './constant';
// 注意echarts版本,高版本不支持透明度rgba,以下代码版本为3.8.5
export default {
name: 'instructGanttCopy',
data() {
return {
targetDate: moment().format('YYYY-MM-DD'),
ganttChart: null,
chartData: [],
employeeIds: {
},
employeeIdsTable: [],
};
},
computed: {
},
mounted() {
window.addEventListener(
'resize',
window._.debounce(() => {
this.resizeCharts();
}, 200),
);
this.searchResult();
// this.initChart();
},
methods: {
searchResult() {
this.chartData = (R.map(item => ({
...item,
factStartTime: moment(item.factStartTime).format('YYYY-MM-DD') === '1971-01-01' ? '--' : item.factStartTime,
factEndTime: moment(item.factEndTime).format('YYYY-MM-DD') === '1971-01-01' ? '--' : item.factEndTime,
}), MOCKData)) || [];
const setEmp = (!R.isEmpty(MOCKData) && [...new Set(MOCKData.map(x => x.employeeId))]) || [];
const emp = (setEmp && !R.isEmpty(setEmp) && setEmp.map((item, index) => {
const noPeopleEquipments = R.map(x => !R.isEmpty(x) && `${
x.equipments},`, R.filter(employee => !R.isEmpty(employee) && employee.employeeId === 'no_people', MOCKData));
return {
[item]: {
...employeesMOCK[index],
employeeOrEquipments: item === 'no_people' ? ((!R.isEmpty(noPeopleEquipments) && [...new Set(noPeopleEquipments)]) || '') : item,
},
};
})) || {
};
this.employeeIds = emp && !R.isEmpty(emp) && R.reduce((cur, per) => Object.assign(cur, per), {
}, emp);
this.employeeIdsTable = Object.values(this.employeeIds);
this.initChart()