@easyv/charts 1.4.39 → 1.4.40

package/lib/components/Axis.js

@@ -54,14 +54,14 @@ var defaultFormatter = function defaultFormatter(d, _ref) {
   return d + suffix;
 };
 
-var getAxesPath = function getAxesPath(orientation, _ref2, cHeight) {
+var getAxesPath = function getAxesPath(orientation, _ref2, cHeight, cPercent) {
   var width = _ref2.width,
       height = _ref2.height;
 
   switch (orientation) {
     case "top":
     case "bottom":
-      return "M-0.5, 0H" + width;
+      return "M-0.5, 0H" + width / cPercent;
 
     case "left":
     case "right":
@@ -123,7 +123,9 @@ var AxisLine = function AxisLine(_ref3) {
       _ref3$isClipAxis = _ref3.isClipAxis,
       isClipAxis = _ref3$isClipAxis === void 0 ? false : _ref3$isClipAxis,
       _ref3$clipAxisRange = _ref3.clipAxisRange,
-      clipAxisRange = _ref3$clipAxisRange === void 0 ? [] : _ref3$clipAxisRange;
+      clipAxisRange = _ref3$clipAxisRange === void 0 ? [] : _ref3$clipAxisRange,
+      _ref3$cPercent = _ref3.cPercent,
+      cPercent = _ref3$cPercent === void 0 ? 1 : _ref3$cPercent;
   if (!show) return null;
   var context = (0, _react.useContext)(_context.chartContext);
 
@@ -138,7 +140,7 @@ var AxisLine = function AxisLine(_ref3) {
     }));
   } else {
     return /*#__PURE__*/_react["default"].createElement("path", {
-      d: getAxesPath(orientation, context, cHeight),
+      d: getAxesPath(orientation, context, cHeight, cPercent),
       stroke: color,
       strokeWidth: lineWidth
     });
@@ -278,7 +280,8 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
       height = _useContext.height;
 
   var cHeight = controlInfo.cHeight,
-      isC = controlInfo.isC;
+      isC = controlInfo.isC,
+      cPercent = controlInfo.cPercent;
   var x = orientation == "right" ? width : 0;
   var y = orientation == "bottom" ? height - cHeight : 0;
 
@@ -297,7 +300,7 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
         });
         var x1 = gridCoord.x1;
         var y1 = gridCoord.y1;
-        return !(orientation == "bottom" && (x1 < 0 || x1 > xLineRange) || y1 < 0 || y1 > yLineRange) && /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
+        return !(orientation == "bottom" && !isC && (x1 < 0 || x1 > xLineRange) || y1 < 0 || y1 > yLineRange) && /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
           className: "__easyv-tickLine",
           key: index,
           config: tickLine
@@ -313,6 +316,8 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, ticks.map(function (ticks, index) {
         return draw(ticks, scaler[index]);
       }));
+    } else if (isC && orientation == "bottom") {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, draw(rawTicks, scaler));
     } else {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, draw(ticks, scaler));
     }
@@ -363,7 +368,7 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     }
   }
 
-  return /*#__PURE__*/_react["default"].createElement("g", null, axisLine && tickLine && /*#__PURE__*/_react["default"].createElement("g", null, axisLine && (positions && positions.length ? positions.map(function (_ref7, index) {
+  return /*#__PURE__*/_react["default"].createElement("g", null, axisLine && tickLine && !isC && /*#__PURE__*/_react["default"].createElement("g", null, axisLine && (positions && positions.length ? positions.map(function (_ref7, index) {
     var x = _ref7.x,
         y = _ref7.y;
     return /*#__PURE__*/_react["default"].createElement("g", {
@@ -406,7 +411,8 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
       cHeight: cHeight
     }),
     isClipAxis: isClipAxis,
-    clipAxisRange: clipAxisRange
+    clipAxisRange: clipAxisRange,
+    cPercent: cPercent
   }), tickLine && drawAxisTickLine()))), /*#__PURE__*/_react["default"].createElement("svg", {
     width: width,
     style: {
@@ -416,7 +422,15 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     transform: "translate(" + x + ", " + y + ")"
   }, /*#__PURE__*/_react["default"].createElement("g", {
     ref: ref
-  }, label && gridLine && drawLabel(), unit && /*#__PURE__*/_react["default"].createElement(Unit, {
+  }, label && gridLine && drawLabel(), isC && /*#__PURE__*/_react["default"].createElement(AxisLine, {
+    orientation: orientation,
+    config: _objectSpread(_objectSpread({}, axisLine), {}, {
+      cHeight: cHeight
+    }),
+    isClipAxis: isClipAxis,
+    clipAxisRange: clipAxisRange,
+    cPercent: cPercent
+  }), isC && tickLine && drawAxisTickLine(), unit && /*#__PURE__*/_react["default"].createElement(Unit, {
     config: unit
   })))));
 }));

package/lib/components/CartesianChart.js

@@ -70,6 +70,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,
+      active = _ref.active,
       style = _ref.style,
       originData = _ref.originData,
       filterData = _ref.filterData,
@@ -140,7 +141,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     controlInfo: controlInfo
   });
   var aiData = aiFormatter ? aiFormatter(originData, axes, series) : (0, _hooks.useAiData)(originData, axes, series);
