@easyv/charts 1.6.21 → 1.6.23

package/lib/components/Band.js

@@ -108,6 +108,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     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,
@@ -182,7 +184,17 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       border = _ref5.border,
       opacity = _ref5.opacity,
       headDecorate = _ref5.headDecorate;
-    var borderStr = "".concat(border.borderColor, " solid ").concat(border.borderWidth, "px");
+    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 = xScaler(x) - step / 2 + seriesStart + index * seriesStep;
     var showHead, headType, headUrl, headVideo, headWidth, headHeight, headTranslate;
     if (headDecorate) {
@@ -246,7 +258,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
         }
       },
       onMouseLeave: function onMouseLeave() {
-        if (isControlChart) {
+        if (isControlChart && !auto) {
           setCtlTip(function (pre) {
             return {
               show: false,
@@ -300,7 +312,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
         transform: "translate(calc(-50% + ".concat(headTranslate.x, "px), calc(-50% + ").concat(headTranslate.y, "px))")
       }
     })), /*#__PURE__*/_react["default"].createElement("div", {
-      style: _objectSpread({
+      style: _objectSpread(_objectSpread({
         width: "100%",
         height: "100%",
         /** Safari Bug **/
@@ -315,7 +327,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
           positive: y > 0,
           seriesWidth: seriesWidth
         })
-      }, isVertical ? {
+      }, type == "pure" && (isVertical ? {
         borderTop: borderStr,
         borderRight: borderStr,
         borderBottom: borderStr
@@ -323,6 +335,11 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
         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"
       })
     })));
   }));

package/lib/components/CartesianChart.js

@@ -83,6 +83,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     triggerOnRelative = context.triggerOnRelative,
     onEmit = context.onEmit;
   var defaultSelected = selectStyle ? selectStyle.defaultSelected : "";
+  var _indicator$zIndex = indicator.zIndex,
+    zIndex = _indicator$zIndex === void 0 ? "bottom" : _indicator$zIndex;
   var xLineRange = chartWidth;
   var yLineRange = chartHeight;
   //获取控制条相关的参数
@@ -149,7 +151,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     };
     document.addEventListener("setCurrent_".concat(id), handleAction, false);
     return function () {
-      document.removeEventListener("setCurent_".concat(id), handleAction);
+      document.removeEventListener("setCurrent_".concat(id), handleAction);
     };
   }, []);
   (0, _react.useEffect)(function () {
@@ -384,6 +386,26 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   });
   var bodyWidth = isVertical ? xLineRange + 100 + marginRight + marginLeft : xLineRange,
     bodyHeight = isVertical ? yLineRange : yLineRange + marginTop + marginBottom;
