@easyv/charts 1.8.8 → 1.8.10

package/lib/components/Band.js

@@ -295,8 +295,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
         window.appConfig.ASSETS_URL + headUrl, ") 0 0/100% 100%"),
         width: headWidth,
         height: headHeight,
-        left: isVertical ? "100%" : "50%",
-        top: isVertical ? "50%" : "0",
+        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))")
       }
@@ -328,7 +328,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
         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, extent === flag ? highlightFill : fill),
+        window.appConfig.ASSETS_URL + url + ")" : (0, _utils.getBandBackground)(pattern, extent === flag ? highlightFill : fill, y //是否小于0
+        ),
         borderRadius: style == "square" ? "0 0 0 0" : getBorderRadius({
           isVertical: isVertical,
           positive: y > 0,

package/lib/components/CartesianChart.js

@@ -65,6 +65,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     brush = _ref$config.brush,
     _ref$config$control = _ref$config.control,
     control = _ref$config$control === void 0 ? null : _ref$config$control,
+    isTransverse = _ref.isTransverse,
     active = _ref.active,
     style = _ref.style,
     originData = _ref.originData,
@@ -592,7 +593,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       indicatorWidth: indicatorWidth,
       triggerClick: onInteraction,
       setCtlTip: setCtlTip,
-      isXRepeat: isXRepeat
+      isXRepeat: isXRepeat,
+      isTransverse: isTransverse
     }));
   }), series.map(function (_ref3, index) {
     var Component = _ref3.Component,

package/lib/components/Legend.js

@@ -148,6 +148,24 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     return parseFloat(getCanvasTextWidth(percentStr, percentFont.letterSpacing || 0, "".concat(percentFont.fontSize || 12, "px ").concat(percentFont.fontFamily || 'Arial')));
   })));
   var nameMaxWidth = ((_config$name = config.name) === null || _config$name === void 0 ? void 0 : _config$name.maxWidth) || 80;