-  var axisX = (0, _hooks.useCarouselAxisX)(axes.get("x"), animation, isHover, controlInfo);
+  var axisX = (0, _hooks.useCarouselAxisX)(axes.get("x"), animation, isHover, controlInfo, active);
   (0, _react.useEffect)(function () {
     if (aiData.length) {
       if (!window.aiData) {
@@ -167,7 +168,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     height: yLineRange,
     axisX: axisX,
     isHover: isHover,
-    config: tooltipConfig
+    config: tooltipConfig,
+    active: active
   }),
       tooltipX = _useTooltip.x,
       tickName = _useTooltip.name,
@@ -341,7 +343,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
         cancelAnimationFrame(controlTimer.current);
       };
     }
-  }, [JSON.stringify(animation), control]); //初始化控制图提示框状态的函数
+  }, [JSON.stringify(animation), control, controlInfo]); //初始化控制图提示框状态的函数
 
   var initCtlTip = function initCtlTip() {
     return {
@@ -494,9 +496,9 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     },
     props: {
       control: control,
+      controlInfo: controlInfo,
       axes: axes,
       series: series,
-      width: width,
       top: chartHeight + marginTop,
       bandLength: bandLength
     }

package/lib/components/Chart.js

@@ -13,6 +13,8 @@ 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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -71,6 +73,12 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
   var svg = /*#__PURE__*/(0, _react.createRef)();
   var chartWidth = width - marginLeft - marginRight;
   var chartHeight = height - marginTop - marginBottom;
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      active = _useState2[0],
+      setActive = _useState2[1];
+
   var triggerOnRelative = (0, _react.useCallback)(function (action, data) {
     if (!interaction) return;
     var callbacks = interaction.callbacks,
@@ -106,7 +114,20 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
       svg: svg,
       onEmit: onEmit
     };
-  }, [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit]); //对轴类图表进行
+  }, [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit]);
+  (0, _react.useEffect)(function () {
+    var activeHandler = function activeHandler(e) {
+      var _e$dynamicData = e.dynamicData,
+          dynamicData = _e$dynamicData === void 0 ? true : _e$dynamicData; // console.log("当前组件（id="+id+"）状态：",dynamicData?"唤醒":"休眠");
+
+      setActive(dynamicData);
+    };
+
+    document.addEventListener("switchActive_".concat(id), activeHandler);
+    return function () {
+      document.removeEventListener("switchActive_".concat(id), activeHandler);
+    };
+  }, []); //对轴类图表进行
 
   var data = originData;
 
@@ -142,7 +163,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
   }, props)) : /*#__PURE__*/_react["default"].createElement(_.CartesianChart, (0, _extends2["default"])({
     id: id,
     config: config,
-    data: data
+    data: data,
+    active: active
   }, props)));
 });
 var _default = Chart;

package/lib/components/Control.js

@@ -13,6 +13,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _d3Scale = require("d3-scale");
@@ -23,6 +25,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$actions = props.actions,
       setX = _props$actions.setX,
@@ -32,24 +38,22 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
       _props$props$control = _props$props.control,
       height = _props$props$control.height,
       color = _props$props$control.color,
