echarts+vue中gantt图(甘特图)实例如何修改才能使用

<template>
  <div id="charts"></div>
</template>

<script>
var HEIGHT_RATIO = 0.6;
var DIM_CATEGORY_INDEX = 0;
var DIM_TIME_ARRIVAL = 1;
var DIM_TIME_DEPARTURE = 2;
var DATA_ZOOM_AUTO_MOVE_THROTTLE = 30;
var DATA_ZOOM_X_INSIDE_INDEX = 1;
var DATA_ZOOM_Y_INSIDE_INDEX = 3;
var DATA_ZOOM_AUTO_MOVE_SPEED = 0.2;
var DATA_ZOOM_AUTO_MOVE_DETECT_AREA_WIDTH = 30;

var _draggable;
var _draggingEl;
var _dropShadow;
var _draggingCursorOffset = [0, 0];
var _draggingTimeLength;
var _draggingRecord;
var _dropRecord;
var _cartesianXBounds = [];
var _cartesianYBounds = [];
var _rawData = datas;
var _autoDataZoomAnimator;
import datas from "../../src/j.json";//这个JSON是官网发出的请求拿到的，直接引入数据即可
import echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    this.init();
    this.initDrag();
  },
  methods: {
    renderGanttItem(params, api) {
      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 coordSys = params.coordSys;
      _cartesianXBounds[0] = coordSys.x;
      _cartesianXBounds[1] = coordSys.x + coordSys.width;
      _cartesianYBounds[0] = coordSys.y;
      _cartesianYBounds[1] = coordSys.y + coordSys.height;

      var barLength = timeDeparture[0] - timeArrival[0];
      // Get the heigth corresponds to length 1 on y axis.
      var barHeight = api.size([0, 1])[1] * HEIGHT_RATIO;
      var x = timeArrival[0];
      var y = timeArrival[1] - barHeight;

      var flightNumber = api.value(3) + "";
      var flightNumberWidth = echarts.format.getTextRect(flightNumber).width;
      var text =
        barLength > flightNumberWidth + 40 && x + barLength >= 180
          ? flightNumber
          : "";

      var rectNormal = this.clipRectByRect(params, {
        x: x,
        y: y,
         barLength,
        height: barHeight,
      });
      var rectVIP = this.clipRectByRect(params, {
        x: x,
        y: y,
         barLength / 2,
        height: barHeight,
      });
      var rectText = this.clipRectByRect(params, {
        x: x,
        y: y,
         barLength,
        height: barHeight,
      });

      return {
        type: "group",
        children: [
          {
            type: "rect",
            ignore: !rectNormal,
            shape: rectNormal,
            style: api.style(),
          },
          {//第一个条颜色
            type: "rect",
            ignore: !rectVIP && !api.value(4),
            shape: rectVIP,
            style: api.style({ fill: 
            new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 0, color: "#33A0D7" },
              // { offset: 0.3, color: "#8ADAEC" },
              { offset: 0.5, color: "#2DB3D5" },
              { offset: 1, color: "#44BFB7" }]),
             }),
          },
          {
            type: "rect",
            ignore: !rectText,
            shape: rectText,
            style: api.style({
              fill: "transparent",
              stroke: "transparent",
              text: text,
              textFill: "#fff",
            }),
          },
        ],
      };
    },
    renderAxisLabelItem(params, api) {
      var y = api.coord([0, api.value(0)])[1];
      if (y < params.coordSys.y + 5) {
        return;
      }
      return {
        type: "group",
        position: [10, y],
        children: [
          {
            type: "path",
            shape: {
              d: "M0,0 L0,-20 L30,-20 C42,-20 38,-1 50,-1 L70,-1 L70,0 Z",
              x: 0,
              y: -20,
               90,
              height: 20,
              layout: "cover",
            },
            style: {
              //左侧栏颜色
              fill: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 1, color: "#47aee3" },
              { offset: 0, color: "#45c8dc" }]),
            },
          },
          {
            type: "text",
            style: {
              x: 24,
              y: -3,
              text: api.value(1),
              textVerticalAlign: "bottom",
              textAlign: "center",
              textFill: "#fff",
            },
          },
          {
            type: "text",
            style: {
              x: 75,
              y: -2,
              textVerticalAlign: "bottom",
              textAlign: "center",
              text: api.value(2),
              textFill: "#000",
            },
          },
        ],
      };
    },
    clipRectByRect(params, rect) {
      return echarts.graphic.clipRectByRect(rect, {
        x: params.coordSys.x,
        y: params.coordSys.y,
         params.coordSys.width,
        height: params.coordSys.height,
      });
    },
    initDrag() {
      _autoDataZoomAnimator = makeAnimator(dispatchDataZoom);
      const myChart = echarts.init(document.getElementById("charts"));
      myChart.on("mousedown", function (param) {
        if (!_draggable || !param || param.seriesIndex == null) {
          return;
        }

        // Drag start
        _draggingRecord = {
          dataIndex: param.dataIndex,
          categoryIndex: param.value[DIM_CATEGORY_INDEX],
          timeArrival: param.value[DIM_TIME_ARRIVAL],
          timeDeparture: param.value[DIM_TIME_DEPARTURE],
        };
        var style = {
          lineWidth: 2,
          fill: "rgba(255,0,0,0.1)",
          stroke: "rgba(255,0,0,0.8)",
          lineDash: [6, 3],
        };

        _draggingEl = addOrUpdateBar(_draggingEl, _draggingRecord, style, 100);
        _draggingCursorOffset = [
          _draggingEl.position[0] - param.event.offsetX,
          _draggingEl.position[1] - param.event.offsetY,
        ];
        _draggingTimeLength =
          _draggingRecord.timeDeparture - _draggingRecord.timeArrival;
      });

      myChart.getZr().on("mousemove", function (event) {
        if (!_draggingEl) {
          return;
        }

        var cursorX = event.offsetX;
        var cursorY = event.offsetY;

        // Move _draggingEl.
        _draggingEl.attr("position", [
          _draggingCursorOffset[0] + cursorX,
          _draggingCursorOffset[1] + cursorY,
        ]);

        prepareDrop();

        autoDataZoomWhenDraggingOutside(cursorX, cursorY);
      });

      myChart.getZr().on("mouseup", function () {
        // Drop
        if (_draggingEl && _dropRecord) {
          updateRawData() &&
            myChart.setOption({
              series: {
                id: "flightData",
                data: _rawData.flight.data,
              },
            });
        }
        dragRelease();
      });
      myChart.getZr().on("globalout", dragRelease);

      function dragRelease() {
        _autoDataZoomAnimator.stop();
        const myChart = echarts.init(document.getElementById("charts"));

        if (_draggingEl) {
          myChart.getZr().remove(_draggingEl);
          _draggingEl = null;
        }
        if (_dropShadow) {
          myChart.getZr().remove(_dropShadow);
          _dropShadow = null;
        }
        _dropRecord = _draggingRecord = null;
      }

      function addOrUpdateBar(el, itemData, style, z) {
        const myChart = echarts.init(document.getElementById("charts"));
        var pointArrival = myChart.convertToPixel("grid", [
          itemData.timeArrival,
          itemData.categoryIndex,
        ]);
        var pointDeparture = myChart.convertToPixel("grid", [
          itemData.timeDeparture,
          itemData.categoryIndex,
        ]);

        var barLength = pointDeparture[0] - pointArrival[0];
        var barHeight =
          Math.abs(
            myChart.convertToPixel("grid", [0, 0])[1] -
              myChart.convertToPixel("grid", [0, 1])[1]
          ) * HEIGHT_RATIO;

        if (!el) {
          el = new echarts.graphic.Rect({
            shape: { x: 0, y: 0,  0, height: 0 },
            style: style,
            z: z,
          });
          myChart.getZr().add(el);
        }
        el.attr({
          shape: { x: 0, y: 0,  barLength, height: barHeight },
          position: [pointArrival[0], pointArrival[1] - barHeight],
        });
        return el;
      }

      function prepareDrop() {
        const myChart = echarts.init(document.getElementById("charts"));
        // Check droppable place.
        var xPixel = _draggingEl.shape.x + _draggingEl.position[0];
        var yPixel = _draggingEl.shape.y + _draggingEl.position[1];
        var cursorData = myChart.convertFromPixel("grid", [xPixel, yPixel]);
        if (cursorData) {
          // Make drop shadow and _dropRecord
          _dropRecord = {
            categoryIndex: Math.floor(cursorData[1]),
            timeArrival: cursorData[0],
            timeDeparture: cursorData[0] + _draggingTimeLength,
          };
          var style = { fill: "rgba(0,0,0,0.4)" };
          _dropShadow = addOrUpdateBar(_dropShadow, _dropRecord, style, 99);
        }
      }

      // This is some business logic, don't care about it.
      function updateRawData() {
        var flightData = _rawData.flight.data;
        var movingItem = flightData[_draggingRecord.dataIndex];

        // Check conflict
        for (var i = 0; i < flightData.length; i++) {
          var dataItem = flightData[i];
          if (
            dataItem !== movingItem &&
            _dropRecord.categoryIndex === dataItem[DIM_CATEGORY_INDEX] &&
            _dropRecord.timeArrival < dataItem[DIM_TIME_DEPARTURE] &&
            _dropRecord.timeDeparture > dataItem[DIM_TIME_ARRIVAL]
          ) {
            alert("找寻空位置放置！");
            return;
          }
        }

        // No conflict.
        movingItem[DIM_CATEGORY_INDEX] = _dropRecord.categoryIndex;
        movingItem[DIM_TIME_ARRIVAL] = _dropRecord.timeArrival;
        movingItem[DIM_TIME_DEPARTURE] = _dropRecord.timeDeparture;
        return true;
      }

      function autoDataZoomWhenDraggingOutside(cursorX, cursorY) {
        // When cursor is outside the cartesian and being dragging,
        // auto move the dataZooms.
        var cursorDistX = getCursorCartesianDist(cursorX, _cartesianXBounds);
        var cursorDistY = getCursorCartesianDist(cursorY, _cartesianYBounds);

        if (cursorDistX !== 0 || cursorDistY !== 0) {
          _autoDataZoomAnimator.start({
            cursorDistX: cursorDistX,
            cursorDistY: cursorDistY,
          });
        } else {
          _autoDataZoomAnimator.stop();
        }
      }

      function dispatchDataZoom(params) {
        const myChart = echarts.init(document.getElementById("charts"));

        var option = myChart.getOption();
        var optionInsideX = option.dataZoom[DATA_ZOOM_X_INSIDE_INDEX];
        var optionInsideY = option.dataZoom[DATA_ZOOM_Y_INSIDE_INDEX];
        var batch = [];

        prepareBatch(
          batch,
          "insideX",
          optionInsideX.start,
          optionInsideX.end,
          params.cursorDistX
        );
        prepareBatch(
          batch,
          "insideY",
          optionInsideY.start,
          optionInsideY.end,
          -params.cursorDistY
        );

        batch.length &&
          myChart.dispatchAction({
            type: "dataZoom",
            batch: batch,
          });

        function prepareBatch(batch, id, start, end, cursorDist) {
          if (cursorDist === 0) {
            return;
          }
          var sign = cursorDist / Math.abs(cursorDist);
          var size = end - start;
          var delta = DATA_ZOOM_AUTO_MOVE_SPEED * sign;

          start += delta;
          end += delta;

          if (end > 100) {
            end = 100;
            start = end - size;
          }
          if (start < 0) {
            start = 0;
            end = start + size;
          }
          batch.push({
            dataZoomId: id,
            start: start,
            end: end,
          });
        }
      }

      function getCursorCartesianDist(cursorXY, bounds) {
        var dist0 =
          cursorXY - (bounds[0] + DATA_ZOOM_AUTO_MOVE_DETECT_AREA_WIDTH);
        var dist1 =
          cursorXY - (bounds[1] - DATA_ZOOM_AUTO_MOVE_DETECT_AREA_WIDTH);
        return dist0 * dist1 <= 0
          ? 0 // cursor is in cartesian
          : dist0 < 0
          ? dist0 // cursor is at left/top of cartesian
          : dist1; // cursor is at right/bottom of cartesian
      }

      function makeAnimator(callback) {
        var requestId;
        var callbackParams;
        // Use throttle to prevent from calling dispatchAction frequently.
        callback = echarts.throttle(callback, DATA_ZOOM_AUTO_MOVE_THROTTLE);

        function onFrame() {
          callback(callbackParams);
          requestId = requestAnimationFrame(onFrame);
        }

        return {
          start: function (params) {
            callbackParams = params;
            if (requestId == null) {
              onFrame();
            }
          },
          stop: function () {
            if (requestId != null) {
              cancelAnimationFrame(requestId);
            }
            requestId = callbackParams = null;
          },
        };
      }
    },
    onDragSwitchClick(model, api, type) {
      const myChart = echarts.init(document.getElementById("charts"));

      _draggable = !_draggable;
      myChart.setOption({
        dataZoom: [
          {
            id: "insideX",
            disabled: _draggable,
          },
          {
            id: "insideY",
            disabled: _draggable,
          },
        ],
      });
      this.model.setIconStatus(type, _draggable ? "emphasis" : "normal");
    },
    init() {
      const myChart = echarts.init(document.getElementById("charts"));
      myChart.setOption({
        tooltip: {},
        animation: false,
        toolbox: {
          left: 20,
          top: 0,
          itemSize: 20,
          feature: {
            myDrag: {
              show: true,
              title: "Make bars
draggable",
              icon:
                "path://M990.55 380.08 q11.69 0 19.88 8.19 q7.02 7.01 7.02 18.71 l0 480.65 q-1.17 43.27 -29.83 71.93 q-28.65 28.65 -71.92 29.82 l-813.96 0 q-43.27 -1.17 -72.5 -30.41 q-28.07 -28.07 -29.24 -71.34 l0 -785.89 q1.17 -43.27 29.24 -72.5 q29.23 -29.24 72.5 -29.24 l522.76 0 q11.7 0 18.71 7.02 q8.19 8.18 8.19 18.71 q0 11.69 -7.6 19.29 q-7.6 7.61 -19.3 7.61 l-518.08 0 q-22.22 1.17 -37.42 16.37 q-15.2 15.2 -15.2 37.42 l0 775.37 q0 23.39 15.2 38.59 q15.2 15.2 37.42 15.2 l804.6 0 q22.22 0 37.43 -15.2 q15.2 -15.2 16.37 -38.59 l0 -474.81 q0 -11.7 7.02 -18.71 q8.18 -8.19 18.71 -8.19 l0 0 ZM493.52 723.91 l-170.74 -170.75 l509.89 -509.89 q23.39 -23.39 56.13 -21.05 q32.75 1.17 59.65 26.9 l47.94 47.95 q25.73 26.89 27.49 59.64 q1.75 32.75 -21.64 57.3 l-508.72 509.9 l0 0 ZM870.09 80.69 l-56.13 56.14 l94.72 95.9 l56.14 -57.31 q8.19 -9.35 8.19 -21.05 q-1.17 -12.86 -10.53 -22.22 l-47.95 -49.12 q-10.52 -9.35 -23.39 -9.35 q-11.69 -1.17 -21.05 7.01 l0 0 ZM867.75 272.49 l-93.56 -95.9 l-380.08 380.08 l94.73 94.73 l378.91 -378.91 l0 0 ZM322.78 553.16 l38.59 39.77 l-33.92 125.13 l125.14 -33.92 l38.59 38.6 l-191.79 52.62 q-5.85 1.17 -12.28 0 q-6.44 -1.17 -11.11 -5.84 q-4.68 -4.68 -5.85 -11.7 q-2.34 -5.85 0 -11.69 l52.63 -192.97 l0 0 Z",
              onclick: this.onDragSwitchClick,
            },
          },
        },
        title: {
          text: "产量计划甘特图",
          left: "center",
        },
        dataZoom: [
          {
            type: "slider",
            xAxisIndex: 0,
            filterMode: "weakFilter",
            height: 20,
            bottom: 0,
            start: 0,
            end: 26,
            
            handleIcon:
              "M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
            handleSize: "80%",
            showDetail: false,
          },
          {
            type: "inside",
            id: "insideX",
            xAxisIndex: 0,
            filterMode: "weakFilter",
            start: 0,
            end: 26,
            zoomOnMouseWheel: false,
            moveOnMouseMove: true,
          },
          {
            type: "slider",
            yAxisIndex: 0,
            zoomLock: true,
             10,
            right: 10,
            top: 70,
            bottom: 20,
            start: 95,
            end: 100,
            handleSize: 0,
            showDetail: false,
          },
          {
            type: "inside",
            id: "insideY",
            yAxisIndex: 0,
            start: 95,
            end: 100,
            zoomOnMouseWheel: false,
            moveOnMouseMove: true,
            moveOnMouseWheel: true,
          },
        ],
        grid: {
          show: true,
          top: 70,
          bottom: 20,
          left: 100,
          right: 20,
          backgroundColor: "#fff",
          borderWidth: 0,
        },
        xAxis: {
          type: "time",
          position: "top",
          splitLine: {
            lineStyle: {
              color: ["#E9EDFF"],
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            lineStyle: {
              color: "#929ABA",
            },
          },
          axisLabel: {
            color: "#929ABA",
            inside: false,
            align: "center",
          },
        },
        yAxis: {
          axisTick: { show: false },
          splitLine: { show: false },
          axisLine: { show: false },
          axisLabel: { show: false },
          min: 0,
          max: _rawData.parkingApron.data.length,
        },
        series: [
          { //第二个颜色
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 0, color: "#3DAEE1"},
              // { offset: 0.3, color: "#73D0D6" },
              { offset: 0.5, color: "#3177B9" },
              { offset: 1, color: "#966FB2" },
            ]),
            // barBorderRadius: [10, 100, 10, 10],
            id: "flightData",
            type: "custom",
            renderItem: this.renderGanttItem,
            dimensions: _rawData.flight.dimensions,
            encode: {
              x: [DIM_TIME_ARRIVAL, DIM_TIME_DEPARTURE],
              y: DIM_CATEGORY_INDEX,
              tooltip: [
                DIM_CATEGORY_INDEX,
                DIM_TIME_ARRIVAL,
                DIM_TIME_DEPARTURE,
              ],
            },
            data: _rawData.flight.data,
          },
          {
            type: "custom",
            renderItem: this.renderAxisLabelItem,
            dimensions: _rawData.parkingApron.dimensions,
            encode: {
              x: -1, // Then this series will not controlled by x.
              y: 0,
            },
            
            data: echarts.util.map(_rawData.parkingApron.data, function (
              item,
              index
            ) {
              return [index].concat(item);
            }),
            
          },
        ],
      });

      window.addEventListener("resize", () => {
        //   Chart2.resize();
        myChart.resize();
      });
    },
  },
};
</script>

<style>
#charts {
   96vw;
  height: 75vh !important;
}
</style>