@easyv/charts 1.4.15 → 1.4.17

package/.husky/commit-msg

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn commitlint --edit $1
+pnpm commitlint --edit $1

package/lib/components/Axis.js

@@ -43,10 +43,10 @@ var defaultAppearance = {
   textOverflow: "ellipsis"
 };
 var defaultAlign = {
-  textAnchor: 'middle',
-  dominantBaseline: 'middle'
+  textAnchor: "middle",
+  dominantBaseline: "middle"
 };
-var defaultOrientation = 'bottom';
+var defaultOrientation = "bottom";
 var defaultTickSize = 6;
 
 var defaultFormatter = function defaultFormatter(d, _ref) {
@@ -59,13 +59,13 @@ var getAxesPath = function getAxesPath(orientation, _ref2) {
       height = _ref2.height;
 
   switch (orientation) {
-    case 'top':
-    case 'bottom':
-      return 'M-0.5, 0H' + width;
+    case "top":
+    case "bottom":
+      return "M-0.5, 0H" + width;
 
-    case 'left':
-    case 'right':
-      return 'M0, -0.5V' + (height + 0.5);
+    case "left":
+    case "right":
+      return "M0, -0.5V" + (height + 0.5);
   }
 };
 /**
@@ -82,28 +82,28 @@ var getAxesPath = function getAxesPath(orientation, _ref2) {
 
 var getLayout = function getLayout(orientation, rotate) {
   switch (orientation) {
-    case 'top':
+    case "top":
       return {
         transform: "translate(-50%,-100%) rotate(".concat(rotate, "deg)"),
         directionX: 1,
         directionY: -1
       };
 
-    case 'bottom':
+    case "bottom":
       return {
         transform: "translate(-50%,0) rotate(".concat(rotate, "deg)"),
         directionX: 1,
         directionY: 1
       };
 
-    case 'left':
+    case "left":
       return {
         transform: "translate(-100%,-50%) rotate(".concat(rotate, "deg)"),
         directionX: -1,
         directionY: 1
       };
 
-    case 'right':
+    case "right":
       return {
         transform: "translate(0,-50%) rotate(".concat(rotate, "deg)"),
         directionX: 1,
@@ -118,14 +118,32 @@ var AxisLine = function AxisLine(_ref3) {
       _ref3$config = _ref3.config,
       show = _ref3$config.show,
       color = _ref3$config.color,
-      lineWidth = _ref3$config.lineWidth;
+      lineWidth = _ref3$config.lineWidth,
+      _ref3$isClipAxis = _ref3.isClipAxis,
+      isClipAxis = _ref3$isClipAxis === void 0 ? false : _ref3$isClipAxis,
+      _ref3$clipAxisRange = _ref3.clipAxisRange,
+      clipAxisRange = _ref3$clipAxisRange === void 0 ? [] : _ref3$clipAxisRange;
   if (!show) return null;
   var context = (0, _react.useContext)(_context.chartContext);
-  return /*#__PURE__*/_react["default"].createElement("path", {
-    d: getAxesPath(orientation, context),
-    stroke: color,
-    strokeWidth: lineWidth
-  });
+  var width = context.width,
+      height = context.height;
+
+  if (isClipAxis) {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, clipAxisRange.map(function (range, index) {
+      return /*#__PURE__*/_react["default"].createElement("path", {
+        key: index,
+        d: "M 0.5,".concat(range[0], " L 0.5,").concat(range[1]),
+        stroke: color,
+        strokeWidth: lineWidth
+      });
+    }));
+  } else {
+    return /*#__PURE__*/_react["default"].createElement("path", {
+      d: getAxesPath(orientation, context),
+      stroke: color,
+      strokeWidth: lineWidth
+    });
+  }
 };
 
 var Unit = function Unit(_ref4) {
@@ -148,12 +166,12 @@ var Unit = function Unit(_ref4) {
   if (!show) return null;
   return /*#__PURE__*/_react["default"].createElement("text", {
     className: "__easyv-unit",
-    transform: 'translate(' + translateX + ', ' + translateY + ')',
+    transform: "translate(" + translateX + ", " + translateY + ")",
     fontFamily: fontFamily,
     fontSize: fontSize,
     fill: color,
-    fontWeight: bold ? 'bold' : 'normal',
-    fontStyle: italic ? 'italic' : 'normal',
+    fontWeight: bold ? "bold" : "normal",
+    fontStyle: italic ? "italic" : "normal",
     letterSpacing: letterSpacing,
     textAnchor: textAnchor
   }, text);
@@ -194,11 +212,11 @@ var Label = function Label(_ref5) {
       directionX = _getLayout.directionX,
       directionY = _getLayout.directionY;
 
-  var isVertical = orientation == 'left' || orientation == 'right';
+  var isVertical = orientation == "left" || orientation == "right";
   var x = (isVertical ? tickSize * directionX : coordinate) + translateX * directionX;
   var y = (isVertical ? coordinate : tickSize * directionY) + translateY * directionY;
 
-  var _style = style && ((0, _typeof2["default"])(style) == 'object' ? style : style(_label));
+  var _style = style && ((0, _typeof2["default"])(style) == "object" ? style : style(_label));
 
   return /*#__PURE__*/_react["default"].createElement("foreignObject", {
     width: "1",
@@ -244,23 +262,108 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
       tickLine = _ref6$config.tickLine,
       gridLine = _ref6$config.gridLine,
       unit = _ref6$config.unit,
+      config = _ref6.config,
       positions = _ref6.positions,
       xLineRange = _ref6.xLineRange,
-      yLineRange = _ref6.yLineRange;
+      _ref6$isClipAxis = _ref6.isClipAxis,
+      isClipAxis = _ref6$isClipAxis === void 0 ? false : _ref6$isClipAxis,
+      yLineRange = _ref6.yLineRange,
+      clipAxisRange = _ref6.clipAxisRange;
   if (!(on && ticks.length > 0)) return null;
 
   var _useContext = (0, _react.useContext)(_context.chartContext),
       width = _useContext.width,
       height = _useContext.height;
 
-  var x = orientation == 'right' ? width : 0;
-  var y = orientation == 'bottom' ? height : 0;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, axisLine && tickLine && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, axisLine && (positions && positions.length ? positions.map(function (_ref7, index) {
+  var x = orientation == "right" ? width : 0;
+  var y = orientation == "bottom" ? height : 0;
+
+  function drawYAxisTickLine() {
+    var draw = function draw(ticks, scaler) {
+      return ticks.map(function (tick, index) {
+        var coordinate = scaler(tick);
+        if (isNaN(coordinate)) return null;
+
+        var _tickSize = tickLine.tickSize || tickSize;
+
+        var gridCoord = (0, _utils.getGridCoord)({
+          orientation: orientation,
+          coordinate: coordinate,
+          end: orientation == "left" || orientation == "right" ? width : height
+        });
+        var x1 = gridCoord.x1;
+        var y1 = gridCoord.y1;
+        return !(orientation == "bottom" && (x1 < 0 || x1 > xLineRange) || y1 < 0 || y1 > yLineRange) && /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
+          className: "__easyv-tickLine",
+          key: index,
+          config: tickLine
+        }, (0, _utils.getTickCoord)({
+          orientation: orientation,
+          coordinate: coordinate,
+          tickSize: _tickSize
+        })));
+      });
+    };
+
+    if (isClipAxis) {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, ticks.map(function (ticks, index) {
+        return draw(ticks, scaler[index]);
+      }));
+    } else {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, draw(ticks, scaler));
+    }
+  }
+
+  function drawLabel() {
+    var draw = function draw(ticks, scaler) {
+      return ticks.map(function (tick, index) {
+        var coordinate = scaler(tick);
+        if (isNaN(coordinate)) return null;
+
+        var _tickSize = tickLine.tickSize || tickSize;
+
+        var gridCoord = (0, _utils.getGridCoord)({
+          orientation: orientation,
+          coordinate: coordinate,
+          end: orientation == 'left' || orientation == 'right' ? width : height
+        });
+        var x1 = gridCoord.x1;
+        var y1 = gridCoord.y1;
+        return !(orientation == "bottom" && (x1 < 0 || x1 > xLineRange) || y1 < 0 || y1 > yLineRange) && /*#__PURE__*/_react["default"].createElement("g", {
+          key: index
+        }, label && /*#__PURE__*/_react["default"].createElement(Label, {
+          className: "__easyv-label",
+          orientation: orientation,
+          coordinate: coordinate,
+          config: label,
+          label: tick,
+          tickSize: _tickSize,
+          formatter: formatter,
+          rotate: rotate,
+          onClick: triggerClick
+        }), gridLine && /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
+          className: "__easyv-gridLine",
+          config: gridLine
+        }, gridCoord)));
+      });
+    };
+
+    if (isClipAxis) {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, ticks.map(function (ticks, index) {
+        return draw(ticks, scaler[index]);
+      }));
+    } else {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, draw(ticks, scaler));
+    }
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, axisLine && tickLine && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, axisLine && ( // 依据positions来区分x轴y轴，有position为x轴
+  positions && positions.length ? positions.map(function (_ref7, index) {
     var x = _ref7.x,
         y = _ref7.y;
     return /*#__PURE__*/_react["default"].createElement("g", {
       key: index,
-      transform: 'translate(' + x + ', ' + y + ')'
+      transform: "translate(" + x + ", " + y + ")"
     }, /*#__PURE__*/_react["default"].createElement(AxisLine, {
       orientation: orientation,
       config: axisLine
@@ -273,7 +376,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
       var gridCoord = (0, _utils.getGridCoord)({
         orientation: orientation,
         coordinate: coordinate,
-        end: orientation == 'left' || orientation == 'right' ? width : height
+        end: orientation == "left" || orientation == "right" ? width : height
       });
       var x1 = gridCoord.x1;
       var y1 = gridCoord.y1;
@@ -288,64 +391,15 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
       })));
     }));
   }) : /*#__PURE__*/_react["default"].createElement("g", {
-    transform: 'translate(' + x + ', ' + y + ')'
+    transform: "translate(" + x + ", " + y + ")"
   }, /*#__PURE__*/_react["default"].createElement(AxisLine, {
     orientation: orientation,
-    config: axisLine
-  }), tickLine && ticks.map(function (tick, index) {
-    var coordinate = scaler(tick);
-    if (isNaN(coordinate)) return null;
-
-    var _tickSize = tickLine.tickSize || tickSize;
-
-    var gridCoord = (0, _utils.getGridCoord)({
-      orientation: orientation,
-      coordinate: coordinate,
-      end: orientation == 'left' || orientation == 'right' ? width : height
-    });
-    var x1 = gridCoord.x1;
-    var y1 = gridCoord.y1;
-    return !(orientation == "bottom" && (x1 < 0 || x1 > xLineRange) || y1 < 0 || y1 > yLineRange) && /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
-      className: "__easyv-tickLine",
-      key: index,
-      config: tickLine
-    }, (0, _utils.getTickCoord)({
-      orientation: orientation,
-      coordinate: coordinate,
-      tickSize: _tickSize
-    })));
-  })))), /*#__PURE__*/_react["default"].createElement("g", {
+    config: axisLine,
+    isClipAxis: isClipAxis,
+    clipAxisRange: clipAxisRange
+  }), tickLine && drawYAxisTickLine()))), /*#__PURE__*/_react["default"].createElement("g", {
     transform: 'translate(' + x + ', ' + y + ')'
-  }, label && gridLine && ticks.map(function (tick, index) {
-    var coordinate = scaler(tick);
-    if (isNaN(coordinate)) return null;
-
-    var _tickSize = tickLine.tickSize || tickSize;
-
-    var gridCoord = (0, _utils.getGridCoord)({
-      orientation: orientation,
-      coordinate: coordinate,
-      end: orientation == 'left' || orientation == 'right' ? width : height
-    });
-    var x1 = gridCoord.x1;
-    var y1 = gridCoord.y1;
-    return !(orientation == "bottom" && (x1 < 0 || x1 > xLineRange) || y1 < 0 || y1 > yLineRange) && /*#__PURE__*/_react["default"].createElement("g", {
-      key: index
-    }, label && /*#__PURE__*/_react["default"].createElement(Label, {
-      className: "__easyv-label",
-      orientation: orientation,
-      coordinate: coordinate,
-      config: label,
-      label: tick,
-      tickSize: _tickSize,
-      formatter: formatter,
-      rotate: rotate,
-      onClick: triggerClick
-    }), gridLine && /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
-      className: "__easyv-gridLine",
-      config: gridLine
-    }, gridCoord)));
-  }), unit && /*#__PURE__*/_react["default"].createElement(Unit, {
+  }, label && gridLine && drawLabel(), unit && /*#__PURE__*/_react["default"].createElement(Unit, {
     config: unit
   })));
 });

