@easyv/charts 1.8.15 → 1.8.17

package/lib/components/Band.js

@@ -1,359 +1,359 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-var _d3v = require("d3v7");
-var _utils = require("../utils");
-var _excluded = ["show", "extent"],
-  _excluded2 = ["pattern", "seriesIntervalWidth", "paddingInner", "highlight"],
-  _excluded3 = ["bgAttr"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _d3v = require("d3v7");
+var _utils = require("../utils");
+var _excluded = ["show", "extent"],
+  _excluded2 = ["pattern", "seriesIntervalWidth", "paddingInner", "highlight"],
+  _excluded3 = ["bgAttr"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
  * （柱状/条形）图柱子
- */
-var getHighlightData = function getHighlightData(data, extent) {
-  switch (extent) {
-    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" : ""
-        });
-      });
-    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" : ""
-        });
-      });
-    default:
-      return data;
-  }
-};
-var getAttr = function getAttr(_ref) {
-  var isVertical = _ref.isVertical,
-    seriesWidth = _ref.seriesWidth,
-    length = _ref.length,
-    x = _ref.x,
-    y = _ref.y;
-  var len = length ? length : 0.1; //柱子长度
-  if (isVertical) {
-    return {
-      width: len,
-      height: seriesWidth,
-      x: y,
-      y: x,
-      bgAttr: {
-        x: 0,
-        y: x,
-        width: len + x,
-        height: seriesWidth
-      }
-    };
-  } else {
-    return {
-      x: x,
-      y: y,
-      width: seriesWidth,
-      height: len,
-      bgAttr: {
-        x: x,
-        y: 0,
-        width: seriesWidth,
-        height: y + len
-      }
-    };
-  }
-};
-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";
-};
-var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
-  var triggerClick = _ref3.triggerClick,
-    indicatorWidth = _ref3.indicatorWidth,
-    _ref3$isControlChart = _ref3.isControlChart,
-    isControlChart = _ref3$isControlChart === void 0 ? false : _ref3$isControlChart,
-    setCtlTip = _ref3.setCtlTip,
-    isXRepeat = _ref3.isXRepeat,
-    _ref3$config = _ref3.config,
-    _ref3$config$pattern = _ref3$config.pattern,
-    pattern = _ref3$config$pattern === void 0 ? {} : _ref3$config$pattern,
-    _ref3$config$seriesIn = _ref3$config.seriesIntervalWidth,
-    paddingInner = _ref3$config$seriesIn === void 0 ? 0 : _ref3$config$seriesIn,
-    _ref3$config$paddingI = _ref3$config.paddingInner,
-    paddingOuter = _ref3$config$paddingI === void 0 ? 0 : _ref3$config$paddingI,
-    _ref3$config$highligh = _ref3$config.highlight,
-    showHighlight = _ref3$config$highligh.show,
-    extent = _ref3$config$highligh.extent,
-    highlightStyle = (0, _objectWithoutProperties2["default"])(_ref3$config$highligh, _excluded),
-    other = (0, _objectWithoutProperties2["default"])(_ref3$config, _excluded2),
-    curXLabel = _ref3.curXLabel,
-    selectStyle = _ref3.selectStyle,
-    _ref3$bandLength = _ref3.bandLength,
-    bandLength = _ref3$bandLength === void 0 ? 0 : _ref3$bandLength,
-    _ref3$auto = _ref3.auto,
-    auto = _ref3$auto === void 0 ? false : _ref3$auto,
-    data = _ref3.data,
-    _ref3$xAxis = _ref3.xAxis,
-    normalScaler = _ref3$xAxis.scaler,
-    normalStep = _ref3$xAxis.step,
-    controlStep = _ref3$xAxis.controlStep,
-    direction = _ref3$xAxis.direction,
-    controlDragScaler = _ref3$xAxis.controlDragScaler,
-    _ref3$yAxis = _ref3.yAxis,
-    yScaler = _ref3$yAxis.scaler,
-    isClipAxis = _ref3$yAxis.isClipAxis,
-    clipValue = _ref3$yAxis.clipValue,
-    reverse = _ref3$yAxis.reverse;
-  if (!data.length) return null;
-  var selectConfig = other;
-  if (selectStyle) {
-    var show = selectStyle.show,
-      showType = selectStyle.showType,
-      barStyle = selectStyle.barStyle,
-      headDecorate = selectStyle.headDecorate;
-    if (show && showType == "bar") {
-      selectConfig = _objectSpread(_objectSpread({}, barStyle), {}, {
-        headDecorate: headDecorate
-      });
-    }
-  }
-  var highlightConfig = other;
-  if (highlightStyle) {
-    highlightConfig = _objectSpread(_objectSpread({}, other), highlightStyle);
-  }
-  var step = isControlChart ? controlStep : normalStep;
-  var xScaler = isControlChart ? controlDragScaler : normalScaler;
-  var _getSeriesInfo = (0, _utils.getSeriesInfo)({
-      step: step,
-      bandLength: bandLength,
-      paddingInner: paddingInner,
-      paddingOuter: paddingOuter
-    }),
-    seriesWidth = _getSeriesInfo.seriesWidth,
-    seriesStep = _getSeriesInfo.seriesStep,
-    seriesStart = _getSeriesInfo.seriesStart;
-  var _data = showHighlight ? getHighlightData(data, extent) : data;
-  var isVertical = direction === "vertical";
-  return /*#__PURE__*/_react["default"].createElement("g", {
-    className: "__easyv-band"
-  }, _data.map(function (_ref4, i) {
-    var flag = _ref4.flag,
-      index = _ref4.index,
-      _ref4$bound = (0, _slicedToArray2["default"])(_ref4.bound, 2),
-      start = _ref4$bound[0],
-      end = _ref4$bound[1],
-      data = _ref4.data,
-      _ref4$data = _ref4.data,
-      x = _ref4$data.x,
-      y = _ref4$data.y,
-      s = _ref4$data.s;
-    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 _ref5 = x == curXLabel ? selectConfig : flag ? highlightConfig : other,
-      style = _ref5.style,
-      fillType = _ref5.fillType,
-      _ref5$fillMode = _ref5.fillMode,
-      fillMode = _ref5$fillMode === void 0 ? "tile" : _ref5$fillMode,
-      url = _ref5.url,
-      size = _ref5.size,
-      fill = _ref5.fill,
-      border = _ref5.border,
-      opacity = _ref5.opacity,
-      headDecorate = _ref5.headDecorate;
-    var _ref6 = border || {},
-      _ref6$borderColor = _ref6.borderColor,
-      _ref6$borderColor$typ = _ref6$borderColor.type,
-      type = _ref6$borderColor$typ === void 0 ? "pure" : _ref6$borderColor$typ,
-      _ref6$borderColor$pur = _ref6$borderColor.pure,
-      pure = _ref6$borderColor$pur === void 0 ? "transparent" : _ref6$borderColor$pur,
-      linear = _ref6$borderColor.linear,
-      _ref6$borderWidth = _ref6.borderWidth,
-      borderWidth = _ref6$borderWidth === void 0 ? 0 : _ref6$borderWidth;
-    var borderStr = "".concat(pure, " solid ").concat(borderWidth, "px");
-    var borderImageSource = (0, _utils.getMultiColorStr)(linear);
-    var positionX = isXRepeat ? xScaler(x) - step / 2 + seriesStart + index * seriesStep : xScaler(x) - seriesStart / 2;
-    var showHead, headType, headUrl, headVideo, headWidth, headHeight, headTranslate;
-    if (headDecorate) {
-      showHead = headDecorate.show, headType = headDecorate.type, headUrl = headDecorate.url, headVideo = headDecorate.video, 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 = reverse ? y > 0 ? y1 : y2 : y < 0 ? y1 : y2;
-    var _getAttr = getAttr({
-        isVertical: isVertical,
-        x: positionX,
-        y: positionY,
-        length: Math.abs(y1 - y2),
-        seriesWidth: seriesWidth
-      }),
-      bgAttr = _getAttr.bgAttr,
-      attr = (0, _objectWithoutProperties2["default"])(_getAttr, _excluded3);
-    return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
-      key: i
-    }, /*#__PURE__*/_react["default"].createElement("foreignObject", (0, _extends2["default"])({
-      style: {
-        overflow: "visible",
-        position: "relative",
-        cursor: "pointer"
-      }
-    }, bgAttr, {
-      onClick: function onClick(e) {
-        return triggerClick(e, "setCurrent");
-      },
-      onMouseEnter: function onMouseEnter() {
-        if (isControlChart) {
-          setCtlTip(function (pre) {
-            return {
-              show: true,
-              x: xScaler(x),
-              xName: data.x,
-              indicatorList: pre.indicatorList.map(function (item) {
-                if (item.tick === data.x) {
-                  return _objectSpread(_objectSpread({}, item), {}, {
-                    isShow: true
-                  });
-                } else {
-                  return item;
-                }
-              })
-            };
-          });
-        }
-      },
-      onMouseLeave: function onMouseLeave() {
-        if (isControlChart && !auto) {
-          setCtlTip(function (pre) {
-            return {
-              show: false,
-              x: undefined,
-              xName: undefined,
-              indicatorList: pre.indicatorList.map(function (item) {
-                return _objectSpread(_objectSpread({}, item), {}, {
-                  isShow: false
-                });
-              })
-            };
-          });
-        }
-      },
-      "data-mobile": JSON.stringify({
-        x: xScaler(x),
-        xName: data.x
-      }),
-      "data-data": JSON.stringify(data)
-    })), /*#__PURE__*/_react["default"].createElement("foreignObject", (0, _extends2["default"])({
-      style: {
-        overflow: "visible",
-        position: "relative",
-        pointerEvents: "none"
-      }
-    }, attr), (headUrl || headVideo) && showHead && (headType == "image" ? /*#__PURE__*/_react["default"].createElement("div", {
-      style: {
-        position: "absolute",
-        background: "url(".concat(
-        //@ts-ignore
-        window.appConfig.ASSETS_URL + headUrl, ") 0 0/100% 100%"),
-        width: headWidth,
-        height: headHeight,
-        left: isVertical ? y < 0 ? "0%" : "100%" : "50%",
-        top: isVertical ? "50%" : y < 0 ? "100%" : "0%",
-        zIndex: 1,
-        transform: "translate(calc(-50% + ".concat(headTranslate.x, "px), calc(-50% + ").concat(headTranslate.y, "px))")
-      }
-    }) : /*#__PURE__*/_react["default"].createElement("video", {
-      width: headWidth,
-      height: headHeight
-      //@ts-ignore
-      ,
-      src: window.appConfig.ASSETS_URL + headVideo
-      // controls={true}
-      ,
-      loop: true,
-      muted: true,
-      autoPlay: true,
-      style: {
-        position: "absolute",
-        left: isVertical ? "100%" : "50%",
-        top: isVertical ? "50%" : "0",
-        zIndex: 1,
-        transform: "translate(calc(-50% + ".concat(headTranslate.x, "px), calc(-50% + ").concat(headTranslate.y, "px))")
-      }
-    })), /*#__PURE__*/_react["default"].createElement("div", {
-      style: _objectSpread(_objectSpread({
-        width: "100%",
-        height: "100%",
-        /** Safari Bug **/
-        // position: "absolute",
-        clipPath: setClipPath(),
-        opacity: fillType == "pattern" ? opacity : 1,
-        background: fillType == "pattern" ? "".concat(isVertical ? y < 0 ? "100%" : "0%" : "50%", " ").concat(isVertical ? "50%" : y < 0 ? "0%" : "100%", " / ").concat(fillMode == "tile" ? size.width + "px " + size.height + "px" : "100% 100%", " repeat ") + "url(" +
-        //@ts-ignore
-        window.appConfig.ASSETS_URL + url + ")" : (0, _utils.getBandBackground)(pattern, fill, y //是否小于0
-        ),
-        borderRadius: style == "square" ? "0 0 0 0" : getBorderRadius({
-          isVertical: isVertical,
-          positive: y > 0,
-          seriesWidth: seriesWidth
-        })
-      }, type == "pure" && (isVertical ? {
-        borderTop: borderStr,
-        borderRight: borderStr,
-        borderBottom: borderStr
-      } : {
-        borderTop: borderStr,
-        borderRight: borderStr,
-        borderLeft: borderStr
-      })), type == "linear" && {
-        borderImageSource: borderImageSource,
-        borderImageSlice: 1,
-        borderWidth: isVertical ? "".concat(borderWidth, "px ").concat(borderWidth, "px ").concat(borderWidth, "px 0") : "".concat(borderWidth, "px ").concat(borderWidth, "px 0 ").concat(borderWidth, "px"),
-        borderStyle: "solid"
-      })
-    })));
-  }));
+ */
+var getHighlightData = function getHighlightData(data, extent) {
+  switch (extent) {
+    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" : ""
+        });
+      });
+    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" : ""
+        });
+      });
+    default:
+      return data;
+  }
+};
+var getAttr = function getAttr(_ref) {
+  var isVertical = _ref.isVertical,
+    seriesWidth = _ref.seriesWidth,
+    length = _ref.length,
+    x = _ref.x,
+    y = _ref.y;
+  var len = length ? length : 0.1; //柱子长度
+  if (isVertical) {
+    return {
+      width: len,
+      height: seriesWidth,
+      x: y,
+      y: x,
+      bgAttr: {
+        x: 0,
+        y: x,
+        width: len + x,
+        height: seriesWidth
+      }
+    };
+  } else {
+    return {
+      x: x,
+      y: y,
+      width: seriesWidth,
+      height: len,
+      bgAttr: {
+        x: x,
+        y: 0,
+        width: seriesWidth,
+        height: y + len
+      }
+    };
+  }
+};
+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";
+};
+var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
+  var triggerClick = _ref3.triggerClick,
+    indicatorWidth = _ref3.indicatorWidth,
+    _ref3$isControlChart = _ref3.isControlChart,
+    isControlChart = _ref3$isControlChart === void 0 ? false : _ref3$isControlChart,
+    setCtlTip = _ref3.setCtlTip,
+    isXRepeat = _ref3.isXRepeat,
+    _ref3$config = _ref3.config,
+    _ref3$config$pattern = _ref3$config.pattern,
+    pattern = _ref3$config$pattern === void 0 ? {} : _ref3$config$pattern,
+    _ref3$config$seriesIn = _ref3$config.seriesIntervalWidth,
+    paddingInner = _ref3$config$seriesIn === void 0 ? 0 : _ref3$config$seriesIn,
+    _ref3$config$paddingI = _ref3$config.paddingInner,
+    paddingOuter = _ref3$config$paddingI === void 0 ? 0 : _ref3$config$paddingI,
+    _ref3$config$highligh = _ref3$config.highlight,
+    showHighlight = _ref3$config$highligh.show,
+    extent = _ref3$config$highligh.extent,
+    highlightStyle = (0, _objectWithoutProperties2["default"])(_ref3$config$highligh, _excluded),
+    other = (0, _objectWithoutProperties2["default"])(_ref3$config, _excluded2),
+    curXLabel = _ref3.curXLabel,
+    selectStyle = _ref3.selectStyle,
+    _ref3$bandLength = _ref3.bandLength,
+    bandLength = _ref3$bandLength === void 0 ? 0 : _ref3$bandLength,
+    _ref3$auto = _ref3.auto,
+    auto = _ref3$auto === void 0 ? false : _ref3$auto,
+    data = _ref3.data,
+    _ref3$xAxis = _ref3.xAxis,
+    normalScaler = _ref3$xAxis.scaler,
+    normalStep = _ref3$xAxis.step,
+    controlStep = _ref3$xAxis.controlStep,
+    direction = _ref3$xAxis.direction,
+    controlDragScaler = _ref3$xAxis.controlDragScaler,
+    _ref3$yAxis = _ref3.yAxis,
+    yScaler = _ref3$yAxis.scaler,
+    isClipAxis = _ref3$yAxis.isClipAxis,
+    clipValue = _ref3$yAxis.clipValue,
+    reverse = _ref3$yAxis.reverse;
+  if (!data.length) return null;
+  var selectConfig = other;
+  if (selectStyle) {
+    var show = selectStyle.show,
+      showType = selectStyle.showType,
+      barStyle = selectStyle.barStyle,
+      headDecorate = selectStyle.headDecorate;
+    if (show && showType == "bar") {
+      selectConfig = _objectSpread(_objectSpread({}, barStyle), {}, {
+        headDecorate: headDecorate
+      });
+    }
+  }
+  var highlightConfig = other;
+  if (highlightStyle) {
+    highlightConfig = _objectSpread(_objectSpread({}, other), highlightStyle);
+  }
+  var step = isControlChart ? controlStep : normalStep;
+  var xScaler = isControlChart ? controlDragScaler : normalScaler;
+  var _getSeriesInfo = (0, _utils.getSeriesInfo)({
+      step: step,
+      bandLength: bandLength,
+      paddingInner: paddingInner,
+      paddingOuter: paddingOuter
+    }),
+    seriesWidth = _getSeriesInfo.seriesWidth,
+    seriesStep = _getSeriesInfo.seriesStep,
+    seriesStart = _getSeriesInfo.seriesStart;
+  var _data = showHighlight ? getHighlightData(data, extent) : data;
+  var isVertical = direction === "vertical";
+  return /*#__PURE__*/_react["default"].createElement("g", {
+    className: "__easyv-band"
+  }, _data.map(function (_ref4, i) {
+    var flag = _ref4.flag,
+      index = _ref4.index,
+      _ref4$bound = (0, _slicedToArray2["default"])(_ref4.bound, 2),
+      start = _ref4$bound[0],
+      end = _ref4$bound[1],
+      data = _ref4.data,
+      _ref4$data = _ref4.data,
+      x = _ref4$data.x,
+      y = _ref4$data.y,
+      s = _ref4$data.s;
+    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 _ref5 = x == curXLabel ? selectConfig : flag ? highlightConfig : other,
+      style = _ref5.style,
+      fillType = _ref5.fillType,
+      _ref5$fillMode = _ref5.fillMode,
+      fillMode = _ref5$fillMode === void 0 ? "tile" : _ref5$fillMode,
+      url = _ref5.url,
+      size = _ref5.size,
+      fill = _ref5.fill,
+      border = _ref5.border,
+      opacity = _ref5.opacity,
+      headDecorate = _ref5.headDecorate;
+    var _ref6 = border || {},
+      _ref6$borderColor = _ref6.borderColor,
+      _ref6$borderColor$typ = _ref6$borderColor.type,
+      type = _ref6$borderColor$typ === void 0 ? "pure" : _ref6$borderColor$typ,
+      _ref6$borderColor$pur = _ref6$borderColor.pure,
+      pure = _ref6$borderColor$pur === void 0 ? "transparent" : _ref6$borderColor$pur,
+      linear = _ref6$borderColor.linear,
+      _ref6$borderWidth = _ref6.borderWidth,
+      borderWidth = _ref6$borderWidth === void 0 ? 0 : _ref6$borderWidth;
+    var borderStr = "".concat(pure, " solid ").concat(borderWidth, "px");
+    var borderImageSource = (0, _utils.getMultiColorStr)(linear);
+    var positionX = isXRepeat ? xScaler(x) - step / 2 + seriesStart + index * seriesStep : xScaler(x) - seriesWidth / 2;
+    var showHead, headType, headUrl, headVideo, headWidth, headHeight, headTranslate;
+    if (headDecorate) {
+      showHead = headDecorate.show, headType = headDecorate.type, headUrl = headDecorate.url, headVideo = headDecorate.video, 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 = reverse ? y > 0 ? y1 : y2 : y < 0 ? y1 : y2;
+    var _getAttr = getAttr({
+        isVertical: isVertical,
+        x: positionX,
+        y: positionY,
+        length: Math.abs(y1 - y2),
+        seriesWidth: seriesWidth
+      }),
+      bgAttr = _getAttr.bgAttr,
+      attr = (0, _objectWithoutProperties2["default"])(_getAttr, _excluded3);
+    return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
+      key: i
+    }, /*#__PURE__*/_react["default"].createElement("foreignObject", (0, _extends2["default"])({
+      style: {
+        overflow: "visible",
+        position: "relative",
+        cursor: "pointer"
+      }
+    }, bgAttr, {
+      onClick: function onClick(e) {
+        return triggerClick(e, "setCurrent");
+      },
+      onMouseEnter: function onMouseEnter() {
+        if (isControlChart) {
+          setCtlTip(function (pre) {
+            return {
+              show: true,
+              x: xScaler(x),
+              xName: data.x,
+              indicatorList: pre.indicatorList.map(function (item) {
+                if (item.tick === data.x) {
+                  return _objectSpread(_objectSpread({}, item), {}, {
+                    isShow: true
+                  });
+                } else {
+                  return item;
+                }
+              })
+            };
+          });
+        }
+      },
+      onMouseLeave: function onMouseLeave() {
+        if (isControlChart && !auto) {
+          setCtlTip(function (pre) {
+            return {
+              show: false,
+              x: undefined,
+              xName: undefined,
+              indicatorList: pre.indicatorList.map(function (item) {
+                return _objectSpread(_objectSpread({}, item), {}, {
+                  isShow: false
+                });
+              })
+            };
+          });
+        }
+      },
+      "data-mobile": JSON.stringify({
+        x: xScaler(x),
+        xName: data.x
+      }),
+      "data-data": JSON.stringify(data)
+    })), /*#__PURE__*/_react["default"].createElement("foreignObject", (0, _extends2["default"])({
+      style: {
+        overflow: "visible",
+        position: "relative",
+        pointerEvents: "none"
+      }
+    }, attr), (headUrl || headVideo) && showHead && (headType == "image" ? /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        position: "absolute",
+        background: "url(".concat(
+        //@ts-ignore
+        window.appConfig.ASSETS_URL + headUrl, ") 0 0/100% 100%"),
+        width: headWidth,
+        height: headHeight,
+        left: isVertical ? y < 0 ? "0%" : "100%" : "50%",
+        top: isVertical ? "50%" : y < 0 ? "100%" : "0%",
+        zIndex: 1,
+        transform: "translate(calc(-50% + ".concat(headTranslate.x, "px), calc(-50% + ").concat(headTranslate.y, "px))")
+      }
+    }) : /*#__PURE__*/_react["default"].createElement("video", {
+      width: headWidth,
+      height: headHeight
+      //@ts-ignore
+      ,
+      src: window.appConfig.ASSETS_URL + headVideo
+      // controls={true}
+      ,
+      loop: true,
+      muted: true,
+      autoPlay: true,
+      style: {
+        position: "absolute",
+        left: isVertical ? "100%" : "50%",
+        top: isVertical ? "50%" : "0",
+        zIndex: 1,
+        transform: "translate(calc(-50% + ".concat(headTranslate.x, "px), calc(-50% + ").concat(headTranslate.y, "px))")
+      }
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      style: _objectSpread(_objectSpread({
+        width: "100%",
+        height: "100%",
+        /** Safari Bug **/
+        // position: "absolute",
+        clipPath: setClipPath(),
+        opacity: fillType == "pattern" ? opacity : 1,
+        background: fillType == "pattern" ? "".concat(isVertical ? y < 0 ? "100%" : "0%" : "50%", " ").concat(isVertical ? "50%" : y < 0 ? "0%" : "100%", " / ").concat(fillMode == "tile" ? size.width + "px " + size.height + "px" : "100% 100%", " repeat ") + "url(" +
+        //@ts-ignore
+        window.appConfig.ASSETS_URL + url + ")" : (0, _utils.getBandBackground)(pattern, fill, y //是否小于0
+        ),
+        borderRadius: style == "square" ? "0 0 0 0" : getBorderRadius({
+          isVertical: isVertical,
+          positive: y > 0,
+          seriesWidth: seriesWidth
+        })
+      }, type == "pure" && (isVertical ? {
+        borderTop: borderStr,
+        borderRight: borderStr,
+        borderBottom: borderStr
+      } : {
+        borderTop: borderStr,
+        borderRight: borderStr,
+        borderLeft: borderStr
+      })), type == "linear" && {
+        borderImageSource: borderImageSource,
+        borderImageSlice: 1,
+        borderWidth: isVertical ? "".concat(borderWidth, "px ").concat(borderWidth, "px ").concat(borderWidth, "px 0") : "".concat(borderWidth, "px ").concat(borderWidth, "px 0 ").concat(borderWidth, "px"),
+        borderStyle: "solid"
+      })
+    })));
+  }));
 });