+  (0, _react.useEffect)(function () {
+    setCtlTip(function (pre) {
+      return {
+        show: !!tickName,
+        x: tooltipX,
+        xName: tickName,
+        indicatorList: pre.indicatorList.map(function (item) {
+          if (item.tick === tickName) {
+            return _objectSpread(_objectSpread({}, item), {}, {
+              isShow: true
+            });
+          } else {
+            return _objectSpread(_objectSpread({}, item), {}, {
+              isShow: false
+            });
+          }
+        })
+      };
+    });
+  }, [tooltipX, tickName]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.ChartContainer, {
     style: _objectSpread(_objectSpread({}, style), {}, {
       position: "absolute"
@@ -395,7 +417,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     onMouseEnter: function onMouseEnter() {
       setIsHover(true);
     },
-    onMouseMove: setIndex,
+    onMouseMove: !control ? setIndex : null,
     onMouseLeave: function onMouseLeave(e) {
       setIsHover(false);
       setIndex(e);
@@ -441,8 +463,9 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     }, config, {
       key: index
     }));
-  }), showTooltip && !control && /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({}, indicator, {
-    manual: manual
+  }), showTooltip && !control && zIndex == "bottom" && /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({}, indicator, {
+    manual: manual,
+    auto: auto
   }, indicatorAttr)), /*#__PURE__*/_react["default"].createElement("foreignObject", {
     style: {
       width: bodyWidth,
@@ -458,7 +481,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       position: "absolute",
       transform: isVertical ? "translate(".concat(marginRight, "px,").concat(isIOS ? marginTop : 0, "px)") : "translate(".concat(isIOS ? marginLeft : 0, "px,").concat(marginTop, "px)")
     }
-  }, /*#__PURE__*/_react["default"].createElement("g", null, control && ctlIndicatorList.map(function (item, index) {
+  }, /*#__PURE__*/_react["default"].createElement("g", null, control && zIndex == "bottom" && ctlIndicatorList.map(function (item, index) {
     var x = axisX.scaler(item.tick);
     return /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({
       key: index
@@ -484,7 +507,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       curXLabel: curXLabel,
       selectStyle: selectStyle,
       xAxis: axisX,
-      yAxis: yAxis
+      yAxis: yAxis,
+      auto: auto
       // 控制图部分，主要是为了，当鼠标悬浮在指示器上时，显示对应的tooltip
       ,
       isControlChart: !!control,
@@ -507,6 +531,32 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       yAxis: yAxis,
       triggerClick: onInteraction
     }));
+  }), /*#__PURE__*/_react["default"].createElement("g", null, control && zIndex != "bottom" && ctlIndicatorList.map(function (item, index) {
+    var x = axisX.scaler(item.tick);
+    return /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({
+      key: index
+    }, indicator, {
+      height: yLineRange,
+      width: indicatorWidth,
+      x: x - indicatorWidth / 2,
+      isControlChart: !!control,
+      xName: item.tick,
+      setCtlTip: setCtlTip,
+      ctlIndicatorList: ctlIndicatorList,
+      manual: manual
+    }));
+  }))), showCtl && !!control && /*#__PURE__*/_react["default"].createElement(_.Tooltip, (0, _extends2["default"])({
+    isVertical: isVertical
+  }, tooltip, {
+    data: controlChartTooltipData,
+    x: ctlX - marginLeft - (axisX.controlEnd + axisX.start / cPercent - chartWidth) * curControlPercent.current,
+    marginLeft: marginLeft,
+    marginTop: marginTop,
+    tickName: ctlXName,
+    series: series,
+    width: width,
+    height: height,
+    manual: manual
   }))), baseLineData && baseLineData.length > 0 && baseLineData.map(function (item, index) {
     var yOrZ = baseLineConfig[index].line.yOrZ;
     var yAxis = axes.get(yOrZ);
@@ -521,7 +571,10 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       axisX: axisX,
       data: item
     });