-      _props$props$control$ = _props$props$control.drag,
-      dragColor = _props$props$control$.color,
-      dragWidth = _props$props$control$.width,
-      _props$props$control$2 = _props$props$control.margin,
-      left = _props$props$control$2.left,
-      right = _props$props$control$2.right,
+      gap = _props$props$control.gap,
+      dragColor = _props$props$control.drag.color,
+      left = _props$props$control.margin.left,
+      _props$props$controlI = _props$props.controlInfo,
+      cWidth = _props$props$controlI.cWidth,
+      cBarWidth = _props$props$controlI.cBarWidth,
       axes = _props$props.axes,
       series = _props$props.series,
-      width = _props$props.width,
       top = _props$props.top,
       bandLength = _props$props.bandLength;
-  var barWidth = width - left - right;
   var xAxis = axes.get("x");
   var barRef = (0, _react.useRef)();
   var barStyle = {
     position: "absolute",
     top: 0,
-    width: barWidth * dragWidth / 100,
+    width: cBarWidth,
     display: "flex",
     justifyContent: "space-between",
     background: dragColor
@@ -90,21 +94,35 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     document.addEventListener("mouseup", mouseUpHandle);
     setWorking(true);
   }; // //右手柄的鼠标按下逻辑
-  // const rightDown=()=>{
-  //   const move=(e)=>{
-  //   }
-  //   const up=()=>{
-  //   }
-  //   document.addEventListener()
-  // }
 
 
+  var rightDown = function rightDown() {
+    var move = function move(e) {
+      var movementX = e.movementX;
+      setControlInfo(function (pre) {
+        var nextBarWidth = pre.cBarWidth + movementX;
+        return _objectSpread(_objectSpread({}, pre), {}, {
+          cBarWidth: nextBarWidth,
+          cPercent: nextBarWidth / pre.cWidth
+        });
+      });
+    };
+
+    var up = function up() {
+      document.removeEventListener("mousemove", move);
+      document.removeEventListener("mouseup", up);
+    };
+
+    document.addEventListener("mousemove", move);
+    document.addEventListener("mouseup", up);
+  };
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     style: {
-      width: barWidth,
+      width: cWidth,
       height: height,
       backgroundColor: color,
-      transform: "translate(".concat(left, "px,").concat(top, "px)")
+      transform: "translate(".concat(left, "px,").concat(top - height + gap, "px)")
     }
   }, /*#__PURE__*/_react["default"].createElement("svg", {
     width: "100%",

package/lib/hooks/useAxes.js

@@ -429,7 +429,7 @@ var _default = function _default(_ref) {
     });
     tmp.get("x") && (tmp.get("x").positions = xAxisPositions);
     return tmp;
-  }, [axes]);
+  }, [axes, controlInfo]);
 
   return _axes;
 };

package/lib/hooks/useCarouselAxisX.js