package/lib/components/Band.js

@@ -31,23 +31,23 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var getHighlightData = function getHighlightData(data, extent) {
   switch (extent) {
-    case 'min':
+    case "min":
       var minData = (0, _d3v.min)(data, function (d) {
         return d.data.y;
       });
       return data.map(function (item) {
         return _objectSpread(_objectSpread({}, item), {}, {
-          flag: minData == item.data.y ? 'min' : ''
+          flag: minData == item.data.y ? "min" : ""
         });
       });
 
-    case 'max':
+    case "max":
       var maxData = (0, _d3v.max)(data, function (d) {
         return d.data.y;
       });
       return data.map(function (item) {
         return _objectSpread(_objectSpread({}, item), {}, {
-          flag: maxData == item.data.y ? 'max' : ''
+          flag: maxData == item.data.y ? "max" : ""
         });
       });
 
@@ -80,7 +80,7 @@ var getBorderRadius = function getBorderRadius(_ref2) {
   var isVertical = _ref2.isVertical,
       positive = _ref2.positive,
       seriesWidth = _ref2.seriesWidth;
-  return isVertical ? positive ? '0px ' + seriesWidth + 'px ' + seriesWidth + 'px 0' : seriesWidth + 'px 0 0 ' + seriesWidth + 'px' : positive ? seriesWidth / 2 + 'px ' + seriesWidth / 2 + 'px 0 0' : '0 0 ' + seriesWidth / 2 + 'px ' + seriesWidth / 2 + 'px';
+  return isVertical ? positive ? "0px " + seriesWidth + "px " + seriesWidth + "px 0" : seriesWidth + "px 0 0 " + seriesWidth + "px" : positive ? seriesWidth / 2 + "px " + seriesWidth / 2 + "px 0 0" : "0 0 " + seriesWidth / 2 + "px " + seriesWidth / 2 + "px";
 };
 
 var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
@@ -111,7 +111,10 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
       xScaler = _ref3$xAxis.scaler,
       step = _ref3$xAxis.step,
       direction = _ref3$xAxis.direction,
-      yScaler = _ref3.yAxis.scaler;
+      _ref3$yAxis = _ref3.yAxis,
+      yScaler = _ref3$yAxis.scaler,
+      isClipAxis = _ref3$yAxis.isClipAxis,
+      clipValue = _ref3$yAxis.clipValue;
   if (!data.length) return null;
 
   var _getSeriesInfo = (0, _utils.getSeriesInfo)({
@@ -126,7 +129,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
 
   var _data = showHighlight ? getHighlightData(data, extent) : data;
 
-  var isVertical = direction === 'vertical';
+  var isVertical = direction === "vertical";
   var borderStr = "".concat(border.borderColor, " solid ").concat(border.borderWidth, "px");
   return /*#__PURE__*/_react["default"].createElement("g", {
     className: "__easyv-band"
@@ -142,14 +145,44 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
         y = _ref4$data.y,
         s = _ref4$data.s;
 
-    var y1 = yScaler(isVertical ? end : start);
-    var y2 = yScaler(isVertical ? start : end);
+    //todo 柱状中空设置
+    var y1, y2; //断轴图相关，断轴图的scaler是一个数组，内含上断轴下断轴的scaler
+
+    if (isClipAxis) {
+      if (end > +clipValue) {
+        y1 = yScaler[1](start);
+        y2 = yScaler[0](end);
+      } else {
+        y1 = yScaler[1](start);
+        y2 = yScaler[1](end);
+      }
+    } else {
+      y1 = yScaler(isVertical ? end : start);
+      y2 = yScaler(isVertical ? start : end);
+    }
+
     var positionX = xScaler(x) - step / 2 + seriesStart + index * seriesStep;
     var showHead, headUrl, headWidth, headHeight, headTranslate;
 
     if (headDecorate) {
       showHead = headDecorate.show, headUrl = headDecorate.url, headWidth = headDecorate.size.width, headHeight = headDecorate.size.height, headTranslate = headDecorate.translate;
-    }
+    } //断轴图相关，将柱形在断轴处切开
+
+
+    var setClipPath = function setClipPath() {
+      if (isClipAxis && end > +clipValue) {
+        var clipValueY2 = yScaler[0](clipValue); //上方
+
+        var clipValueY1 = yScaler[1](clipValue); //下方
+
+        var top = Math.abs((y2 - clipValueY2) / (y1 - y2)) * 100;
+        var bottom = Math.abs((y2 - clipValueY1) / (y1 - y2)) * 100; //clip path属性
+
+        return "polygon(0% 0%, 0% 100%, 0 100%, 0 ".concat(top, "%, 100% ").concat(top, "%, 100% ").concat(bottom, "%, 0 ").concat(bottom, "%, 0 100%, 100% 100%, 100% 0%)");
+      } else {
+        return "none";
+      }
+    };
 
     if (isNaN(positionX)) return null;
     var positionY = y < 0 ? y1 : y2;
@@ -183,14 +216,15 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
       }
     }), /*#__PURE__*/_react["default"].createElement("div", {
       style: _objectSpread({
-        width: '100%',
-        height: '100%',
+        width: "100%",
+        height: "100%",
 
         /** Safari Bug **/
-        position: 'fixed',
-        opacity: fillType == 'pattern' ? opacity : 1,
-        background: fillType == 'pattern' ? "50% 50% / ".concat(size.width, "px ").concat(size.height, "px repeat ") + 'url(' + url + ')' : (0, _utils.getBandBackground)(pattern, extent === flag ? highlightFill : fill),
-        borderRadius: style == 'square' ? '0 0 0 0' : getBorderRadius({
+        position: "fixed",
+        clipPath: setClipPath(),
+        opacity: fillType == "pattern" ? opacity : 1,
+        background: fillType == "pattern" ? "50% 50% / ".concat(size.width, "px ").concat(size.height, "px repeat ") + "url(" + url + ")" : (0, _utils.getBandBackground)(pattern, extent === flag ? highlightFill : fill),
+        borderRadius: style == "square" ? "0 0 0 0" : getBorderRadius({
           isVertical: isVertical,
           positive: y > 0,
           seriesWidth: seriesWidth

package/lib/components/BaseLine.js

@@ -46,14 +46,25 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       marginLeft = _ref$config$line$marg.marginLeft,
       marginRight = _ref$config$line$marg.marginRight,
       strokeDasharray = _ref$config$line.strokeDasharray,
-      yScaler = _ref.yAxis.scaler,
+      _ref$yAxis = _ref.yAxis,
+      yScaler = _ref$yAxis.scaler,
+      clipValue = _ref$yAxis.clipValue,
+      isClipAxis = _ref$yAxis.isClipAxis,
       data = _ref.data;
 
   try {
-    var x1 = orientation == 'left' ? yScaler(data.value) : marginLeft,
-        x2 = orientation == 'left' ? yScaler(data.value) : width - marginRight,
-        y1 = orientation == 'left' ? marginLeft : yScaler(data.value),
-        y2 = orientation == 'left' ? height - marginRight : yScaler(data.value);
+    var x1, x2, y1, y2;
+
+    if (isClipAxis) {
+      if (data.value > +clipValue) {
+        x1 = orientation == 'left' ? yScaler[0](data.value) : marginLeft, x2 = orientation == 'left' ? yScaler[0](data.value) : width - marginRight, y1 = orientation == 'left' ? marginLeft : yScaler[0](data.value), y2 = orientation == 'left' ? height - marginRight : yScaler[0](data.value);
+      } else {
+        x1 = orientation == 'left' ? yScaler[1](data.value) : marginLeft, x2 = orientation == 'left' ? yScaler[1](data.value) : width - marginRight, y1 = orientation == 'left' ? marginLeft : yScaler[1](data.value), y2 = orientation == 'left' ? height - marginRight : yScaler[1](data.value);
+      }
+    } else {
+      x1 = orientation == 'left' ? yScaler(data.value) : marginLeft, x2 = orientation == 'left' ? yScaler(data.value) : width - marginRight, y1 = orientation == 'left' ? marginLeft : yScaler(data.value), y2 = orientation == 'left' ? height - marginRight : yScaler(data.value);
+    }
+
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("g", {
       className: "__easyv-baseLine"
     }, /*#__PURE__*/_react["default"].createElement("line", {

package/lib/components/CartesianChart.js

@@ -9,12 +9,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -162,16 +162,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     axis: axisX,
     config: background,
     bandLength: bandLength
-  }))), (0, _toConsumableArray2["default"])(axes.values()).reverse().map(function (item, index) {
-    var config = item.axisType == 'x' ? axisX : item;
-    return /*#__PURE__*/_react["default"].createElement(_.Axis, (0, _extends2["default"])({
-      triggerClick: onInteraction,
-      xLineRange: xLineRange,
-      yLineRange: yLineRange
-    }, config, {
-      key: index
-    }));
-  }), showTooltip && /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({}, indicator, indicatorAttr)), /*#__PURE__*/_react["default"].createElement("foreignObject", {
+  }))), showTooltip && /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({}, indicator, indicatorAttr)), /*#__PURE__*/_react["default"].createElement("foreignObject", {
     style: isVertical ? {
       width: xLineRange + marginRight + marginLeft,
       height: yLineRange,
@@ -216,7 +207,16 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       yAxis: yAxis,
       triggerClick: onInteraction
     }));
-  }))), baseLineData && baseLineData.length > 0 && baseLineData.map(function (item, index) {
+  }))), (0, _toConsumableArray2["default"])(axes.values()).reverse().map(function (item, index) {
+    var config = item.axisType == 'x' ? axisX : item;
+    return /*#__PURE__*/_react["default"].createElement(_.Axis, (0, _extends2["default"])({
+      triggerClick: onInteraction,
+      xLineRange: xLineRange,
+      yLineRange: yLineRange
+    }, config, {
+      key: index
+    }));
+  }), baseLineData && baseLineData.length > 0 && baseLineData.map(function (item, index) {
     var yOrZ = baseLineConfig[index].line.yOrZ;
     var yAxis = axes.get(yOrZ);
     return yAxis && /*#__PURE__*/_react["default"].createElement(_.BaseLine, {