使用EChars实现较为复杂的甘特图，包含多任务组合，完整到mock好数据的代码

最近接到一个将多人任务进度做成甘特图的需求，本以为用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()