@easyv/charts 1.2.0 → 1.2.1

package/lib/components/StereoBar.js

@@ -1,337 +1,337 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _d3v = require("d3v7");
-
-var _utils = require("../utils");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-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;
-  if (isVertical) return {
-    width: length,
-    height: seriesWidth,
-    x: y,
-    y: x
-  };
-  return {
-    x: x,
-    y: y,
-    width: seriesWidth,
-    height: length
-  };
-};
-
-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 = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
-  var triggerClick = _ref3.triggerClick,
-      _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,
-      style = _ref3$config.style,
-      fill = _ref3$config.fill,
-      _ref3$config$highligh = _ref3$config.highlight,
-      showHighlight = _ref3$config$highligh.show,
-      extent = _ref3$config$highligh.extent,
-      highlightFill = _ref3$config$highligh.fill,
-      id = _ref3$config.id,
-      _ref3$bandLength = _ref3.bandLength,
-      bandLength = _ref3$bandLength === void 0 ? 0 : _ref3$bandLength,
-      data = _ref3.data,
-      _ref3$xAxis = _ref3.xAxis,
-      xScaler = _ref3$xAxis.scaler,
-      step = _ref3$xAxis.step,
-      direction = _ref3$xAxis.direction,
-      yScaler = _ref3.yAxis.scaler,
-      fieldName = _ref3.fieldName;
-  if (!data.length) return null;
-  var bandwidth = (0, _utils.getBandwidth)(step, paddingOuter);
-
-  var _getBandSeriesStepAnd = (0, _utils.getBandSeriesStepAndWidth)({
-    width: bandwidth,
-    paddingInner: paddingInner,
-    bandLength: bandLength
-  }),
-      seriesStep = _getBandSeriesStepAnd.seriesStep,
-      seriesWidth = _getBandSeriesStepAnd.seriesWidth;
-
-  var _data = showHighlight ? getHighlightData(data, extent) : data;
-
-  var offset = (seriesWidth + paddingInner * seriesStep) * bandLength - paddingInner * seriesStep;
-  var isVertical = direction === 'vertical';
-  var highlightColor = parseMultiColorToSVG(highlightFill, "highlight_gradient_" + id + "_" + fieldName);
-  var color = parseMultiColorToSVG(fill, "gradient_" + id + "_" + fieldName);
-  return /*#__PURE__*/_react["default"].createElement("g", {
-    className: "__easyv-band"
-  }, /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("filter", {
-    id: "filter_front"
-  }, /*#__PURE__*/_react["default"].createElement("feComponentTransfer", null, /*#__PURE__*/_react["default"].createElement("feFuncR", {
-    type: "linear",
-    slope: "0.5"
-  }), /*#__PURE__*/_react["default"].createElement("feFuncG", {
-    type: "linear",
-    slope: "0.5"
-  }), /*#__PURE__*/_react["default"].createElement("feFuncB", {
-    type: "linear",
-    slope: "0.5"
-  }))), /*#__PURE__*/_react["default"].createElement("filter", {
-    id: "filter_side"
-  }, /*#__PURE__*/_react["default"].createElement("feComponentTransfer", null, /*#__PURE__*/_react["default"].createElement("feFuncR", {
-    type: "linear",
-    slope: "0.7"
-  }), /*#__PURE__*/_react["default"].createElement("feFuncG", {
-    type: "linear",
-    slope: "0.7"
-  }), /*#__PURE__*/_react["default"].createElement("feFuncB", {
-    type: "linear",
-    slope: "0.7"
-  }))), highlightColor.def, color.def), _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 = yScaler(isVertical ? end : start);
-    var y2 = yScaler(isVertical ? start : end);
-    var positionX = xScaler(x) + seriesStep * index - offset / 2;
-    if (isNaN(positionX)) return null;
-    var positionY = y < 0 ? y1 : y2;
-    var attr = getAttr({
-      isVertical: isVertical,
-      x: positionX,
-      y: positionY,
-      length: Math.abs(y1 - y2),
-      seriesWidth: seriesWidth
-    });
-    return /*#__PURE__*/_react["default"].createElement("g", {
-      key: i,
-      onClick: triggerClick,
-      "data-data": JSON.stringify(data)
-    }, /*#__PURE__*/_react["default"].createElement(Column3DSkin, (0, _extends2["default"])({}, attr, {
-      color: extent === flag ? highlightColor : color
-    })));
-  }));
-});
-
-exports["default"] = _default;
-
-var Column3DSkin = function Column3DSkin(props) {
-  var width = props.width,
-      height = props.height,
-      x = props.x,
-      y = props.y,
-      color = props.color,
-      _props$opacity = props.opacity,
-      opacity = _props$opacity === void 0 ? 1 : _props$opacity;
-  return /*#__PURE__*/_react["default"].createElement("g", {
-    style: {
-      transform: "skew(0deg, 23deg)",
-      transformOrigin: "".concat(x + width / 2, "px ").concat(y + height / 2, "px"),
-      opacity: opacity
-    }
-  }, color.defs, /*#__PURE__*/_react["default"].createElement("rect", {
-    width: width / 2,
-    height: height,
-    x: x,
-    y: y,
-    fill: color.fill,
-    style: {
-      filter: "url(#filter_front)"
-    }
-  }), /*#__PURE__*/_react["default"].createElement("rect", {
-    width: width / 2,
-    height: height,
-    x: x + width / 2,
-    y: y,
-    fill: color.fill,
-    style: {
-      transformOrigin: "".concat(x + width / 2, "px ").concat(y + height / 2, "px"),
-      transform: 'skew(0deg, -45deg)'
-    }
-  }), /*#__PURE__*/_react["default"].createElement("rect", {
-    width: width / 2,
-    height: width / 2,
-    x: x,
-    y: y,
-    fill: color.firstColor ? color.firstColor : color,
-    style: {
-      transformOrigin: "".concat(x + width / 4 * 3, "px ").concat(y, "px"),
-      transform: "skew(-45deg) translate(0, -".concat(width / 2, "px)")
-    }
-  }));
-}; //以下都是为了解析multicolor
-
-
-function pointRotate(point, center, angle) {
-  var x = point[0],
-      y = point[1],
-      rx = center[0],
-      ry = center[1],
-      cos = Math.cos(angle),
-      sin = Math.sin(angle);
-  var x0 = (x - rx) * cos - (y - ry) * sin + rx;
-  var y0 = (x - rx) * sin + (y - ry) * cos + ry;
-  return [x0, y0];
-}
-
-var AngleTransfromRatio = 180 / Math.PI;
-
-function deg2rad(deg) {
-  return deg / AngleTransfromRatio;
-}
-
-function deepCopy(obj) {
-  if ((0, _typeof2["default"])(obj) == "object") {
-    var o;
-
-    if (Array.isArray(obj)) {
-      o = [];
-
-      for (var i = 0; i < obj.length; i++) {
-        o.push(deepCopy(obj[i]));
-      }
-    } else {
-      o = {};
-
-      for (var _i = 0, _Object$keys = Object.keys(obj); _i < _Object$keys.length; _i++) {
-        var k = _Object$keys[_i];
-        o[k] = deepCopy(obj[k]);
-      }
-    }
-
-    return o;
-  } else {
-    return obj;
-  }
-}
-
-function parseMultiColorToSVG(config, id) {
-  if (config.type == "linear") {
-    var _config$linear = config.linear,
-        stops = _config$linear.stops,
-        opacity = _config$linear.opacity;
-    var start = [0, 0.5],
-        end = [1, 0.5];
-    var angle = config.linear.angle + 90;
-
-    if (angle) {
-      var center = [0.5, 0.5];
-      start = pointRotate(start, center, deg2rad(angle));
-      end = pointRotate(end, center, deg2rad(angle));
-    }
-
-    var _stops = deepCopy(stops); //深度复制再排序防止修改props
-
-
-    _stops.sort(function (a, b) {
-      return a.offset - b.offset;
-    }); //必须排序才能渲染出来
-
-
-    return {
-      fill: "url(#".concat(id, ")"),
-      def: /*#__PURE__*/_react["default"].createElement("linearGradient", {
-        id: id,
-        x2: start[0],
-        y2: start[1],
-        x1: end[0],
-        y1: end[1]
-      }, _stops.map(function (e) {
-        return /*#__PURE__*/_react["default"].createElement("stop", {
-          key: e.offset,
-          offset: e.offset / 100,
-          stopColor: e.color,
-          stopOpacity: opacity
-        });
-      })),
-      firstColor: getTopColor(_stops, angle)
-    };
-  } else {
-    return {
-      fill: config.pure,
-      firstColor: config.pure
-    };
-  }
-}
-
-function getTopColor(stops, angle) {
-  var a = angle % 360;
-
-  if (a < 0) {
-    a = 360 + a;
-  }
-
-  if (a >= 90 && a < 270) {
-    return stops[stops.length - 1].color;
-  } else {
-    return stops[0].color;
-  }
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _d3v = require("d3v7");
+
+var _utils = require("../utils");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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;
+  if (isVertical) return {
+    width: length,
+    height: seriesWidth,
+    x: y,
+    y: x
+  };
+  return {
+    x: x,
+    y: y,
+    width: seriesWidth,
+    height: length
+  };
+};
+
+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 = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
+  var triggerClick = _ref3.triggerClick,
+      _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,
+      style = _ref3$config.style,
+      fill = _ref3$config.fill,
+      _ref3$config$highligh = _ref3$config.highlight,
+      showHighlight = _ref3$config$highligh.show,
+      extent = _ref3$config$highligh.extent,
+      highlightFill = _ref3$config$highligh.fill,
+      id = _ref3$config.id,
+      _ref3$bandLength = _ref3.bandLength,
+      bandLength = _ref3$bandLength === void 0 ? 0 : _ref3$bandLength,
+      data = _ref3.data,
+      _ref3$xAxis = _ref3.xAxis,
+      xScaler = _ref3$xAxis.scaler,
+      step = _ref3$xAxis.step,
+      direction = _ref3$xAxis.direction,
+      yScaler = _ref3.yAxis.scaler,
+      fieldName = _ref3.fieldName;
+  if (!data.length) return null;
+  var bandwidth = (0, _utils.getBandwidth)(step, paddingOuter);
+
+  var _getBandSeriesStepAnd = (0, _utils.getBandSeriesStepAndWidth)({
+    width: bandwidth,
+    paddingInner: paddingInner,
+    bandLength: bandLength
+  }),
+      seriesStep = _getBandSeriesStepAnd.seriesStep,
+      seriesWidth = _getBandSeriesStepAnd.seriesWidth;
+
+  var _data = showHighlight ? getHighlightData(data, extent) : data;
+
+  var offset = (seriesWidth + paddingInner * seriesStep) * bandLength - paddingInner * seriesStep;
+  var isVertical = direction === 'vertical';
+  var highlightColor = parseMultiColorToSVG(highlightFill, "highlight_gradient_" + id + "_" + fieldName);
+  var color = parseMultiColorToSVG(fill, "gradient_" + id + "_" + fieldName);
+  return /*#__PURE__*/_react["default"].createElement("g", {
+    className: "__easyv-band"
+  }, /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("filter", {
+    id: "filter_front"
+  }, /*#__PURE__*/_react["default"].createElement("feComponentTransfer", null, /*#__PURE__*/_react["default"].createElement("feFuncR", {
+    type: "linear",
+    slope: "0.5"
+  }), /*#__PURE__*/_react["default"].createElement("feFuncG", {
+    type: "linear",
+    slope: "0.5"
+  }), /*#__PURE__*/_react["default"].createElement("feFuncB", {
+    type: "linear",
+    slope: "0.5"
+  }))), /*#__PURE__*/_react["default"].createElement("filter", {
+    id: "filter_side"
+  }, /*#__PURE__*/_react["default"].createElement("feComponentTransfer", null, /*#__PURE__*/_react["default"].createElement("feFuncR", {
+    type: "linear",
+    slope: "0.7"
+  }), /*#__PURE__*/_react["default"].createElement("feFuncG", {
+    type: "linear",
+    slope: "0.7"
+  }), /*#__PURE__*/_react["default"].createElement("feFuncB", {
+    type: "linear",
+    slope: "0.7"
+  }))), highlightColor.def, color.def), _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 = yScaler(isVertical ? end : start);
+    var y2 = yScaler(isVertical ? start : end);
+    var positionX = xScaler(x) + seriesStep * index - offset / 2;
+    if (isNaN(positionX)) return null;
+    var positionY = y < 0 ? y1 : y2;
+    var attr = getAttr({
+      isVertical: isVertical,
+      x: positionX,
+      y: positionY,
+      length: Math.abs(y1 - y2),
+      seriesWidth: seriesWidth
+    });
+    return /*#__PURE__*/_react["default"].createElement("g", {
+      key: i,
+      onClick: triggerClick,
+      "data-data": JSON.stringify(data)
+    }, /*#__PURE__*/_react["default"].createElement(Column3DSkin, (0, _extends2["default"])({}, attr, {
+      color: extent === flag ? highlightColor : color
+    })));
+  }));
+});
+
+exports["default"] = _default;
+
+var Column3DSkin = function Column3DSkin(props) {
+  var width = props.width,
+      height = props.height,
+      x = props.x,
+      y = props.y,
+      color = props.color,
+      _props$opacity = props.opacity,
+      opacity = _props$opacity === void 0 ? 1 : _props$opacity;
+  return /*#__PURE__*/_react["default"].createElement("g", {
+    style: {
+      transform: "skew(0deg, 23deg)",
+      transformOrigin: "".concat(x + width / 2, "px ").concat(y + height / 2, "px"),
+      opacity: opacity
+    }
+  }, color.defs, /*#__PURE__*/_react["default"].createElement("rect", {
+    width: width / 2,
+    height: height,
+    x: x,
+    y: y,
+    fill: color.fill,
+    style: {
+      filter: "url(#filter_front)"
+    }
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    width: width / 2,
+    height: height,
+    x: x + width / 2,
+    y: y,
+    fill: color.fill,
+    style: {
+      transformOrigin: "".concat(x + width / 2, "px ").concat(y + height / 2, "px"),
+      transform: 'skew(0deg, -45deg)'
+    }
+  }), /*#__PURE__*/_react["default"].createElement("rect", {
+    width: width / 2,
+    height: width / 2,
+    x: x,
+    y: y,
+    fill: color.firstColor ? color.firstColor : color,
+    style: {
+      transformOrigin: "".concat(x + width / 4 * 3, "px ").concat(y, "px"),
+      transform: "skew(-45deg) translate(0, -".concat(width / 2, "px)")
+    }
+  }));
+}; //以下都是为了解析multicolor
+
+
+function pointRotate(point, center, angle) {
+  var x = point[0],
+      y = point[1],
+      rx = center[0],
+      ry = center[1],
+      cos = Math.cos(angle),
+      sin = Math.sin(angle);
+  var x0 = (x - rx) * cos - (y - ry) * sin + rx;
+  var y0 = (x - rx) * sin + (y - ry) * cos + ry;
+  return [x0, y0];
+}
+
+var AngleTransfromRatio = 180 / Math.PI;
+
+function deg2rad(deg) {
+  return deg / AngleTransfromRatio;
+}
+
+function deepCopy(obj) {
+  if ((0, _typeof2["default"])(obj) == "object") {
+    var o;
+
+    if (Array.isArray(obj)) {
+      o = [];
+
+      for (var i = 0; i < obj.length; i++) {
+        o.push(deepCopy(obj[i]));
+      }
+    } else {
+      o = {};
+
+      for (var _i = 0, _Object$keys = Object.keys(obj); _i < _Object$keys.length; _i++) {
+        var k = _Object$keys[_i];
+        o[k] = deepCopy(obj[k]);
+      }
+    }
+
+    return o;
+  } else {
+    return obj;
+  }
+}
+
+function parseMultiColorToSVG(config, id) {
+  if (config.type == "linear") {
+    var _config$linear = config.linear,
+        stops = _config$linear.stops,
+        opacity = _config$linear.opacity;
+    var start = [0, 0.5],
+        end = [1, 0.5];
+    var angle = config.linear.angle + 90;
+
+    if (angle) {
+      var center = [0.5, 0.5];
+      start = pointRotate(start, center, deg2rad(angle));
+      end = pointRotate(end, center, deg2rad(angle));
+    }
+
+    var _stops = deepCopy(stops); //深度复制再排序防止修改props
+
+
+    _stops.sort(function (a, b) {
+      return a.offset - b.offset;
+    }); //必须排序才能渲染出来
+
+
+    return {
+      fill: "url(#".concat(id, ")"),
+      def: /*#__PURE__*/_react["default"].createElement("linearGradient", {
+        id: id,
+        x2: start[0],
+        y2: start[1],
+        x1: end[0],
+        y1: end[1]
+      }, _stops.map(function (e) {
+        return /*#__PURE__*/_react["default"].createElement("stop", {
+          key: e.offset,
+          offset: e.offset / 100,
+          stopColor: e.color,
+          stopOpacity: opacity
+        });
+      })),
+      firstColor: getTopColor(_stops, angle)
+    };
+  } else {
+    return {
+      fill: config.pure,
+      firstColor: config.pure
+    };
+  }
+}
+
+function getTopColor(stops, angle) {
+  var a = angle % 360;
+
+  if (a < 0) {
+    a = 360 + a;
+  }
+
+  if (a >= 90 && a < 270) {
+    return stops[stops.length - 1].color;
+  } else {
+    return stops[0].color;
+  }
 }