+  var stylePieOrAxis = formatter ? _objectSpread(_objectSpread({
+    display: 'flex',
+    alignContent: alignment.split(" ")[0] == "center" && (alignment.split(" ")[1] == "left" || alignment.split(" ")[1] == "right") ? alignment.split(" ")[1] == "left" ? "flex-start" : "flex-end" : alignment.split(" ")[0] == "left" ? "flex-start" : alignment.split(" ")[0] == "center" ? "center" : "flex-end",
+    flexDirection: "column",
+    position: 'absolute'
+  }, getPosition(position, _alignment, x, y)), {}, {
+    height: loop.show ? height : 'auto',
+    overflowY: loop.show ? 'scroll' : 'auto'
+  }) : _objectSpread(_objectSpread({
+    display: 'flex',
+    flexWrap: "wrap",
+    alignContent: alignment.split(" ")[0] == "center" && (alignment.split(" ")[1] == "left" || alignment.split(" ")[1] == "right") ? alignment.split(" ")[1] == "left" ? "flex-start" : "flex-end" : alignment.split(" ")[0] == "left" ? "flex-start" : alignment.split(" ")[0] == "center" ? "center" : "flex-end",
+    flexDirection: "column",
+    position: 'absolute'
+  }, getPosition(position, _alignment, x, y)), {}, {
+    height: loop.show ? height : 'auto',
+    overflowY: loop.show ? 'scroll' : 'auto'
+  });
   return LegendType == "FixedWidth" ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "__easyv-legend-wrapper",
     style: _objectSpread(_objectSpread({
@@ -201,16 +219,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     })));
   }))) : /*#__PURE__*/_react["default"].createElement("div", {
     className: "__easyv-legend-wrapper",
-    style: _objectSpread(_objectSpread({
-      display: 'flex',
-      flexWrap: "wrap",
-      alignContent: alignment.split(" ")[0] == "center" && (alignment.split(" ")[1] == "left" || alignment.split(" ")[1] == "right") ? alignment.split(" ")[1] == "left" ? "flex-start" : "flex-end" : alignment.split(" ")[0] == "left" ? "flex-start" : alignment.split(" ")[0] == "center" ? "center" : "flex-end",
-      flexDirection: "column",
-      position: 'absolute'
-    }, getPosition(position, _alignment, x, y)), {}, {
-      height: loop.show ? height : 'auto',
-      overflowY: loop.show ? 'scroll' : 'auto'
-    }),
+    style: stylePieOrAxis,
     ref: ref_container
   }, (0, _toConsumableArray2["default"])(Array(Math.ceil(series.length / gridTemplateColumns))).map(function (_, indexs) {
     return /*#__PURE__*/_react["default"].createElement("ul", {

package/lib/utils/index.js

@@ -531,8 +531,38 @@ var getCurrentStack = exports.getCurrentStack = function getCurrentStack(stack,
     return _type == stack.type && _stack == stack.stack && _yOrZ == stack.yOrZ && _s.includes(stack.name);
   });
 };
-var getBandBackground = exports.getBandBackground = function getBandBackground(pattern, fill) {
-  if (!(pattern && pattern.path)) return (0, _utils.getColor)(fill);
+var reverseGradientStops = function reverseGradientStops(gradient) {
+  var _gradient$linear;
+  if (gradient.type !== 'linear' || !((_gradient$linear = gradient.linear) !== null && _gradient$linear !== void 0 && _gradient$linear.stops)) {
+    return gradient;
+  }
+  var stops = gradient.linear.stops;
+  //先按 offset 排序（升序），确保输入是规范的
+  var sortedStops = (0, _toConsumableArray2["default"])(stops).sort(function (a, b) {
+    return a.offset - b.offset;
+  });
+
+  // 反转每个 stop 的 offset: newOffset = 100 - oldOffset
+  // 颜色保持不变，只是位置镜像翻转
+  var reversedStops = sortedStops.map(function (stop) {
+    return _objectSpread(_objectSpread({}, stop), {}, {
+      offset: 100 - stop.offset
+    });
+  });
+  //再按新的 offset 升序排序，确保输出结构正确
+  var finalStops = reversedStops.sort(function (a, b) {
+    return a.offset - b.offset;
+  });
+  return _objectSpread(_objectSpread({}, gradient), {}, {
+    linear: _objectSpread(_objectSpread({}, gradient.linear), {}, {
+      stops: finalStops
+    })
+  });
+};
+var getBandBackground = exports.getBandBackground = function getBandBackground(pattern, fill, y) {
+  if (!(pattern && pattern.path)) {
+    return (0, _utils.getColor)(y < 0 ? reverseGradientStops(fill) : fill); //小于0颜色翻转
+  }
   try {
     var _pattern$backgroundSi = pattern.backgroundSize,
       backgroundSize = _pattern$backgroundSi === void 0 ? '100% 100%' : _pattern$backgroundSi,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.8.8",
+  "version": "1.8.10",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Band.tsx

@@ -254,8 +254,8 @@ export default memo(
                         }) 0 0/100% 100%`,
                         width: headWidth,
                         height: headHeight,
-                        left: isVertical ? "100%" : "50%",
-                        top: isVertical ? "50%" : "0",
+                        left: isVertical ? (y<0?"0%":"100%") : "50%",
+                        top: isVertical ? "50%" :(y<0?"100%":"0%"),
                         zIndex: 1,
                         transform: `translate(calc(-50% + ${headTranslate.x}px), calc(-50% + ${headTranslate.y}px))`,
                       }}
@@ -293,7 +293,8 @@ export default memo(
                             ")"
                           : getBandBackground(
                               pattern,
-                              extent === flag ? highlightFill : fill
+                              extent === flag ? highlightFill : fill,
+                              y//是否小于0
                             ),
                       borderRadius:
                         style == "square"

package/src/components/CartesianChart.js

@@ -59,6 +59,7 @@ const Chart = memo(
       brush,
       control = null,
     },
+    isTransverse,
     active,
     style,
     originData,
@@ -567,6 +568,7 @@ const Chart = memo(
                       triggerClick={onInteraction}
                       setCtlTip={setCtlTip}
                       isXRepeat={isXRepeat}
+                      isTransverse={isTransverse}
                     />
                   )
                 );

package/src/components/Legend.js

@@ -123,6 +123,24 @@ export default memo(
     );
     const nameMaxWidth = config.name?.maxWidth || 80;
 
+const stylePieOrAxis=formatter?{
+  display:'flex',
+  alignContent:alignment.split(" ")[0]=="center"&&(alignment.split(" ")[1]=="left"||alignment.split(" ")[1]=="right")?alignment.split(" ")[1]=="left"?"flex-start":"flex-end":alignment.split(" ")[0]=="left"?"flex-start":alignment.split(" ")[0]=="center"?"center":"flex-end",
+  flexDirection:"column",
+  position: 'absolute',
+  ...getPosition(position, _alignment, x, y),
+  height: loop.show ? height : 'auto',
+  overflowY: loop.show ? 'scroll' : 'auto'
+}:{
+  display:'flex',
+  flexWrap:"wrap",
+  alignContent:alignment.split(" ")[0]=="center"&&(alignment.split(" ")[1]=="left"||alignment.split(" ")[1]=="right")?alignment.split(" ")[1]=="left"?"flex-start":"flex-end":alignment.split(" ")[0]=="left"?"flex-start":alignment.split(" ")[0]=="center"?"center":"flex-end",
+  flexDirection: "column",
+  position: 'absolute',
+  ...getPosition(position, _alignment, x, y),
+  height: loop.show ? height : 'auto',
+  overflowY: loop.show ? 'scroll' : 'auto'
+}
     return (
       LegendType=="FixedWidth"?
       <div
@@ -180,16 +198,7 @@ export default memo(
         </ul>
       </div>:<div
         className='__easyv-legend-wrapper'
-        style={{
-          display:'flex',
-          flexWrap:"wrap",
-          alignContent:alignment.split(" ")[0]=="center"&&(alignment.split(" ")[1]=="left"||alignment.split(" ")[1]=="right")?alignment.split(" ")[1]=="left"?"flex-start":"flex-end":alignment.split(" ")[0]=="left"?"flex-start":alignment.split(" ")[0]=="center"?"center":"flex-end",
-          flexDirection: "column",
-          position: 'absolute',
-          ...getPosition(position, _alignment, x, y),
-          height: loop.show ? height : 'auto',
-          overflowY: loop.show ? 'scroll' : 'auto'
-        }}
+        style={stylePieOrAxis}
         ref={ref_container}
       >
 

package/src/utils/index.js

@@ -513,9 +513,35 @@ const getCurrentStack = (stack, stackMap) =>
       _yOrZ == stack.yOrZ &&
       _s.includes(stack.name)
   );
-
-const getBandBackground = (pattern, fill) => {
-  if (!(pattern && pattern.path)) return getColor(fill);
+  const reverseGradientStops=(gradient)=>{
+    if (gradient.type !== 'linear' || !gradient.linear?.stops) {
+      return gradient;
+    }
+    const stops = gradient.linear.stops;
+    //先按 offset 排序（升序），确保输入是规范的
+    const sortedStops = [...stops].sort((a, b) => a.offset - b.offset);
+  
+    // 反转每个 stop 的 offset: newOffset = 100 - oldOffset
+    // 颜色保持不变，只是位置镜像翻转
+    const reversedStops = sortedStops.map(stop => ({
+      ...stop,
+      offset: 100 - stop.offset
+    }));
+    //再按新的 offset 升序排序，确保输出结构正确
+    const finalStops = reversedStops.sort((a, b) => a.offset - b.offset);
+  
+    return {
+      ...gradient,
+      linear: {
+        ...gradient.linear,
+        stops: finalStops
+      }
+    };
+  }
+const getBandBackground = (pattern, fill,y) => {
+  if (!(pattern && pattern.path)){
+    return getColor(y<0?reverseGradientStops(fill):fill);//小于0颜色翻转
+  }
   try{
     const { backgroundSize = '100% 100%', ..._pattern } = pattern;
     return (