vue echart甘特图

 let _this = this;
      let data = [
        {
          list: [
            {
              colorNum: 0,
              endTime: "2019-10-10 00:00:00",
              item: "墙柱",
              quantity: 1960,
              startTime: "2019-10-08 00:00:00"
            }
          ],
          plant: "墙柱"
        },
        {
          list: [
            {
              colorNum: 1,
              endTime: "2019-10-12 00:00:00",
              item: "楼面",
              quantity: 1960,
              startTime: "2019-10-09 00:00:00"
            }
          ],
          plant: "楼面"
        },
        {
          list: [
            {
              colorNum: 2,
              endTime: "2019-10-10 00:00:00",
              item: "梁",
              quantity: 1960,
              startTime: "2019-10-08 00:00:00"
            }
          ],
          plant: "梁"
        },
        {
          list: [
            {
              colorNum: 3,
              endTime: "2019-10-11 00:00:00",
              item: "吊模",
              quantity: 1960,
              startTime: "2019-10-09 00:00:00"
            }
          ],
          plant: "吊模"
        },
        {
          list: [
            {
              colorNum: 4,
              endTime: "2019-10-10 00:00:00",
              item: "K版",
              quantity: 1960,
              startTime: "2019-10-08 00:00:00"
            }
          ],
          plant: "K版"
        },
        {
          list: [
            {
              colorNum: 5,
              endTime: "2019-10-14 00:00:00",
              item: "盖板",
              quantity: 1960,
              startTime: "2019-10-11 00:00:00"
            }
          ],
          plant: "盖板"
        },
        {
          list: [
            {
              colorNum: 6,
              endTime: "2019-10-13 00:00:00",
              item: "墙柱",
              quantity: 1960,
              startTime: "2019-10-12 00:00:00"
            }
          ],
          plant: "墙柱"
        }
      ];
      let start_ = "2019-10-08 00:00:00",
        end_ = "2019-10-14 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 = "#9446FD";
              break;
            case 1:
              bgColor = "#5EBD3C";
              break;
            case 2:
              bgColor = "#169ADC";
              break;
            case 3:
              bgColor = "#4BE2DA";
              break;
            case 4:
              bgColor = "#F5C100";
              break;
            case 5:
              bgColor = "#FC677A";
              break;
            case 6:
              bgColor = "#FF8800";
              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
              }
            }
          });
        });
      });

      let option = {
        // backgroundColor: "#26263C",
        tooltip: {
          formatter: function(params) {
            //console.log(params)
            return params.marker + params.name;
          }
        },
        grid: {
          top: 100,
          left: 150,
          right: 100,
          bottom: 50
        },
        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: 30,
            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: 30
          },
          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 = _this.$echarts.graphic.clipRectByRect(
                {
                  x: start[0],
                  y: start[1] - 15,
                  width: end[0] - start[0],
                  height: 30
                },
                {
                  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
          }
        ]
      };
      let myChart = this.$echarts.init(this.$refs.ganttChart);
      myChart.setOption(option);
      window.onresize = function() {
        myChart.resize();
      };