-  })), control && /*#__PURE__*/_react["default"].createElement(_.Control, {
+  }), showTooltip && !control && zIndex != "bottom" && /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({}, indicator, {
+    manual: manual,
+    auto: auto
+  }, indicatorAttr))), control && /*#__PURE__*/_react["default"].createElement(_.Control, {
     ref: controlEl,
     actions: {
       setX: setControlTranslate,
@@ -551,18 +604,6 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     width: width,
     height: height,
     manual: manual
-  })), showCtl && !!control && /*#__PURE__*/_react["default"].createElement(_.Tooltip, (0, _extends2["default"])({
-    isVertical: isVertical
-  }, tooltip, {
-    data: controlChartTooltipData,
-    x: ctlX - (axisX.controlEnd + axisX.start / cPercent - chartWidth) * curControlPercent.current,
-    marginLeft: marginLeft,
-    marginTop: marginTop,
-    tickName: ctlXName,
-    series: series,
-    width: width,
-    height: height,
-    manual: manual
   })), brush && /*#__PURE__*/_react["default"].createElement(_.Brush, {
     config: brush,
     width: width

package/lib/components/Control.js

@@ -251,7 +251,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     }, config, {
       bandLength: bandLength,
       xAxis: xAxis,
-      yAxis: cloneYAxis
+      yAxis: cloneYAxis,
+      triggerClick: function triggerClick() {}
     }));
   })), /*#__PURE__*/_react["default"].createElement("div", {
     ref: ref,

package/lib/components/Indicator.js

@@ -25,7 +25,8 @@ var _default = exports["default"] = function _default(_ref) {
     xName = _ref$xName === void 0 ? null : _ref$xName,
     ctlIndicatorList = _ref.ctlIndicatorList,
     setCtlTip = _ref.setCtlTip,
-    manual = _ref.manual;
+    manual = _ref.manual,
+    auto = _ref.auto;
   var isShow = true;
   if (isControlChart && ctlIndicatorList) {
     isShow = ctlIndicatorList.find(function (item) {
@@ -57,7 +58,7 @@ var _default = exports["default"] = function _default(_ref) {
       }
     },
     onMouseLeave: function onMouseLeave() {
-      if (isControlChart) {
+      if (isControlChart && !auto) {
         setCtlTip(function (pre) {
           return {
             show: false,

package/lib/components/Label.js

@@ -96,8 +96,11 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       label = _ref3.label;
     var showIcon = icon && icon.show;
     var showLabel = label && label.show;
-    var _position = label.position,
-      reverse = label.reverse;
+    var _ref4 = label || {},
+      _ref4$position = _ref4.position,
+      _position = _ref4$position === void 0 ? "outerStart" : _ref4$position,
+      _ref4$reverse = _ref4.reverse,
+      reverse = _ref4$reverse === void 0 ? true : _ref4$reverse;
     if (isClipAxis) {
       if (end > +clipValue) {
         y1 = yScaler[1](start);
@@ -158,28 +161,28 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     }, attr)));
   }));
 });
-var Label = function Label(_ref4) {
-  var x = _ref4.x,
-    y = _ref4.y,
-    value = _ref4.value,
-    _ref4$config = _ref4.config,
-    font = _ref4$config.font,
-    _ref4$config$translat = _ref4$config.translate,
-    _ref4$config$translat2 = _ref4$config$translat.x,
-    translateX = _ref4$config$translat2 === void 0 ? 0 : _ref4$config$translat2,
-    _ref4$config$translat3 = _ref4$config$translat.y,
-    translateY = _ref4$config$translat3 === void 0 ? 0 : _ref4$config$translat3,
-    _ref4$config$suffix = _ref4$config.suffix,
-    content = _ref4$config$suffix.content,
-    suffixFont = _ref4$config$suffix.font,
-    _ref4$config$suffix$t = _ref4$config$suffix.translate,
-    suffixX = _ref4$config$suffix$t.x,
-    suffixY = _ref4$config$suffix$t.y,
-    _ref4$textAnchor = _ref4.textAnchor,
-    textAnchor = _ref4$textAnchor === void 0 ? "middle" : _ref4$textAnchor,
-    _ref4$dominantBaselin = _ref4.dominantBaseline,
-    dominantBaseline = _ref4$dominantBaselin === void 0 ? "middle" : _ref4$dominantBaselin,
-    reverse = _ref4.reverse;
+var Label = function Label(_ref5) {
+  var x = _ref5.x,
+    y = _ref5.y,
+    value = _ref5.value,
+    _ref5$config = _ref5.config,
+    font = _ref5$config.font,
+    _ref5$config$translat = _ref5$config.translate,
+    _ref5$config$translat2 = _ref5$config$translat.x,
+    translateX = _ref5$config$translat2 === void 0 ? 0 : _ref5$config$translat2,
+    _ref5$config$translat3 = _ref5$config$translat.y,
+    translateY = _ref5$config$translat3 === void 0 ? 0 : _ref5$config$translat3,
+    _ref5$config$suffix = _ref5$config.suffix,
+    content = _ref5$config$suffix.content,
+    suffixFont = _ref5$config$suffix.font,
+    _ref5$config$suffix$t = _ref5$config$suffix.translate,
+    suffixX = _ref5$config$suffix$t.x,
+    suffixY = _ref5$config$suffix$t.y,
+    _ref5$textAnchor = _ref5.textAnchor,
+    textAnchor = _ref5$textAnchor === void 0 ? "middle" : _ref5$textAnchor,
+    _ref5$dominantBaselin = _ref5.dominantBaseline,
+    dominantBaseline = _ref5$dominantBaselin === void 0 ? "middle" : _ref5$dominantBaselin,
+    reverse = _ref5.reverse;
   return /*#__PURE__*/React.createElement("text", {
     x: x,
     y: y,
@@ -196,19 +199,19 @@ var Label = function Label(_ref4) {
     style: _objectSpread({}, (0, _utils.getFontStyle)(suffixFont, "svg"))
   }, content));
 };
-var Icon = function Icon(_ref5) {
-  var cx = _ref5.cx,
-    cy = _ref5.cy,
-    _ref5$config = _ref5.config,
-    mode = _ref5$config.mode,
-    inner = _ref5$config.inner,
-    outer = _ref5$config.outer,
-    color = _ref5$config.color,
-    radius = _ref5$config.radius,
-    image = _ref5$config.image,
-    _ref5$config$size = _ref5$config.size,
-    width = _ref5$config$size.width,
-    height = _ref5$config$size.height;
+var Icon = function Icon(_ref6) {
+  var cx = _ref6.cx,
+    cy = _ref6.cy,
+    _ref6$config = _ref6.config,
+    mode = _ref6$config.mode,
+    inner = _ref6$config.inner,
+    outer = _ref6$config.outer,
+    color = _ref6$config.color,
+    radius = _ref6$config.radius,
+    image = _ref6$config.image,
+    _ref6$config$size = _ref6$config.size,
+    width = _ref6$config$size.width,
+    height = _ref6$config$size.height;
   return mode == "single" ? /*#__PURE__*/React.createElement(Circle, {
     cx: cx,
     cy: cy,
@@ -228,11 +231,11 @@ var Icon = function Icon(_ref5) {
     xlinkHref: window.appConfig.ASSETS_URL + image
   }));
 };
-var Circle = function Circle(_ref6) {
-  var cx = _ref6.cx,
-    cy = _ref6.cy,
-    color = _ref6.color,
-    radius = _ref6.radius;
+var Circle = function Circle(_ref7) {
+  var cx = _ref7.cx,
+    cy = _ref7.cy,
+    color = _ref7.color,
+    radius = _ref7.radius;
   return /*#__PURE__*/React.createElement("circle", {
     cx: cx,
     cy: cy,
@@ -241,15 +244,15 @@ var Circle = function Circle(_ref6) {
     stroke: "none"
   });
 };
-var getVerticalLabel = function getVerticalLabel(_ref7) {
-  var _ref7$position = _ref7.position,
-    position = _ref7$position === void 0 ? "outerStart" : _ref7$position,
-    width = _ref7.width,
-    y = _ref7.y,
-    y1 = _ref7.y1,
-    y2 = _ref7.y2,
-    _ref7$reverse = _ref7.reverse,
-    reverse = _ref7$reverse === void 0 ? true : _ref7$reverse;
+var getVerticalLabel = function getVerticalLabel(_ref8) {
+  var _ref8$position = _ref8.position,
+    position = _ref8$position === void 0 ? "outerStart" : _ref8$position,
+    width = _ref8.width,
+    y = _ref8.y,
+    y1 = _ref8.y1,
+    y2 = _ref8.y2,
+    _ref8$reverse = _ref8.reverse,
+    reverse = _ref8$reverse === void 0 ? true : _ref8$reverse;
   var needReverse = reverse && y < 0;
   switch (position) {
     case "start":
@@ -279,15 +282,15 @@ var getVerticalLabel = function getVerticalLabel(_ref7) {
       };
   }
 };
-var getHorizontalLabel = function getHorizontalLabel(_ref8) {
-  var _ref8$position = _ref8.position,
-    position = _ref8$position === void 0 ? "outerStart" : _ref8$position,
-    height = _ref8.height,
-    y = _ref8.y,
-    y1 = _ref8.y1,
-    y2 = _ref8.y2,
-    _ref8$reverse = _ref8.reverse,
-    reverse = _ref8$reverse === void 0 ? true : _ref8$reverse;
+var getHorizontalLabel = function getHorizontalLabel(_ref9) {
+  var _ref9$position = _ref9.position,
+    position = _ref9$position === void 0 ? "outerStart" : _ref9$position,
+    height = _ref9.height,
+    y = _ref9.y,
+    y1 = _ref9.y1,
+    y2 = _ref9.y2,
+    _ref9$reverse = _ref9.reverse,
+    reverse = _ref9$reverse === void 0 ? true : _ref9$reverse;
   var needReverse = reverse && y < 0;
   switch (position) {
     case "start":

package/lib/hooks/useTooltip.js

@@ -37,7 +37,7 @@ var _default = exports["default"] = function _default(_ref) {
     interval = _ref$config2$interval === void 0 ? 0 : _ref$config2$interval,
     manual = _ref$config2.manual,
     active = _ref.active;
-  var _useState = (0, _react.useState)(null),
+  var _useState = (0, _react.useState)(-1),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     currentIndex = _useState2[0],
     setCurrentIndex = _useState2[1];
@@ -72,7 +72,7 @@ var _default = exports["default"] = function _default(_ref) {
       } else {
         // 鼠标划出后,如果开启了自动轮播，就不需要让提示框消失了
         if (!auto) {
-          setCurrentIndex(null);
+          setCurrentIndex(-1);
         }
       }
     }
@@ -82,8 +82,7 @@ var _default = exports["default"] = function _default(_ref) {
     // if (!!on) setCurrentIndex(0);
     var intervalHandler = on ? setInterval(function () {
       setCurrentIndex(function (index) {
-        var tmp = index == null ? 0 : index;
-        var currentIndex = tmp + 1;
+        var currentIndex = index + 1;
         if (currentIndex >= tickLength) {
           return 0;
         }
@@ -94,7 +93,7 @@ var _default = exports["default"] = function _default(_ref) {
       intervalHandler && clearInterval(intervalHandler);
     };
   }, [auto, tickLength, interval, isHover, active]);
-  var name = currentIndex === null ? null : axisX.allTicks[currentIndex];
+  var name = currentIndex === -1 ? null : axisX.allTicks[currentIndex];
   return {
     name: name,
     x: axisX.scaler(name),

package/lib/utils/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.band = band;
-exports.sortPie = exports.seriesYOrZ = exports.resetStacks = exports.reduceConfig = exports.mathR = exports.isValidHttpUrl = exports.identity = exports.getTranslate3d = exports.getTranslate2d = exports.getTicksOfAxis = exports.getTickCoord = exports.getStacks = exports.getSeriesInfo = exports.getMousePos = exports.getMargin = exports.getIcon = exports.getGridCoord = exports.getFontStyle = exports.getDomPath = exports.getDataWithPercent = exports.getCurrentStack = exports.getColorList = exports.getChildren = exports.getBreakWord = exports.getBandwidth = exports.getBandSeriesStepAndWidth = exports.getBandBackground = exports.formatFont = exports.filterChildren = exports.dateFormat = exports.dataYOrZ = void 0;
+exports.sortPie = exports.seriesYOrZ = exports.resetStacks = exports.reduceConfig = exports.mathR = exports.isValidHttpUrl = exports.identity = exports.getTranslate3d = exports.getTranslate2d = exports.getTicksOfAxis = exports.getTickCoord = exports.getStacks = exports.getSeriesInfo = exports.getMultiColorStr = exports.getMousePos = exports.getMargin = exports.getIcon = exports.getGridCoord = exports.getFontStyle = exports.getDomPath = exports.getDataWithPercent = exports.getCurrentStack = exports.getColorList = exports.getChildren = exports.getBreakWord = exports.getBandwidth = exports.getBandSeriesStepAndWidth = exports.getBandBackground = exports.formatFont = exports.filterChildren = exports.dateFormat = exports.dataYOrZ = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -99,6 +99,22 @@ var getColorList = exports.getColorList = function getColorList(_ref3) {
     };
   });
 };
+var getMultiColorStr = exports.getMultiColorStr = function getMultiColorStr(colors) {
+  var stops = colors.stops,
+    angle = colors.angle;
+  var result = 'linear-gradient(' + angle + 'deg, ';
+  var stops_ = JSON.parse(JSON.stringify(stops));
+  stops_.sort(function (a, b) {
+    return a.offset - b.offset;
+  });
+  for (var i = 0; i < stops_.length; i++) {
+    var _stops_$i = stops_[i],
+      color = _stops_$i.color,
+      offset = _stops_$i.offset;
+    result += "".concat(color, " ").concat(offset, "%,");
+  }
+  return result.slice(0, -1) + ")";
+};
 var getIcon = exports.getIcon = function getIcon(type, icon) {
   var lineType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "solid";
   switch (type) {

package/package.json

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

package/src/components/Band.tsx

@@ -3,7 +3,7 @@
  */
 import React, { memo, Fragment } from "react";
 import { min, max } from "d3v7";
-import { getBandBackground, getSeriesInfo } from "../utils";
+import { getBandBackground, getMultiColorStr, getSeriesInfo } from "../utils";
 
 const getHighlightData = (data: Array<DataWithBoundType>, extent: string) => {
   switch (extent) {
@@ -97,6 +97,7 @@ export default memo(
     curXLabel,
     selectStyle,
     bandLength = 0,
+    auto = false,
     data,
     xAxis: { scaler: normalScaler, step:normalStep, controlStep, direction, controlDragScaler },
     yAxis: { scaler: yScaler, isClipAxis, clipValue, reverse },
@@ -157,7 +158,11 @@ export default memo(
               opacity,
               headDecorate
             } = x==curXLabel?selectConfig:other;
-            const borderStr = `${border.borderColor} solid ${border.borderWidth}px`;
+            const { borderColor:{
+              type="pure", pure="transparent", linear
+            }, borderWidth=0 } = border || {};
+            const borderStr = `${pure} solid ${borderWidth}px`;
+            const borderImageSource = getMultiColorStr(linear);
             const positionX = xScaler(x) - step / 2 + seriesStart + index * seriesStep;
 
             let showHead, headType, headUrl, headVideo, headWidth, headHeight, headTranslate;
@@ -217,7 +222,7 @@ export default memo(
                     }
                   }}
                   onMouseLeave={() => {
-                    if(isControlChart){
+                    if(isControlChart && !auto){
                       setCtlTip((pre:any)=>({
                         show:false,
                         x:undefined,
@@ -296,7 +301,7 @@ export default memo(
                               positive: y > 0,
                               seriesWidth,
                             }),
-                      ...(isVertical
+                      ...type=="pure" && (isVertical
                         ? {
                             borderTop: borderStr,
                             borderRight: borderStr,
@@ -307,6 +312,12 @@ export default memo(
                             borderRight: borderStr,
                             borderLeft: borderStr,
                           }),
+                      ...type=="linear" && {
+                        borderImageSource,
+                        borderImageSlice:1,
+                        borderWidth:isVertical?`${borderWidth}px ${borderWidth}px ${borderWidth}px 0`:`${borderWidth}px ${borderWidth}px 0 ${borderWidth}px`,
+                        borderStyle:"solid"
+                      }
                     }}
                   />
                 </foreignObject>

package/src/components/CartesianChart.js

@@ -78,6 +78,7 @@ const Chart = memo(
       onEmit,
     } = context;
     const defaultSelected = selectStyle?selectStyle.defaultSelected:"";
+    const { zIndex="bottom" } = indicator;
     const xLineRange = chartWidth;
     let yLineRange = chartHeight;
     //获取控制条相关的参数
@@ -131,7 +132,7 @@ const Chart = memo(
       }
       document.addEventListener(`setCurrent_${id}`,handleAction,false);
       return ()=>{
-        document.removeEventListener(`setCurent_${id}`,handleAction);
+        document.removeEventListener(`setCurrent_${id}`,handleAction);
       }
     },[]);
     useEffect(()=>{
@@ -363,8 +364,24 @@ const Chart = memo(
     const { show:showCtl, xName:ctlXName, x:ctlX, indicatorList:ctlIndicatorList } = ctlTip;
     const controlChartTooltipData = ctlXName && originData.filter((d) => d.x === ctlXName);
     const bodyWidth = isVertical?xLineRange + 100 + marginRight + marginLeft:xLineRange,
-    bodyHeight = isVertical?yLineRange:yLineRange + marginTop + marginBottom;
+      bodyHeight = isVertical?yLineRange:yLineRange + marginTop + marginBottom;
+
+    useEffect(()=>{
+      setCtlTip(pre=>{
+        return {
+          show:!!tickName, x:tooltipX, xName:tickName,
+          indicatorList:pre.indicatorList.map((item)=>{
+            if (item.tick === tickName) {
+              return { ...item, isShow:true };
+            } else {
+              return { ...item, isShow:false };
+            }
+          })
+        }
+      })
+    },[tooltipX, tickName]);
     
+
     return (
       <>
         <ChartContainer
@@ -376,7 +393,7 @@ const Chart = memo(
           onMouseEnter={() => {
             setIsHover(true);
           }}
-          onMouseMove={setIndex}
+          onMouseMove={!control?setIndex:null}
           onMouseLeave={(e) => {
             setIsHover(false);
             setIndex(e);
@@ -426,8 +443,9 @@ const Chart = memo(
               />
             );
           })}
-          {showTooltip && !control && (
-            <Indicator {...indicator} manual= {manual} {...indicatorAttr} />
+          {/* 非控制图下的指示器 */}
+          {showTooltip && !control && zIndex=="bottom" && (
+            <Indicator {...indicator} manual= {manual} auto={auto} {...indicatorAttr} />
           )}
           <foreignObject
             style={
@@ -452,7 +470,7 @@ const Chart = memo(
             >
               {/* 控制图指示器部分 */}
               <g>
-                {control &&
+                {control && zIndex=="bottom" &&
                   ctlIndicatorList.map((item, index) => {
                     const x = axisX.scaler(item.tick);
                     return (
@@ -487,6 +505,7 @@ const Chart = memo(
                       selectStyle={selectStyle}
                       xAxis={axisX}
                       yAxis={yAxis}
+                      auto={auto}
                       // 控制图部分，主要是为了，当鼠标悬浮在指示器上时，显示对应的tooltip
                       isControlChart={!!control}
                       indicatorWidth={indicatorWidth}
@@ -496,7 +515,7 @@ const Chart = memo(
                   )
                 );
               })}
-
+              {/* 图表数值标签 */}
               {series.map(({ Component, yOrZ, ...config }, index) => {
                 const yAxis = axes.get(yOrZ);
                 return (
@@ -514,7 +533,45 @@ const Chart = memo(
                   )
                 );
               })}
+              <g>
+                {control && zIndex!="bottom" &&
+                  ctlIndicatorList.map((item, index) => {
+                    const x = axisX.scaler(item.tick);
+                    return (
+                      <Indicator
+                        key={index}
+                        {...indicator}
+                        {...{
+                          height: yLineRange,
+                          width: indicatorWidth,
+                          x: x - indicatorWidth / 2,
+                        }}
+                        isControlChart={!!control}
+                        xName={item.tick}
+                        setCtlTip={setCtlTip}
+                        ctlIndicatorList={ctlIndicatorList}
+                        manual= {manual}
+                      />
+                    );
+                  })}
+              </g>
             </svg>
+            {/* 控制图下的提示框 */}
+            {showCtl && !!control && (
+              <Tooltip
+                isVertical={isVertical}
+                {...tooltip}
+                data={controlChartTooltipData}
+                x={ ctlX - marginLeft -(axisX.controlEnd + axisX.start/cPercent - chartWidth) * curControlPercent.current}
+                marginLeft={marginLeft}
+                marginTop={marginTop}
+                tickName={ctlXName}
+                series={series}
+                width={width}
+                height={height}
+                manual= {manual}
+              />
+            )}
           </foreignObject>
           {baseLineData &&
             baseLineData.length > 0 &&
@@ -539,6 +596,10 @@ const Chart = memo(
                 )
               );
             })}
+          {/* 非控制图下的指示器 */}
+          {showTooltip && !control && zIndex!="bottom" && (
+            <Indicator {...indicator} manual= {manual} auto={auto} {...indicatorAttr} />
+          )}
         </ChartContainer>
         {/* 控制条逻辑 */}
         {control && (
@@ -560,6 +621,7 @@ const Chart = memo(
           ></Control>
         )}
         <Legend {...legend} filterData={filterData} series={series} />
+        {/* 非控制图下的提示框 */}
         {showTooltip && !control && (
           <Tooltip
             isVertical={isVertical}
@@ -575,21 +637,6 @@ const Chart = memo(
             manual= {manual}
           />
         )}
-        {showCtl && !!control && (
-          <Tooltip
-            isVertical={isVertical}
-            {...tooltip}
-            data={controlChartTooltipData}
-            x={ ctlX -(axisX.controlEnd + axisX.start/cPercent - chartWidth) * curControlPercent.current}
-            marginLeft={marginLeft}
-            marginTop={marginTop}
-            tickName={ctlXName}
-            series={series}
-            width={width}
-            height={height}
-            manual= {manual}
-          />
-        )}
         {brush && <Brush config={brush} width={width} />}
       </>
     );

package/src/components/Control.jsx

@@ -224,6 +224,7 @@ export default memo(forwardRef((props, ref) => {
                 bandLength={bandLength}
                 xAxis={xAxis}
                 yAxis={cloneYAxis}
+                triggerClick={()=>{}}
               />
             )
           );

package/src/components/Indicator.js

@@ -12,7 +12,8 @@ export default ({
   xName = null,
   ctlIndicatorList,
   setCtlTip,
-  manual
+  manual,
+  auto
 }) => {
   let isShow = true;
   if (isControlChart && ctlIndicatorList) {
@@ -40,7 +41,7 @@ export default ({
         }
       }}
       onMouseLeave={() => {
-        if (isControlChart) {
+        if (isControlChart && !auto) {
           setCtlTip((pre)=>({
             show:false,
             x:undefined,

package/src/components/Label.js

@@ -57,7 +57,7 @@ export default memo(
             const { icon, label } = x==curXLabel?selectConfig:other;
             const showIcon = icon && icon.show;
             const showLabel = label && label.show;
-            const { position:_position, reverse } = label;
+            const { position:_position="outerStart", reverse=true } = label || {};
             if (isClipAxis) {
               if (end > +clipValue) {
                 y1 = yScaler[1](start);

package/src/hooks/useTooltip.ts

@@ -37,7 +37,7 @@ export default ({
   config: { auto, interval = 0, manual } = {},
   active
 }: Props) => {
-  const [currentIndex, setCurrentIndex] = useState<number | null>(null);
+  const [currentIndex, setCurrentIndex] = useState<number>(-1);
   const tickLength = axisX.allTicks.length;
   const setIndex = useCallback(
     (e: any) => {
@@ -68,7 +68,7 @@ export default ({
         } else {
           // 鼠标划出后,如果开启了自动轮播，就不需要让提示框消失了
           if (!auto) {
-            setCurrentIndex(null);
+            setCurrentIndex(-1);
           }
         }
       }
@@ -81,8 +81,7 @@ export default ({
     const intervalHandler = on
       ? setInterval(() => {
           setCurrentIndex((index) => {
-            const tmp = index == null ? 0 : index;
-            const currentIndex = tmp + 1;
+            const currentIndex = index + 1;
             if (currentIndex >= tickLength) {
               return 0;
             }
@@ -94,7 +93,7 @@ export default ({
       intervalHandler && clearInterval(intervalHandler);
     };
   }, [auto, tickLength, interval, isHover, active]);
-  const name = currentIndex === null ? null : axisX.allTicks[currentIndex];
+  const name = currentIndex === -1 ? null : axisX.allTicks[currentIndex];
 
   return {
     name,

package/src/utils/index.js

@@ -76,6 +76,17 @@ const getColorList = ({ type, pure, linear: { stops, angle, opacity } }) => {
   }
   return stops.map(({ color, offset }) => ({ color, offset: offset / 100 }));
 };
+const getMultiColorStr = (colors)=>{
+  const { stops, angle } = colors;
+  let result = 'linear-gradient(' + angle + 'deg, ';
+  const stops_ = JSON.parse(JSON.stringify(stops));
+  stops_.sort((a,b)=>a.offset-b.offset);
+  for(let i=0;i<stops_.length;i++){
+    const { color, offset } = stops_[i];
+    result += `${color} ${offset}%,`;
+  }
+  return result.slice(0,-1)+")";
+}
 const getIcon = (type, icon, lineType="solid") => {
   switch (type) {
     case 'area':
@@ -780,6 +791,7 @@ export {
   band,
   getIcon,
   getColorList,
+  getMultiColorStr,
   getStacks,
   dataYOrZ,
   seriesYOrZ,