@easyv/charts 1.4.22 → 1.4.24

package/lib/components/Carousel.js

@@ -1,37 +1,23 @@
 "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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _d3v = require("d3v7");
-
 var _excluded = ["animation"],
-    _excluded2 = ["config", "data"];
-
+  _excluded2 = ["config", "data"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var initialState = {
   currentIndex: null,
   trigger: ''
@@ -52,29 +38,24 @@ var defaultAnimation = {
 /**
  * 饼图类图表轮播逻辑，用来管理currentIndex，及回调逻辑（HOC）
  */
-
 var _default = function _default(Component) {
   return /*#__PURE__*/(0, _react.memo)(function (_ref) {
     var _ref$config = _ref.config,
-        animation = _ref$config.animation,
-        config = (0, _objectWithoutProperties2["default"])(_ref$config, _excluded),
-        _ref$data = _ref.data,
-        data = _ref$data === void 0 ? [] : _ref$data,
-        rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
+      animation = _ref$config.animation,
+      config = (0, _objectWithoutProperties2["default"])(_ref$config, _excluded),
+      _ref$data = _ref.data,
+      data = _ref$data === void 0 ? [] : _ref$data,
+      rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
     var dataLength = data.length;
-
     var _animation = Object.assign({}, defaultAnimation, animation);
-
     var on = _animation.on,
-        interval = _animation.interval,
-        interactive = _animation.interactive,
-        hoverStop = _animation.hoverStop;
-
+      interval = _animation.interval,
+      interactive = _animation.interactive,
+      hoverStop = _animation.hoverStop;
     var _useState = (0, _react.useState)(on ? carouselState : initialState),
-        _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-        state = _useState2[0],
-        setState = _useState2[1];
-
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
     var timer = (0, _react.useRef)(null);
     var hoverState = (0, _react.useRef)(false);
     var animationOn = on && interval && dataLength;
@@ -110,8 +91,7 @@ var _default = function _default(Component) {
     }, [carousel]);
     var onEvent = (0, _react.useCallback)(function (_ref3) {
       var currentIndex = _ref3.currentIndex,
-          type = _ref3.type;
-
+        type = _ref3.type;
       switch (interactive) {
         case true:
         case 'click':
@@ -123,9 +103,7 @@ var _default = function _default(Component) {
               currentIndex: currentIndex
             });
           }
-
           break;
-
         case 'hover':
           if (type == 'onMouseEnter') {
             setState({
@@ -136,13 +114,10 @@ var _default = function _default(Component) {
           } else if (type == 'onMouseLeave') {
             !hoverState.current && animationOn && carousel();
           }
-
           break;
-
         case false:
         case '':
           break;
-
         case 'carousel':
         default:
           setState({
@@ -159,7 +134,6 @@ var _default = function _default(Component) {
           timer.current && timer.current.stop();
         } else {
           hoverState.current = false;
-
           if (animationOn) {
             timer.current = (0, _d3v.interval)(function () {
               setState(function (_ref4) {
@@ -186,5 +160,4 @@ var _default = function _default(Component) {
     }));
   });
 };
-
 exports["default"] = _default;

package/lib/components/CartesianChart.js

@@ -1,98 +1,91 @@
 "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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _hooks = require("../hooks");
-
 var _context = require("../context");
-
 var _ = require(".");
-
+var _utils = require("../utils");
 var _excluded = ["Component", "yOrZ"],
-    _excluded2 = ["Component", "yOrZ"];
-
+  _excluded2 = ["Component", "yOrZ"];
+/**
+ * 轴类图表
+ */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var _ref$config = _ref.config,
-      axesConfig = _ref$config.axes,
-      background = _ref$config.background,
-      _ref$config$chart = _ref$config.chart,
-      _ref$config$chart$dim = _ref$config$chart.dimension.chartDimension,
-      height = _ref$config$chart$dim.height,
-      width = _ref$config$chart$dim.width,
-      _ref$config$chart$mar = _ref$config$chart.margin,
-      marginLeft = _ref$config$chart$mar.marginLeft,
-      marginTop = _ref$config$chart$mar.marginTop,
-      marginRight = _ref$config$chart$mar.marginRight,
-      marginBottom = _ref$config$chart$mar.marginBottom,
-      animation = _ref$config$chart.animation,
-      legend = _ref$config$chart.legend,
-      series = _ref$config.series,
-      bandLength = _ref$config.bandLength,
-      tooltip = _ref$config.tooltip,
-      _ref$config$baseLine = _ref$config.baseLine,
-      _ref$config$baseLine$ = _ref$config$baseLine.orientation,
-      baseLineOri = _ref$config$baseLine$ === void 0 ? '' : _ref$config$baseLine$,
-      _ref$config$baseLine$2 = _ref$config$baseLine.config,
-      baseLineConfig = _ref$config$baseLine$2 === void 0 ? {} : _ref$config$baseLine$2,
-      _ref$config$baseLine$3 = _ref$config$baseLine.data,
-      baseLineData = _ref$config$baseLine$3 === void 0 ? [] : _ref$config$baseLine$3,
-      _ref$config$tooltip = _ref$config.tooltip;
-  _ref$config$tooltip = _ref$config$tooltip === void 0 ? {} : _ref$config$tooltip;
-  var _ref$config$tooltip$c = _ref$config$tooltip.config,
-      tooltipConfig = _ref$config$tooltip$c === void 0 ? {} : _ref$config$tooltip$c,
-      _ref$config$tooltip$c2 = _ref$config$tooltip.config;
-  _ref$config$tooltip$c2 = _ref$config$tooltip$c2 === void 0 ? {} : _ref$config$tooltip$c2;
-  var auto = _ref$config$tooltip$c2.auto,
-      manual = _ref$config$tooltip$c2.manual,
-      _ref$config$tooltip$c3 = _ref$config$tooltip$c2.indicator,
-      indicator = _ref$config$tooltip$c3 === void 0 ? {} : _ref$config$tooltip$c3,
-      brush = _ref$config.brush,
-      style = _ref.style,
-      originData = _ref.originData,
-      filterData = _ref.filterData,
-      aiFormatter = _ref.aiFormatter,
-      id = _ref.id;
+    axesConfig = _ref$config.axes,
+    background = _ref$config.background,
+    _ref$config$chart = _ref$config.chart,
+    _ref$config$chart$dim = _ref$config$chart.dimension.chartDimension,
+    height = _ref$config$chart$dim.height,
+    width = _ref$config$chart$dim.width,
+    _ref$config$chart$mar = _ref$config$chart.margin,
+    marginLeft = _ref$config$chart$mar.marginLeft,
+    marginTop = _ref$config$chart$mar.marginTop,
+    marginRight = _ref$config$chart$mar.marginRight,
+    marginBottom = _ref$config$chart$mar.marginBottom,
+    animation = _ref$config$chart.animation,
+    legend = _ref$config$chart.legend,
+    series = _ref$config.series,
+    bandLength = _ref$config.bandLength,
+    tooltip = _ref$config.tooltip,
+    _ref$config$baseLine = _ref$config.baseLine,
+    _ref$config$baseLine$ = _ref$config$baseLine.orientation,
+    baseLineOri = _ref$config$baseLine$ === void 0 ? "" : _ref$config$baseLine$,
+    _ref$config$baseLine$2 = _ref$config$baseLine.config,
+    baseLineConfig = _ref$config$baseLine$2 === void 0 ? {} : _ref$config$baseLine$2,
+    _ref$config$baseLine$3 = _ref$config$baseLine.data,
+    baseLineData = _ref$config$baseLine$3 === void 0 ? [] : _ref$config$baseLine$3,
+    _ref$config$tooltip = _ref$config.tooltip,
+    _ref$config$tooltip2 = _ref$config$tooltip === void 0 ? {} : _ref$config$tooltip,
+    _ref$config$tooltip2$ = _ref$config$tooltip2.config,
+    tooltipConfig = _ref$config$tooltip2$ === void 0 ? {} : _ref$config$tooltip2$,
+    _ref$config$tooltip2$2 = _ref$config$tooltip2.config,
+    _ref$config$tooltip2$3 = _ref$config$tooltip2$2 === void 0 ? {} : _ref$config$tooltip2$2,
+    auto = _ref$config$tooltip2$3.auto,
+    manual = _ref$config$tooltip2$3.manual,
+    _ref$config$tooltip2$4 = _ref$config$tooltip2$3.indicator,
+    indicator = _ref$config$tooltip2$4 === void 0 ? {} : _ref$config$tooltip2$4,
+    brush = _ref$config.brush,
+    _ref$config$isControl = _ref$config.isControlChart,
+    isControlChart = _ref$config$isControl === void 0 ? false : _ref$config$isControl,
+    _ref$config$control = _ref$config.control,
+    control = _ref$config$control === void 0 ? null : _ref$config$control,
+    style = _ref.style,
+    originData = _ref.originData,
+    filterData = _ref.filterData,
+    aiFormatter = _ref.aiFormatter,
+    id = _ref.id;
   var context = (0, _react.useContext)(_context.chartContext);
-
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isHover = _useState2[0],
-      setIsHover = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isHover = _useState2[0],
+    setIsHover = _useState2[1];
   var _useContext = (0, _react.useContext)(_context.chartContext),
-      chartWidth = _useContext.width,
-      chartHeight = _useContext.height,
-      triggerOnRelative = _useContext.triggerOnRelative,
-      onEmit = _useContext.onEmit;
-
+    chartWidth = _useContext.width,
+    chartHeight = _useContext.height,
+    triggerOnRelative = _useContext.triggerOnRelative,
+    onEmit = _useContext.onEmit;
   var svg = (0, _react.useRef)();
   var axes = (0, _hooks.useAxes)({
     axes: axesConfig,
-    context: context
+    context: context,
+    isControlChart: isControlChart,
+    control: control
   });
   var aiData = aiFormatter ? aiFormatter(originData, axes, series) : (0, _hooks.useAiData)(originData, axes, series);
-  var axisX = (0, _hooks.useCarouselAxisX)(axes.get('x'), animation, isHover);
+  var axisX = (0, _hooks.useCarouselAxisX)(axes.get("x"), animation, isHover, isControlChart, control);
   var xLineRange = width - marginLeft - marginRight;
   var yLineRange = height - marginTop - marginBottom;
   (0, _react.useEffect)(function () {
@@ -100,40 +93,36 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       if (!window.aiData) {
         window.aiData = {};
       }
-
       window.aiData[id] = {
         getAI: function getAI() {
           return aiData;
         }
       };
     }
-
     return function () {
       window.aiData && window.aiData[id] && delete window.aiData[id];
     };
   }, [JSON.stringify(aiData), id]);
-
   var _useTooltip = (0, _hooks.useTooltip)({
-    svg: svg,
-    marginLeft: marginLeft,
-    marginTop: marginTop,
-    width: chartWidth,
-    height: chartHeight,
-    axisX: axisX,
-    isHover: isHover,
-    config: tooltipConfig
-  }),
-      tooltipX = _useTooltip.x,
-      tickName = _useTooltip.name,
-      setIndex = _useTooltip.setIndex;
-
+      svg: svg,
+      marginLeft: marginLeft,
+      marginTop: marginTop,
+      width: chartWidth,
+      height: chartHeight,
+      axisX: axisX,
+      isHover: isHover,
+      config: tooltipConfig
+    }),
+    tooltipX = _useTooltip.x,
+    tickName = _useTooltip.name,
+    setIndex = _useTooltip.setIndex;
   var tooltipData = (0, _react.useMemo)(function () {
     return tickName !== undefined && originData.filter(function (d) {
       return d.x === tickName;
     });
   }, [tickName, originData]);
   var showTooltip = !!(tooltipData && tooltipData.length && (auto || manual));
-  var isVertical = axisX.direction === 'vertical';
+  var isVertical = axisX.direction === "vertical";
   var indicatorWidth = indicator.width * axisX.step / 100;
   var position = axisX.scaler(tickName) - indicatorWidth / 2;
   var indicatorAttr = isVertical ? {
@@ -148,12 +137,154 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var onInteraction = (0, _react.useCallback)(function (e) {
     e.stopPropagation();
     var data = e.currentTarget.dataset.data;
-
     var _data = JSON.parse(data);
-
     triggerOnRelative(_data);
-    onEmit('click', _data);
+    onEmit("click", _data);
   }, [triggerOnRelative, onEmit]);
+
+  /**
+   * 控制图相关
+   */
+  var controlEl = (0, _react.useRef)();
+  var seriesEl = (0, _react.useRef)(null);
+  var axisElList = (0, _react.useRef)([]);
+  var curControlPercent = (0, _react.useRef)(0);
+  (0, _react.useEffect)(function () {
+    if (controlEl.current && isControlChart) {
+      var isDragging = false;
+      var movementX = 0;
+      var rawTranslateX = 0;
+      var percent = 0;
+      var controlWidth = xLineRange * control.drag.width / 100;
+      var range = function range(num) {
+        var _num = num;
+        var min = 0;
+        var max = xLineRange - controlWidth;
+        _num = Math.max(_num, min);
+        _num = Math.min(_num, max);
+        return _num;
+      };
+      var setControlTranslate = function setControlTranslate(x) {
+        var moveLen = range(x);
+        controlEl.current.style.transform = "translateX(".concat(moveLen, "px)");
+        //计算出当前位移的百分比
+        percent = moveLen / (xLineRange - controlWidth);
+        curControlPercent.current = percent;
+        seriesEl.current.style.transform = "translate(".concat(-(axisX.controlEnd - axisX.end) * percent, "px,").concat(marginTop, "px)");
+        axisElList.current[2].style.transform = "translate(".concat(-(axisX.controlEnd - axisX.end) * percent, "px,", 0, "px)");
+      };
+      var mouseDownHandle = function mouseDownHandle(e) {
+        var mouseMoveHandle = function mouseMoveHandle(e) {
+          //当前位移的距离
+          if (isDragging) {
+            movementX += e.movementX;
+            setControlTranslate(movementX + rawTranslateX);
+          }
+        };
+        var mouseUpHandle = function mouseUpHandle(e) {
+          rawTranslateX = range(movementX + rawTranslateX);
+          movementX = 0;
+          isDragging = false;
+          document.removeEventListener("mousemove", mouseMoveHandle);
+          document.removeEventListener("mouseup", mouseUpHandle);
+        };
+        document.addEventListener("mousemove", mouseMoveHandle);
+        document.addEventListener("mouseup", mouseUpHandle);
+        isDragging = true;
+      };
+      var animationHoverStop;
+      var setAnimationHoverStopTrue = function setAnimationHoverStopTrue() {
+        animationHoverStop = true;
+      };
+      var setAnimationHoverStopFalse = function setAnimationHoverStopFalse() {
+        animationHoverStop = false;
+      };
+      svg.current.addEventListener("mouseenter", setAnimationHoverStopTrue);
+      svg.current.addEventListener("mouseleave", setAnimationHoverStopFalse);
+
+      //控制图轮播动画逻辑
+      var show = animation.show,
+        duration = animation.duration,
+        interval = animation.interval,
+        hover = animation.hover;
+      var times = Math.floor(xLineRange / controlWidth);
+      var animatePos = [];
+      for (var i = 0; i <= times; i++) {
+        if (i * controlWidth <= xLineRange) {
+          animatePos.push(i * controlWidth);
+        } else {
+          animatePos.push(xLineRange - controlWidth);
+        }
+      }
+      var index = 0;
+      var animationId;
+      if (animation.show) {
+        var initTime, timeGap;
+        var _animation = function _animation(timestamp) {
+          if (!initTime) {
+            initTime = timestamp;
+          }
+          if (animationHoverStop && hover) {
+            initTime = timestamp - timeGap;
+          }
+          timeGap = timestamp - initTime;
+          if (timeGap < (interval + duration) * 1000) {
+            if (timeGap < duration * 1000) {
+              var p = timeGap / (duration * 1000);
+              var nextIndex = index + 1;
+              var v;
+              if (nextIndex < animatePos.length) {
+                v = p * (animatePos[nextIndex] - animatePos[index]) + animatePos[index];
+              } else {
+                nextIndex = 0;
+                v = (1 - p) * animatePos[index];
+              }
+              setControlTranslate(v);
+            }
+            animationId = window.requestAnimationFrame(_animation);
+          } else {
+            index = index < times ? index + 1 : 0;
+            initTime = 0;
+            animationId = window.requestAnimationFrame(_animation);
+          }
+        };
+        animationId = window.requestAnimationFrame(_animation);
+      }
+      controlEl.current.addEventListener("mousedown", mouseDownHandle);
+      return function () {
+        controlEl.current.removeEventListener("mousedown", mouseDownHandle);
+        svg.current.removeEventListener("mouseenter", setAnimationHoverStopTrue);
+        svg.current.removeEventListener("mouseleave", setAnimationHoverStopFalse);
+        window.cancelAnimationFrame(animationId);
+      };
+    }
+  }, [JSON.stringify(animation), control]);
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    controlChartTooltipShow = _useState4[0],
+    setControlChartTooltipShow = _useState4[1];
+  var _useState5 = (0, _react.useState)(undefined),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    controlChartTooltipXName = _useState6[0],
+    setControlChartTooltipXName = _useState6[1];
+  var _useState7 = (0, _react.useState)(undefined),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    controlChartTooltipX = _useState8[0],
+    setControlChartTooltipX = _useState8[1];
+  var controlChartTooltipData = (0, _react.useMemo)(function () {
+    return controlChartTooltipXName !== undefined && originData.filter(function (d) {
+      return d.x === controlChartTooltipXName;
+    });
+  }, [controlChartTooltipXName, originData]);
+  var _useState9 = (0, _react.useState)(axisX.ticks.map(function (tick) {
+      return {
+        tick: tick,
+        isShow: false
+      };
+    })),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    controlChartIndicatorList = _useState10[0],
+    setControlChartIndicatorList = _useState10[1];
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.ChartContainer, {
     style: style,
     width: width,
@@ -163,7 +294,6 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     onMouseEnter: function onMouseEnter() {
       setIsHover(true);
     },
-    onMouseMove: setIndex,
     onMouseLeave: function onMouseLeave(e) {
       setIsHover(false);
       setIndex(e);
@@ -182,7 +312,33 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     axis: axisX,
     config: background,
     bandLength: bandLength
-  }))), showTooltip && /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({}, indicator, indicatorAttr)), /*#__PURE__*/_react["default"].createElement("foreignObject", {
+  }))), (0, _toConsumableArray2["default"])(axes.values()).reverse().map(function (item, index) {
+    var config = item.axisType == "x" ? axisX : item;
+    return /*#__PURE__*/_react["default"].createElement(_.Axis, (0, _extends2["default"])({
+      ref: function ref(d) {
+        axisElList.current[index] = d;
+      },
+      triggerClick: onInteraction,
+      xLineRange: xLineRange,
+      yLineRange: yLineRange,
+      isControlChart: isControlChart,
+      controlConfig: control
+    }, config, {
+      key: index
+    }));
+  }), isControlChart && control && /*#__PURE__*/_react["default"].createElement(_.Control, {
+    ref: controlEl,
+    props: {
+      control: control,
+      axes: axes,
+      series: series,
+      xLineRange: xLineRange,
+      yLineRange: yLineRange,
+      marginTop: marginTop,
+      axisX: axisX,
+      bandLength: bandLength
+    }
+  }), showTooltip && !isControlChart && /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({}, indicator, indicatorAttr)), /*#__PURE__*/_react["default"].createElement("foreignObject", {
     style: isVertical ? {
       width: xLineRange + marginRight + marginLeft,
       height: yLineRange,
@@ -190,34 +346,57 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     } : {
       width: xLineRange,
       height: yLineRange + marginTop + marginBottom,
-      transform: "translateY(".concat(-marginTop, "px)") // overflow:'visible'
-      // paddingTop:marginTop
-
+      transform: "translateY(".concat(-marginTop, "px)")
     }
   }, /*#__PURE__*/_react["default"].createElement("svg", {
     width: "100%",
     height: "100%",
+    ref: seriesEl,
     style: {
       overflow: "visible",
       transform: isVertical ? "translateX(".concat(marginRight, "px)") : "translateY(".concat(marginTop, "px)")
     }
-  }, series.map(function (_ref2, index) {
+  }, /*#__PURE__*/_react["default"].createElement("g", null, isControlChart && controlChartIndicatorList.map(function (item, index) {
+    var x = axisX.scaler(item.tick);
+    return /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({
+      key: index
+    }, indicator, {
+      height: chartHeight,
+      width: indicatorWidth,
+      x: x - indicatorWidth / 2,
+      isControlChart: isControlChart,
+      xName: item.tick,
+      setControlChartTooltipXName: setControlChartTooltipXName,
+      setControlChartTooltipX: setControlChartTooltipX,
+      setControlChartTooltipShow: setControlChartTooltipShow,
+      controlChartIndicatorList: controlChartIndicatorList,
+      setControlChartIndicatorList: setControlChartIndicatorList
+    }));
+  })), series.map(function (_ref2, index) {
     var Component = _ref2.Component,
-        yOrZ = _ref2.yOrZ,
-        config = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+      yOrZ = _ref2.yOrZ,
+      config = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
     var yAxis = axes.get(yOrZ);
     return yAxis && Component && /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
       key: index
     }, config, {
       bandLength: bandLength,
       xAxis: axisX,
-      yAxis: yAxis,
-      triggerClick: onInteraction
+      yAxis: yAxis
+      // 控制图部分，主要是为了，当鼠标悬浮在指示器上时，显示对应的tooltip
+      ,
+      isControlChart: isControlChart,
+      setControlChartTooltipXName: setControlChartTooltipXName,
+      setControlChartTooltipX: setControlChartTooltipX,
+      setControlChartTooltipShow: setControlChartTooltipShow,
+      indicatorWidth: indicatorWidth,
+      triggerClick: onInteraction,
+      setControlChartIndicatorList: setControlChartIndicatorList
     }));
   }), series.map(function (_ref3, index) {
     var Component = _ref3.Component,
-        yOrZ = _ref3.yOrZ,
-        config = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
+      yOrZ = _ref3.yOrZ,
+      config = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
     var yAxis = axes.get(yOrZ);
     return yAxis && /*#__PURE__*/_react["default"].createElement(_.Label, (0, _extends2["default"])({
       key: index
@@ -227,16 +406,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       yAxis: yAxis,
       triggerClick: onInteraction
     }));
-  }))), (0, _toConsumableArray2["default"])(axes.values()).reverse().map(function (item, index) {
-    var config = item.axisType == 'x' ? axisX : item;
-    return /*#__PURE__*/_react["default"].createElement(_.Axis, (0, _extends2["default"])({
-      triggerClick: onInteraction,
-      xLineRange: xLineRange,
-      yLineRange: yLineRange
-    }, config, {
-      key: index
-    }));
-  }), baseLineData && baseLineData.length > 0 && baseLineData.map(function (item, index) {
+  }))), baseLineData && baseLineData.length > 0 && baseLineData.map(function (item, index) {
     var yOrZ = baseLineConfig[index].line.yOrZ;
     var yAxis = axes.get(yOrZ);
     return yAxis && /*#__PURE__*/_react["default"].createElement(_.BaseLine, {
@@ -253,7 +423,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   })), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
     filterData: filterData,
     series: series
-  })), showTooltip && /*#__PURE__*/_react["default"].createElement(_.Tooltip, (0, _extends2["default"])({
+  })), showTooltip && !isControlChart && /*#__PURE__*/_react["default"].createElement(_.Tooltip, (0, _extends2["default"])({
     isVertical: isVertical
   }, tooltip, {
     data: tooltipData,
@@ -264,12 +434,21 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     series: series,
     width: width,
     height: height
+  })), controlChartTooltipShow && isControlChart && /*#__PURE__*/_react["default"].createElement(_.Tooltip, (0, _extends2["default"])({
+    isVertical: isVertical
+  }, tooltip, {
+    data: controlChartTooltipData,
+    x: controlChartTooltipX - (axisX.controlEnd - axisX.end) * curControlPercent.current,
+    marginLeft: marginLeft,
+    marginTop: marginTop,
+    tickName: controlChartTooltipXName,
+    series: series,
+    width: width,
+    height: height
   })), brush && /*#__PURE__*/_react["default"].createElement(_.Brush, {
     config: brush,
     width: width
   }));
 });
-
 var _default = (0, _.Mapping)((0, _.FilterData)((0, _.ExtentData)((0, _.AnimateData)((0, _.StackData)(Chart)))));
-
 exports["default"] = _default;