@@ -33,7 +33,7 @@ var initialState = {
  * @returns {Map} 返回经过改变后的x轴，主要是ticks和scaler的range发生了改变
  */
 
-var _default = function _default(axis, config, isHover, controlInfo) {
+var _default = function _default(axis, config, isHover, controlInfo, active) {
   var show = config.show,
       interval = config.interval,
       duration = config.duration,
@@ -84,7 +84,7 @@ var _default = function _default(axis, config, isHover, controlInfo) {
   (0, _react.useEffect)(function () {
     var handler;
 
-    if (!(hover && isHover) && show && time && tickLength > tickCount) {
+    if (!(hover && isHover) && show && time && tickLength > tickCount && active) {
       handler = setInterval(function () {
         setStatus(function (_ref) {
           var currentIndex = _ref.currentIndex;
@@ -100,7 +100,7 @@ var _default = function _default(axis, config, isHover, controlInfo) {
     return function () {
       handler && clearInterval(handler);
     };
-  }, [show, time, tickCount, tickLength, hover, isHover]);
+  }, [show, time, tickCount, tickLength, hover, isHover, active]);
   (0, _react.useEffect)(function () {
     var animation;
     var currentIndex = status.currentIndex,

package/lib/hooks/useTooltip.js

@@ -23,6 +23,7 @@ var callback = function callback() {};
  * @param {Number} height 高
  * @param {Number} axisX 类目轴
  * @param {Object} config 轮播动画参数
+ * @param {Boolean} active 组件是否处于活跃状态
  * @returns {Object} 返回被选中的名称，坐标，选中方法
  */
 
@@ -40,7 +41,8 @@ var _default = function _default(_ref) {
   var auto = _ref$config.auto,
       _ref$config$interval = _ref$config.interval,
       interval = _ref$config$interval === void 0 ? 0 : _ref$config$interval,
-      manual = _ref$config.manual;
+      manual = _ref$config.manual,
+      active = _ref.active;
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -90,7 +92,7 @@ var _default = function _default(_ref) {
     }
   }, [svg, marginLeft, axisX, auto]);
   (0, _react.useEffect)(function () {
-    var on = auto && tickLength && !isHover; // if (!!on) setCurrentIndex(0);
+    var on = auto && tickLength && !isHover && active; // if (!!on) setCurrentIndex(0);
 
     var intervalHandler = on ? setInterval(function () {
       setCurrentIndex(function (index) {
@@ -107,7 +109,7 @@ var _default = function _default(_ref) {
     return function () {
       intervalHandler && clearInterval(intervalHandler);
     };
-  }, [auto, tickLength, interval, isHover]);
+  }, [auto, tickLength, interval, isHover, active]);
   var name = currentIndex === null ? null : axisX.allTicks[currentIndex];
   return {
     name: name,

package/package.json

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

package/src/components/Axis.tsx

@@ -37,12 +37,13 @@ const defaultFormatter: (
 const getAxesPath: (
   orientation: Orientation,
   { width, height }: Context,
-  cHeight:number
-) => string = (orientation, { width, height }, cHeight) => {
+  cHeight:number,
+  cPercent:number
+) => string = (orientation, { width, height }, cHeight, cPercent) => {
   switch (orientation) {
     case "top":
     case "bottom":
-      return "M-0.5, 0H" + width;
+      return "M-0.5, 0H" + width/cPercent;
     case "left":
     case "right":
       return "M0, -0.5V" + (height + 0.5 - cHeight);
@@ -98,11 +99,13 @@ const AxisLine: ({
   config,
   isClipAxis,
   clipAxisRange,
+  cPercent
 }: any) => ReactComponentElement<ComponentType> | null = ({
   orientation = defaultOrientation,
   config: { show, color, lineWidth, cHeight },
   isClipAxis = false,
   clipAxisRange = [],
+  cPercent = 1
 }) => {
   if (!show) return null;
   const context: Context = useContext(chartContext);
@@ -124,7 +127,7 @@ const AxisLine: ({
   } else {
     return (
       <path
-        d={getAxesPath(orientation, context, cHeight)}
+        d={getAxesPath(orientation, context, cHeight, cPercent)}
         stroke={color}
         strokeWidth={lineWidth}
       />
@@ -279,7 +282,7 @@ export default memo(
     ) => {
       if (!(on && ticks.length > 0)) return null;
       const { width, height } = useContext(chartContext);
-      const { cHeight, isC } = controlInfo;
+      const { cHeight, isC, cPercent } = controlInfo;
       const x = orientation == "right" ? width : 0;
       const y = orientation == "bottom" ? height-cHeight : 0;
 
@@ -302,7 +305,7 @@ export default memo(
             const y1 = gridCoord.y1;
             return (
               !(
-                (orientation == "bottom" && (x1 < 0 || x1 > xLineRange)) ||
+                (orientation == "bottom" && !isC && (x1 < 0 || x1 > xLineRange)) ||
                 y1 < 0 ||
                 y1 > yLineRange
               ) && (
@@ -320,7 +323,7 @@ export default memo(
             );
           });
         };
-
+        
         if (isClipAxis) {
           return (
             <>
@@ -329,11 +332,12 @@ export default memo(
               })}
             </>
           );
-        } else {
+        } else if (isC && orientation == "bottom") {
+          return <>{draw(rawTicks, scaler)}</>;
+        }else {
           return <>{draw(ticks, scaler)}</>;
         }
       }
-
       function drawLabel() {
         const draw = (ticks: any, scaler: any) => {
           return ticks.map((tick: string, index: number) => {
@@ -400,7 +404,7 @@ export default memo(
       return (
         <g>
           {/* 绘制轴线和刻度 */}
-          {axisLine && tickLine && (
+          {axisLine && tickLine && !isC && (
             <g>
               {axisLine &&
                 (positions && positions.length ? (
@@ -458,6 +462,7 @@ export default memo(
                       config={{...axisLine,cHeight}}
                       isClipAxis={isClipAxis}
                       clipAxisRange={clipAxisRange}
+                      cPercent={cPercent}
                     />
                     {tickLine && drawAxisTickLine()}
                   </g>
@@ -476,6 +481,14 @@ export default memo(
               {/* 用于控制图 */}
               <g ref={ref as any}>
                 {label && gridLine && drawLabel()}
+                {isC && <AxisLine
+                      orientation={orientation}
+                      config={{...axisLine,cHeight}}
+                      isClipAxis={isClipAxis}
+                      clipAxisRange={clipAxisRange}
+                      cPercent={cPercent}
+                    />}
+                {isC && tickLine && drawAxisTickLine()}
                 {unit && <Unit config={unit} />}
               </g>
             </g>

package/src/components/CartesianChart.js

@@ -58,6 +58,7 @@ const Chart = memo(
       brush,
       control = null,
     },
+    active,
     style,
     originData,
     filterData,
@@ -112,7 +113,8 @@ const Chart = memo(
       axes.get("x"),
       animation,
       isHover,
-      controlInfo
+      controlInfo,
+      active
     );
     useEffect(()=>{
       if(aiData.length){
@@ -143,6 +145,7 @@ const Chart = memo(
       axisX,
       isHover,
       config: tooltipConfig,
+      active
     });
     const tooltipData = useMemo(
       () =>
@@ -291,7 +294,7 @@ const Chart = memo(
           cancelAnimationFrame(controlTimer.current);
         };
       }
-    }, [JSON.stringify(animation), control]);
+    }, [JSON.stringify(animation), control, controlInfo]);
     //初始化控制图提示框状态的函数
     const initCtlTip = ()=>{
       return {
@@ -488,9 +491,9 @@ const Chart = memo(
             }}
             props={{
               control,
+              controlInfo,
               axes,
               series,
-              width,
               top:chartHeight+marginTop,
               bandLength,
             }}

package/src/components/Chart.js

@@ -1,7 +1,7 @@
 /**
  * 总入口，通过外面传进来的type来确定渲染哪种图表，饼环图表为“pie”，否则为轴类图表
  */
-import React, { memo, useMemo, createRef, useCallback } from 'react';
+import React, { memo, useMemo, createRef, useState, useEffect, useCallback } from 'react';
 import { chartContext } from '../context';
 import { PieChart, CartesianChart } from '.';
 import { group } from 'd3v7';
@@ -43,6 +43,8 @@ const Chart = memo(
     const chartWidth = width - marginLeft - marginRight;
     const chartHeight = height - marginTop - marginBottom;
 
+    const [active, setActive] = useState(true);
+
     const triggerOnRelative = useCallback(
       (action,data) => {
         if (!interaction) return;
@@ -87,6 +89,20 @@ const Chart = memo(
       }),
       [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit]
     );
+
+    useEffect(()=>{
+      const activeHandler=(e)=>{
+        const { dynamicData = true } = e;
+        // console.log("当前组件（id="+id+"）状态：",dynamicData?"唤醒":"休眠");
+        setActive(dynamicData);
+      }
+      document.addEventListener(`switchActive_${id}`,activeHandler);
+      return ()=>{
+        document.removeEventListener(`switchActive_${id}`,activeHandler);
+      }
+    },[]);
+    
+
     //对轴类图表进行
     let data = originData;
     if(axes){
@@ -107,7 +123,7 @@ const Chart = memo(
         {type == 'pie' ? (
           <PieChart id={id} config={config} data={data} {...props} />
         ) : (
-          <CartesianChart id={id} config={config} data={data} {...props} />
+          <CartesianChart id={id} config={config} data={data} active={active} {...props} />
         )}
       </chartContext.Provider>
     );

package/src/components/Control.jsx

@@ -5,17 +5,18 @@ export default memo(forwardRef((props, ref) => {
   const { 
     actions:{ setX, setWorking, setControlInfo }, 
     props: { 
-      control:{ height, color, drag:{ color:dragColor, width:dragWidth }, margin:{ left, right } }, axes, series, width, top, bandLength 
+      control:{ height, color, gap, drag:{ color:dragColor }, margin:{ left } }, 
+      controlInfo:{  cWidth, cBarWidth },
+      axes, series, top, bandLength 
     }
   } = props;
-  const barWidth = width-left-right;
   const xAxis = axes.get("x");
   const barRef = useRef();
 
   const barStyle={
     position:"absolute",
     top:0,
-    width:barWidth*dragWidth/100,
+    width:cBarWidth,
     display:"flex",
     justifyContent:"space-between",
     background:dragColor
@@ -54,23 +55,33 @@ export default memo(forwardRef((props, ref) => {
     setWorking(true);
   }
   // //右手柄的鼠标按下逻辑
-  // const rightDown=()=>{
+  const rightDown=()=>{
 
-  //   const move=(e)=>{
-
-  //   }
-  //   const up=()=>{
-
-  //   }
-  //   document.addEventListener()
-  // }
+    const move=(e)=>{
+      const { movementX } = e;
+      setControlInfo(pre=>{
+        const nextBarWidth = pre.cBarWidth+movementX;
+        return {
+          ...pre,
+          cBarWidth:nextBarWidth,
+          cPercent:nextBarWidth/pre.cWidth
+        }
+      })
+    }
+    const up=()=>{
+      document.removeEventListener("mousemove",move);
+      document.removeEventListener("mouseup",up);
+    }
+    document.addEventListener("mousemove",move);
+    document.addEventListener("mouseup",up);
+  }
   return (
     <div
       style={{
-        width: barWidth,
+        width:cWidth,
         height: height,
         backgroundColor: color,
-        transform: `translate(${left}px,${top}px)`,
+        transform: `translate(${left}px,${top-height+gap}px)`,
       }}
     >
       <svg width="100%" height="100%">

package/src/hooks/useAxes.js

@@ -430,6 +430,6 @@ export default ({
     });
     tmp.get("x") && (tmp.get("x").positions = xAxisPositions);
     return tmp;
-  }, [axes]);
+  }, [axes, controlInfo]);
   return _axes;
 };

package/src/hooks/useCarouselAxisX.js

@@ -17,7 +17,8 @@ export default (
   axis,
   config,
   isHover,
-  controlInfo
+  controlInfo,
+  active
 ) => {
   const { show, interval, duration, hover } = config;
   const { isC, cPercent } = controlInfo;
@@ -59,7 +60,7 @@ export default (
   }, [show, time, tickCount, tickLength]);
   useEffect(() => {
     let handler;
-    if (!(hover && isHover) && show && time && tickLength > tickCount) {
+    if (!(hover && isHover) && show && time && tickLength > tickCount && active) {
       handler = setInterval(() => {
         setStatus(({ currentIndex }) => {
           const tmp = +currentIndex + 1;
@@ -73,7 +74,7 @@ export default (
     return () => {
       handler && clearInterval(handler);
     };
-  }, [show, time, tickCount, tickLength, hover, isHover]);
+  }, [show, time, tickCount, tickLength, hover, isHover, active]);
 
   useEffect(() => {
     let animation;

package/src/hooks/useTooltip.ts

@@ -11,6 +11,7 @@ const callback = () => {};
  * @param {Number} height 高
  * @param {Number} axisX 类目轴
  * @param {Object} config 轮播动画参数
+ * @param {Boolean} active 组件是否处于活跃状态
  * @returns {Object} 返回被选中的名称，坐标，选中方法
  */
 type Props = {
@@ -22,6 +23,7 @@ type Props = {
   axisX: any;
   isHover: boolean;
   config: { auto?: boolean; interval?: number; manual?: boolean };
+  active:boolean
 };
 
 export default ({
@@ -33,6 +35,7 @@ export default ({
   axisX,
   isHover,
   config: { auto, interval = 0, manual } = {},
+  active
 }: Props) => {
   const [currentIndex, setCurrentIndex] = useState<number | null>(null);
   const tickLength = axisX.allTicks.length;
@@ -73,7 +76,7 @@ export default ({
     [svg, marginLeft, axisX, auto]
   );
   useEffect(() => {
-    const on = auto && tickLength && !isHover;
+    const on = auto && tickLength && !isHover && active;
     // if (!!on) setCurrentIndex(0);
     const intervalHandler = on
       ? setInterval(() => {
@@ -90,7 +93,7 @@ export default ({
     return () => {
       intervalHandler && clearInterval(intervalHandler);
     };
-  }, [auto, tickLength, interval, isHover]);
+  }, [auto, tickLength, interval, isHover, active]);
   const name = currentIndex === null ? null : axisX.allTicks[currentIndex];
   return {
     name,