<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>