@easyv/charts 1.9.12 → 1.9.14

package/lib/components/Background.js

@@ -23,7 +23,7 @@ var _default = exports["default"] = function _default(_ref) {
     paddingInner = _ref$config.seriesIntervalWidth,
     paddingOuter = _ref$config.paddingInner,
     length = _ref.length;
-  var isVertical = direction === 'vertical';
+  var isVertical = direction === "vertical";
   var _getSeriesInfo = (0, _utils.getSeriesInfo)({
       step: step,
       bandLength: bandLength,

package/lib/components/Band.js

@@ -52,11 +52,12 @@ var getAttr = function getAttr(_ref) {
     seriesWidth = _ref.seriesWidth,
     length = _ref.length,
     x = _ref.x,
-    y = _ref.y;
+    y = _ref.y,
+    maxWidth = _ref.maxWidth;
   var len = length ? length : 0.1; //柱子长度
   if (isVertical) {
     return {
-      width: Math.max(0, len),
+      width: maxWidth ? Math.min(Math.max(0, len), maxWidth) : Math.max(0, len),
       height: Math.max(0, seriesWidth),
       x: y,
       y: x,
@@ -69,9 +70,9 @@ var getAttr = function getAttr(_ref) {
     };
   } else {
     return {
-      x: x,
+      x: maxWidth ? seriesWidth > maxWidth ? x + (seriesWidth - maxWidth) / 2 : x : x,
       y: y,
-      width: seriesWidth,
+      width: maxWidth ? Math.min(seriesWidth, maxWidth) : seriesWidth,
       height: len,
       bgAttr: {
         x: x,
@@ -95,6 +96,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     isControlChart = _ref3$isControlChart === void 0 ? false : _ref3$isControlChart,
     setCtlTip = _ref3.setCtlTip,
     isXRepeat = _ref3.isXRepeat,
+    maxWidth1 = _ref3.maxWidth,
+    config = _ref3.config,
     _ref3$config = _ref3.config,
     _ref3$config$pattern = _ref3$config.pattern,
     pattern = _ref3$config$pattern === void 0 ? {} : _ref3$config$pattern,
@@ -125,6 +128,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     isClipAxis = _ref3$yAxis.isClipAxis,
     clipValue = _ref3$yAxis.clipValue,
     reverse = _ref3$yAxis.reverse;
+  var maxWidth = maxWidth1 ? maxWidth1 : config.maxWidth;
   if (!data.length) return null;
   var selectConfig = other;
   if (selectStyle) {
@@ -237,7 +241,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
         x: positionX,
         y: positionY,
         length: Math.abs(y1 - y2),
-        seriesWidth: seriesWidth
+        seriesWidth: seriesWidth,
+        maxWidth: maxWidth
       }),
       bgAttr = _getAttr.bgAttr,
       attr = (0, _objectWithoutProperties2["default"])(_getAttr, _excluded3);

package/lib/components/CartesianChart.js

@@ -33,6 +33,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     _ref$config = _ref.config,
     axesConfig = _ref$config.axes,
     background = _ref$config.background,
+    chart = _ref$config.chart,
     _ref$config$chart = _ref$config.chart,
     _ref$config$chart$mar = _ref$config$chart.margin,
     marginLeft = _ref$config$chart$mar.marginLeft,
@@ -42,6 +43,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     animation = _ref$config$chart.animation,
     legend = _ref$config$chart.legend,
     selectStyle = _ref$config$chart.selectStyle,
+    bar = _ref$config$chart.bar,
     series = _ref$config.series,
     bandLength = _ref$config.bandLength,
     tooltip = _ref$config.tooltip,
@@ -71,6 +73,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     filterData = _ref.filterData,
     aiFormatter = _ref.aiFormatter,
     id = _ref.id;
+  console.log("chart", chart);
+  console.log("bar", bar);
   var context = (0, _react.useContext)(_context.chartContext);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -625,7 +629,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       indicatorWidth: indicatorWidth,
       triggerEvents: onInteraction,
       setCtlTip: setCtlTip,
-      isXRepeat: isXRepeat
+      isXRepeat: isXRepeat,
+      maxWidth: bar ? bar.maxWidth : 0
     }));
   }), series.map(function (_ref3, index) {
     var Component = _ref3.Component,

package/lib/components/Chart.js

@@ -53,6 +53,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     emit = _ref2.emit,
     emitEvent = _ref2.emitEvent,
     props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  console.log("hhh");
   var width = props.width,
     height = props.height;
   var isIOS = (0, _react.useRef)(/iPad|iPhone|iPod|iOS/i.test(navigator.userAgent) || /Mac OS X/i.test(navigator.userAgent) && !/Chrome/i.test(navigator.userAgent));

package/lib/components/Control.js

@@ -229,6 +229,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     });
     document.addEventListener("touchend", _up4);
   };
+  console.log("series", series);
   return /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       width: cWidth,

package/lib/components/StereoBar.js

@@ -21,22 +21,22 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 var getHighlightData = function getHighlightData(data, extent) {
   switch (extent) {
-    case 'min':
+    case "min":
       var minData = (0, _d3v.min)(data, function (d) {
         return d.data.y;
       });
       return data.map(function (item) {
         return _objectSpread(_objectSpread({}, item), {}, {
-          flag: minData == item.data.y ? 'min' : ''
+          flag: minData == item.data.y ? "min" : ""
         });
       });
-    case 'max':
+    case "max":
       var maxData = (0, _d3v.max)(data, function (d) {
         return d.data.y;
       });
       return data.map(function (item) {
         return _objectSpread(_objectSpread({}, item), {}, {
-          flag: maxData == item.data.y ? 'max' : ''
+          flag: maxData == item.data.y ? "max" : ""
         });
       });
     default:
@@ -48,17 +48,18 @@ var getAttr = function getAttr(_ref) {
     seriesWidth = _ref.seriesWidth,
     length = _ref.length,
     x = _ref.x,
-    y = _ref.y;
+    y = _ref.y,
+    maxWidth = _ref.maxWidth;
   if (isVertical) return {
-    width: length,
+    width: maxWidth ? Math.min(Math.max(0, length), maxWidth) : Math.max(0, length),
     height: seriesWidth,
     x: y,
     y: x
   };
   return {
-    x: x,
+    x: maxWidth ? seriesWidth > maxWidth ? x + (seriesWidth - maxWidth) / 2 : x : x,
     y: y,
-    width: seriesWidth,
+    width: maxWidth ? Math.min(seriesWidth, maxWidth) : seriesWidth,
     height: length
   };
 };
@@ -66,10 +67,12 @@ var getBorderRadius = function getBorderRadius(_ref2) {
   var isVertical = _ref2.isVertical,
     positive = _ref2.positive,
     seriesWidth = _ref2.seriesWidth;
-  return isVertical ? positive ? '0px ' + seriesWidth + 'px ' + seriesWidth + 'px 0' : seriesWidth + 'px 0 0 ' + seriesWidth + 'px' : positive ? seriesWidth / 2 + 'px ' + seriesWidth / 2 + 'px 0 0' : '0 0 ' + seriesWidth / 2 + 'px ' + seriesWidth / 2 + 'px';
+  return isVertical ? positive ? "0px " + seriesWidth + "px " + seriesWidth + "px 0" : seriesWidth + "px 0 0 " + seriesWidth + "px" : positive ? seriesWidth / 2 + "px " + seriesWidth / 2 + "px 0 0" : "0 0 " + seriesWidth / 2 + "px " + seriesWidth / 2 + "px";
 };
 var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
   var triggerClick = _ref3.triggerClick,
+    maxWidth1 = _ref3.maxWidth,
+    config = _ref3.config,
     _ref3$config = _ref3.config,
     _ref3$config$pattern = _ref3$config.pattern,
     pattern = _ref3$config$pattern === void 0 ? {} : _ref3$config$pattern,
@@ -93,6 +96,9 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     direction = _ref3$xAxis.direction,
     yScaler = _ref3.yAxis.scaler,
     name = _ref3.name;
+  console.log("config", BarProp);
+  var maxWidth = maxWidth1 ? maxWidth1 : config.maxWidth;
+  console.log("maxWidth", maxWidth);
   if (!data.length) return null;
   var _getSeriesInfo = (0, _utils.getSeriesInfo)({
       step: step,
@@ -104,9 +110,9 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     seriesStep = _getSeriesInfo.seriesStep,
     seriesStart = _getSeriesInfo.seriesStart;
   var _data = showHighlight ? getHighlightData(data, extent) : data;
-  var isVertical = direction === 'vertical';
-  var highlightColor = parseMultiColorToSVG(highlightFill, 'highlight_gradient_' + id + '_' + name);
-  var color = parseMultiColorToSVG(fill, 'gradient_' + id + '_' + name);
+  var isVertical = direction === "vertical";
+  var highlightColor = parseMultiColorToSVG(highlightFill, "highlight_gradient_" + id + "_" + name);
+  var color = parseMultiColorToSVG(fill, "gradient_" + id + "_" + name);
   return /*#__PURE__*/_react["default"].createElement("g", {
     className: "__easyv-band"
   }, /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("filter", {
@@ -152,8 +158,10 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       x: positionX,
       y: positionY,
       length: Math.abs(y1 - y2),
-      seriesWidth: seriesWidth
+      seriesWidth: seriesWidth,
+      maxWidth: maxWidth
     });
+    console.log("attr", attr);
     return /*#__PURE__*/_react["default"].createElement("g", {
       key: i,
       onClick: triggerClick,
@@ -195,7 +203,7 @@ var Column3DSkin = function Column3DSkin(props) {
     fill: color.fill,
     style: {
       transformOrigin: "".concat(x + width / 2, "px ").concat(y + height / 2, "px"),
-      transform: 'skew(0deg, -45deg)'
+      transform: "skew(0deg, -45deg)"
     }
   }), /*#__PURE__*/_react["default"].createElement("rect", {
     width: width / 2,
@@ -227,7 +235,7 @@ function deg2rad(deg) {
   return deg / AngleTransfromRatio;
 }
 function deepCopy(obj) {
-  if ((0, _typeof2["default"])(obj) == 'object') {
+  if ((0, _typeof2["default"])(obj) == "object") {
     var o;
     if (Array.isArray(obj)) {
       o = [];
@@ -247,7 +255,7 @@ function deepCopy(obj) {
   }
 }
 function parseMultiColorToSVG(config, id) {
-  if (config.type == 'linear') {
+  if (config.type == "linear") {
     var _config$linear = config.linear,
       stops = _config$linear.stops,
       opacity = _config$linear.opacity;
@@ -265,14 +273,14 @@ function parseMultiColorToSVG(config, id) {
     }); //必须排序才能渲染出来
     return {
       fill: "url(#".concat(id, ")"),
-      def: /*#__PURE__*/_react["default"].createElement('linearGradient', {
+      def: /*#__PURE__*/_react["default"].createElement("linearGradient", {
         id: id,
         x2: start[0],
         y2: start[1],
         x1: end[0],
         y1: end[1]
       }, _stops.map(function (e) {
-        return /*#__PURE__*/_react["default"].createElement('stop', {
+        return /*#__PURE__*/_react["default"].createElement("stop", {
           key: e.offset,
           offset: e.offset / 100,
           stopColor: e.color,

package/package.json

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

package/src/components/Background.tsx

@@ -1,8 +1,8 @@
 /**
  * 轴类图背景
  */
-import React from 'react';
-import { getSeriesInfo } from '../utils';
+import React from "react";
+import { getSeriesInfo } from "../utils";
 
 export default ({
   axis: { ticks, scaler, step, direction },
@@ -28,7 +28,7 @@ export default ({
   };
   length: number;
 }) => {
-  const isVertical: boolean = direction === 'vertical';
+  const isVertical: boolean = direction === "vertical";
 
   const { width: bandwidth } = getSeriesInfo({
     step,
@@ -54,7 +54,7 @@ export default ({
         x={isVertical ? 0 : scaler(tick) - bandwidth / 2}
         y={isVertical ? scaler(tick) - bandwidth / 2 : 0}
         fill={background}
-        stroke='none'
+        stroke="none"
       />
     );
   });

package/src/components/Band.tsx

@@ -30,17 +30,19 @@ const getAttr = ({
   length,
   x,
   y,
+  maxWidth,
 }: {
   isVertical: boolean;
   seriesWidth: number;
   length: number;
   x: number;
   y: number;
+  maxWidth: number;
 }) => {
   const len = length ? length : 0.1; //柱子长度
   if (isVertical) {
     return {
-      width: Math.max(0, len),
+      width: maxWidth ? Math.min(Math.max(0, len), maxWidth) : Math.max(0, len),
       height: Math.max(0, seriesWidth),
       x: y,
       y: x,
@@ -53,9 +55,13 @@ const getAttr = ({
     };
   } else {
     return {
-      x,
+      x: maxWidth
+        ? seriesWidth > maxWidth
+          ? x + (seriesWidth - maxWidth) / 2
+          : x
+        : x,
       y,
-      width: seriesWidth,
+      width: maxWidth ? Math.min(seriesWidth, maxWidth) : seriesWidth,
       height: len,
       bgAttr: {
         x,
@@ -93,6 +99,8 @@ export default memo(
     isControlChart = false,
     setCtlTip,
     isXRepeat,
+    maxWidth: maxWidth1,
+    config,
     config: {
       pattern = {},
       seriesIntervalWidth: paddingInner = 0,
@@ -114,6 +122,7 @@ export default memo(
     },
     yAxis: { scaler: yScaler, isClipAxis, clipValue, reverse },
   }: any) => {
+    const maxWidth = maxWidth1 ? maxWidth1 : config.maxWidth;
     if (!data.length) return null;
     let selectConfig = other;
     if (selectStyle) {
@@ -229,6 +238,7 @@ export default memo(
               y: positionY,
               length: Math.abs(y1 - y2),
               seriesWidth,
+              maxWidth,
             });
             return (
               <Fragment key={i}>

package/src/components/CartesianChart.js

@@ -39,11 +39,14 @@ const Chart = memo(
     config: {
       axes: axesConfig,
       background,
+      chart,
       chart: {
         margin: { marginLeft, marginTop, marginRight, marginBottom },
         animation,
         legend,
         selectStyle,
+        bar,
+        // bar: { maxWidth = 0 },
       },
       series,
       bandLength,
@@ -638,6 +641,7 @@ const Chart = memo(
                       triggerEvents={onInteraction}
                       setCtlTip={setCtlTip}
                       isXRepeat={isXRepeat}
+                      maxWidth={bar ? bar.maxWidth : 0}
                     />
                   )
                 );

package/src/components/Control.jsx

@@ -3,240 +3,288 @@ import { chartContext } from "../context";
 import { scaleLinear } from "d3-scale";
 import { mathR } from "../utils";
 
-export default memo(forwardRef((props, ref) => {
-  const { 
-    actions:{ setX, setWorking, setControlWidth }, 
-    props: { 
-      control:{thumbnail, height, color, gap, drag:{ color:dragColor }, margin:{ left } }, 
-      controlInfo:{ cWidth, cBarWidth },
-      axes, series, top, bandLength 
-    }
-  } = props;
-  const context = useContext(chartContext);
-  const scale = context.scale;
-  const xAxis = axes.get("x");
-  const barRef = useRef();
-  
-  const barStyle={
-    position:"absolute",
-    top:0,
-    width:cBarWidth,
-    display:"flex",
-    justifyContent:"space-between",
-    background:dragColor
-  }
-  const dragStyle={
-    height,
-    flex:1,
-    cursor:"move"
-  }
-  const controllerStyle={
-    position:"relative",
-    width:12,
-    height,
-    padding:"0 5px",
-    cursor:"col-resize",
-    background:"rgb(2, 176, 249)",
-    WebkitBackgroundClip:"content-box",
-  }
- 
-  //左手柄的鼠标按下逻辑
-  const leftDown=()=>{
-    const transform = ref.current.style.transform;
-    let initX = 0;
-    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
-    const rightX = rawTranslateX+cBarWidth;
-    const move=(e)=>{
-      const { movementX:ex } = e;
-      const movementX = ex * scale.current[0];
-      initX = mathR(initX+movementX,[-rawTranslateX, rightX-rawTranslateX]);
-      setControlWidth((pre)=>{
-        const { cWidth, cBarWidth } = pre;
-        const nextBarWidth = mathR(cBarWidth-movementX,[1,rightX]);
-        return {
-          ...pre,
-          cBarWidth:nextBarWidth,
-          cPercent:nextBarWidth/cWidth,
-          cBarX:initX+rawTranslateX
-        }
-      }, true);
-    }
-    const up=()=>{
-      document.removeEventListener("mousemove",move);
-      document.removeEventListener("mouseup",up);
-    }
-    document.addEventListener("mousemove",move);
-    document.addEventListener("mouseup",up);
-  }
-  //左手手柄的移动端适配
-  const leftTouchStart = (e)=>{
-    const transform = ref.current.style.transform;
-    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
-    let initX = 0;
-    const rightX = rawTranslateX+cBarWidth;
-    let startX = e.touches[0].clientX;
-    let currentX = 0;
-    let movementX = 0;
-    const move = (e)=>{
-      e.preventDefault();
-      currentX = e.touches[0].clientX;
-      movementX = currentX - startX;
-      startX = currentX;
-      initX = mathR(initX+movementX,[-rawTranslateX, rightX-rawTranslateX]);
-      setControlWidth((pre)=>{
-        const { cWidth, cBarWidth } = pre;
-        const nextBarWidth = mathR(cBarWidth-movementX,[1,rightX]);
-        return {
-          ...pre,
-          cBarWidth:nextBarWidth,
-          cPercent:nextBarWidth/cWidth,
-          cBarX:initX+rawTranslateX
-        }
-      });
-    }
-    const up = (e) => {
-      document.removeEventListener("touchmove", move);
-      document.removeEventListener("touchend", up);
+export default memo(
+  forwardRef((props, ref) => {
+    const {
+      actions: { setX, setWorking, setControlWidth },
+      props: {
+        control: {
+          thumbnail,
+          height,
+          color,
+          gap,
+          drag: { color: dragColor },
+          margin: { left },
+        },
+        controlInfo: { cWidth, cBarWidth },
+        axes,
+        series,
+        top,
+        bandLength,
+      },
+    } = props;
+    const context = useContext(chartContext);
+    const scale = context.scale;
+    const xAxis = axes.get("x");
+    const barRef = useRef();
+
+    const barStyle = {
+      position: "absolute",
+      top: 0,
+      width: cBarWidth,
+      display: "flex",
+      justifyContent: "space-between",
+      background: dragColor,
     };
-    document.addEventListener("touchmove", move, {passive:false});
-    document.addEventListener("touchend", up);
-  }
-  //滑块的鼠标按下操作
-  const down=()=>{
-    const transform = ref.current.style.transform;
-    let movementX = 0;
-    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
-    const mouseMoveHandle = (e) => {
-      //当前位移的距离
-      movementX += e.movementX * scale.current[0];
-      setX(movementX + rawTranslateX,true);
+    const dragStyle = {
+      height,
+      flex: 1,
+      cursor: "move",
     };
-    const mouseUpHandle = (e) => {
-      setWorking(false);
-      document.removeEventListener("mousemove", mouseMoveHandle);
-      document.removeEventListener("mouseup", mouseUpHandle);
+    const controllerStyle = {
+      position: "relative",
+      width: 12,
+      height,
+      padding: "0 5px",
+      cursor: "col-resize",
+      background: "rgb(2, 176, 249)",
+      WebkitBackgroundClip: "content-box",
     };
-    document.addEventListener("mousemove", mouseMoveHandle);
-    document.addEventListener("mouseup", mouseUpHandle);
-    setWorking(true);
-  }
-  //移动端适配
-  const touchStart=(e)=>{
-    const transform = ref.current.style.transform;
-    let startX = e.touches[0].clientX;
-    let currentX = 0;
-    let movementX = 0;
-    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
-    const mouseMoveHandle = (e)=>{
-      e.preventDefault();
-      currentX = e.touches[0].clientX;
-      movementX += currentX - startX;
-      startX = currentX;
-      setX(movementX + rawTranslateX, true);
-    }
-    const mouseUpHandle = (e) => {
-      setWorking(false);
-      document.removeEventListener("touchmove", mouseMoveHandle);
-      document.removeEventListener("touchend", mouseUpHandle);
+
+    //左手柄的鼠标按下逻辑
+    const leftDown = () => {
+      const transform = ref.current.style.transform;
+      let initX = 0;
+      let rawTranslateX = parseFloat(
+        transform ? transform.match(/\d+\.*\d*/)[0] : 0
+      );
+      const rightX = rawTranslateX + cBarWidth;
+      const move = (e) => {
+        const { movementX: ex } = e;
+        const movementX = ex * scale.current[0];
+        initX = mathR(initX + movementX, [
+          -rawTranslateX,
+          rightX - rawTranslateX,
+        ]);
+        setControlWidth((pre) => {
+          const { cWidth, cBarWidth } = pre;
+          const nextBarWidth = mathR(cBarWidth - movementX, [1, rightX]);
+          return {
+            ...pre,
+            cBarWidth: nextBarWidth,
+            cPercent: nextBarWidth / cWidth,
+            cBarX: initX + rawTranslateX,
+          };
+        }, true);
+      };
+      const up = () => {
+        document.removeEventListener("mousemove", move);
+        document.removeEventListener("mouseup", up);
+      };
+      document.addEventListener("mousemove", move);
+      document.addEventListener("mouseup", up);
     };
-    document.addEventListener("touchmove", mouseMoveHandle, {passive:false});
-    document.addEventListener("touchend", mouseUpHandle);
-    setWorking(true);
-  }
-  //右手柄的鼠标按下逻辑
-  const rightDown=()=>{
-    const transform = ref.current.style.transform;
-    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
-    const move=(e)=>{
-      const { movementX:ex } = e;
-      const movementX = ex * scale.current[0];
-      setControlWidth((pre)=>{
-        const { cWidth, cBarWidth } = pre;
-        const maxWidth = cWidth-rawTranslateX;
-        const nextBarWidth = mathR(cBarWidth+movementX,[1,maxWidth]);
-        return {
-          ...pre,
-          cBarWidth:nextBarWidth,
-          cPercent:nextBarWidth/cWidth
-        }
-      });
-    }
-    const up=()=>{
-      document.removeEventListener("mousemove",move);
-      document.removeEventListener("mouseup",up);
-    }
-    document.addEventListener("mousemove",move);
-    document.addEventListener("mouseup",up);
-  }
-  //右手手柄的移动端适配
-  const rightTouchStart = (e)=>{
-    const transform = ref.current.style.transform;
-    let startX = e.touches[0].clientX;
-    let currentX = 0;
-    let movementX = 0;
-    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
-    const move = (e)=>{
-      e.preventDefault();
-      currentX = e.touches[0].clientX;
-      movementX = currentX - startX;
-      startX = currentX;
-      setControlWidth((pre)=>{
-        const { cWidth, cBarWidth } = pre;
-        const maxWidth = cWidth-rawTranslateX;
-        const nextBarWidth = mathR(cBarWidth+movementX,[1,maxWidth]);
-        return {
-          ...pre,
-          cBarWidth:nextBarWidth,
-          cPercent:nextBarWidth/cWidth
-        }
+    //左手手柄的移动端适配
+    const leftTouchStart = (e) => {
+      const transform = ref.current.style.transform;
+      let rawTranslateX = parseFloat(
+        transform ? transform.match(/\d+\.*\d*/)[0] : 0
+      );
+      let initX = 0;
+      const rightX = rawTranslateX + cBarWidth;
+      let startX = e.touches[0].clientX;
+      let currentX = 0;
+      let movementX = 0;
+      const move = (e) => {
+        e.preventDefault();
+        currentX = e.touches[0].clientX;
+        movementX = currentX - startX;
+        startX = currentX;
+        initX = mathR(initX + movementX, [
+          -rawTranslateX,
+          rightX - rawTranslateX,
+        ]);
+        setControlWidth((pre) => {
+          const { cWidth, cBarWidth } = pre;
+          const nextBarWidth = mathR(cBarWidth - movementX, [1, rightX]);
+          return {
+            ...pre,
+            cBarWidth: nextBarWidth,
+            cPercent: nextBarWidth / cWidth,
+            cBarX: initX + rawTranslateX,
+          };
+        });
+      };
+      const up = (e) => {
+        document.removeEventListener("touchmove", move);
+        document.removeEventListener("touchend", up);
+      };
+      document.addEventListener("touchmove", move, { passive: false });
+      document.addEventListener("touchend", up);
+    };
+    //滑块的鼠标按下操作
+    const down = () => {
+      const transform = ref.current.style.transform;
+      let movementX = 0;
+      let rawTranslateX = parseFloat(
+        transform ? transform.match(/\d+\.*\d*/)[0] : 0
+      );
+      const mouseMoveHandle = (e) => {
+        //当前位移的距离
+        movementX += e.movementX * scale.current[0];
+        setX(movementX + rawTranslateX, true);
+      };
+      const mouseUpHandle = (e) => {
+        setWorking(false);
+        document.removeEventListener("mousemove", mouseMoveHandle);
+        document.removeEventListener("mouseup", mouseUpHandle);
+      };
+      document.addEventListener("mousemove", mouseMoveHandle);
+      document.addEventListener("mouseup", mouseUpHandle);
+      setWorking(true);
+    };
+    //移动端适配
+    const touchStart = (e) => {
+      const transform = ref.current.style.transform;
+      let startX = e.touches[0].clientX;
+      let currentX = 0;
+      let movementX = 0;
+      let rawTranslateX = parseFloat(
+        transform ? transform.match(/\d+\.*\d*/)[0] : 0
+      );
+      const mouseMoveHandle = (e) => {
+        e.preventDefault();
+        currentX = e.touches[0].clientX;
+        movementX += currentX - startX;
+        startX = currentX;
+        setX(movementX + rawTranslateX, true);
+      };
+      const mouseUpHandle = (e) => {
+        setWorking(false);
+        document.removeEventListener("touchmove", mouseMoveHandle);
+        document.removeEventListener("touchend", mouseUpHandle);
+      };
+      document.addEventListener("touchmove", mouseMoveHandle, {
+        passive: false,
       });
-    }
-    const up = (e) => {
-      document.removeEventListener("touchmove", move);
-      document.removeEventListener("touchend", up);
+      document.addEventListener("touchend", mouseUpHandle);
+      setWorking(true);
+    };
+    //右手柄的鼠标按下逻辑
+    const rightDown = () => {
+      const transform = ref.current.style.transform;
+      let rawTranslateX = parseFloat(
+        transform ? transform.match(/\d+\.*\d*/)[0] : 0
+      );
+      const move = (e) => {
+        const { movementX: ex } = e;
+        const movementX = ex * scale.current[0];
+        setControlWidth((pre) => {
+          const { cWidth, cBarWidth } = pre;
+          const maxWidth = cWidth - rawTranslateX;
+          const nextBarWidth = mathR(cBarWidth + movementX, [1, maxWidth]);
+          return {
+            ...pre,
+            cBarWidth: nextBarWidth,
+            cPercent: nextBarWidth / cWidth,
+          };
+        });
+      };
+      const up = () => {
+        document.removeEventListener("mousemove", move);
+        document.removeEventListener("mouseup", up);
+      };
+      document.addEventListener("mousemove", move);
+      document.addEventListener("mouseup", up);
     };
-    document.addEventListener("touchmove", move, {passive:false});
-    document.addEventListener("touchend", up);
-  }
-  return (
-    <div
-      style={{
-        width:cWidth,
-        height: height,
-        backgroundColor: color,
-        transform: `translate(${left}px,${top-height+gap}px)`,
-      }}
-    >
-      <svg width="100%" height="100%" style={{display:thumbnail?"block":"none"}} >
-        {series.map(({ Component, yOrZ, ...config }, index) => {
-          const yAxis = axes.get(yOrZ);
-          const cloneYAxis = JSON.parse(JSON.stringify(yAxis));
-          //todo range
-          cloneYAxis.scaler = scaleLinear()
-            .domain(yAxis.domain)
-            .range([height, 0]);
-          return (
-            yAxis &&
-            Component && (
-              <Component
-                key={index}
-                {...config}
-                bandLength={bandLength}
-                xAxis={xAxis}
-                yAxis={cloneYAxis}
-                triggerClick={()=>{}}
-              />
-            )
-          );
-        })}
-      </svg>
-      {/* 控制条 */}
-      <div ref={ref} style={barStyle}>
-        <div style={{...controllerStyle,transform:"translateX(-6px)"}} onMouseDown={leftDown} onTouchStart={leftTouchStart}></div>
-        <div style={dragStyle} onMouseDown={down} onTouchStart={touchStart} ref={barRef}></div>
-        <div style={{...controllerStyle,transform:`translateX(6px)`}} onMouseDown={rightDown} onTouchStart={rightTouchStart}></div>
+    //右手手柄的移动端适配
+    const rightTouchStart = (e) => {
+      const transform = ref.current.style.transform;
+      let startX = e.touches[0].clientX;
+      let currentX = 0;
+      let movementX = 0;
+      let rawTranslateX = parseFloat(
+        transform ? transform.match(/\d+\.*\d*/)[0] : 0
+      );
+      const move = (e) => {
+        e.preventDefault();
+        currentX = e.touches[0].clientX;
+        movementX = currentX - startX;
+        startX = currentX;
+        setControlWidth((pre) => {
+          const { cWidth, cBarWidth } = pre;
+          const maxWidth = cWidth - rawTranslateX;
+          const nextBarWidth = mathR(cBarWidth + movementX, [1, maxWidth]);
+          return {
+            ...pre,
+            cBarWidth: nextBarWidth,
+            cPercent: nextBarWidth / cWidth,
+          };
+        });
+      };
+      const up = (e) => {
+        document.removeEventListener("touchmove", move);
+        document.removeEventListener("touchend", up);
+      };
+      document.addEventListener("touchmove", move, { passive: false });
+      document.addEventListener("touchend", up);
+    };
+    return (
+      <div
+        style={{
+          width: cWidth,
+          height: height,
+          backgroundColor: color,
+          transform: `translate(${left}px,${top - height + gap}px)`,
+        }}
+      >
+        <svg
+          width="100%"
+          height="100%"
+          style={{ display: thumbnail ? "block" : "none" }}
+        >
+          {series.map(({ Component, yOrZ, ...config }, index) => {
+            const yAxis = axes.get(yOrZ);
+            const cloneYAxis = JSON.parse(JSON.stringify(yAxis));
+            //todo range
+            cloneYAxis.scaler = scaleLinear()
+              .domain(yAxis.domain)
+              .range([height, 0]);
+            return (
+              yAxis &&
+              Component && (
+                <Component
+                  key={index}
+                  {...config}
+                  bandLength={bandLength}
+                  xAxis={xAxis}
+                  yAxis={cloneYAxis}
+                  triggerClick={() => {}}
+                />
+              )
+            );
+          })}
+        </svg>
+        {/* 控制条 */}
+        <div ref={ref} style={barStyle}>
+          <div
+            style={{ ...controllerStyle, transform: "translateX(-6px)" }}
+            onMouseDown={leftDown}
+            onTouchStart={leftTouchStart}
+          ></div>
+          <div
+            style={dragStyle}
+            onMouseDown={down}
+            onTouchStart={touchStart}
+            ref={barRef}
+          ></div>
+          <div
+            style={{ ...controllerStyle, transform: `translateX(6px)` }}
+            onMouseDown={rightDown}
+            onTouchStart={rightTouchStart}
+          ></div>
+        </div>
       </div>
-    </div>
-  );
-}))
-
+    );
+  })
+);

package/src/components/StereoBar.tsx

@@ -1,23 +1,23 @@
 /**
  * 立体柱状图的柱子
  */
-import React, { memo } from 'react';
-import { min, max } from 'd3v7';
-import { getSeriesInfo } from '../utils';
+import React, { memo } from "react";
+import { min, max } from "d3v7";
+import { getSeriesInfo } from "../utils";
 
 const getHighlightData = (data: Array<DataWithBoundType>, extent: string) => {
   switch (extent) {
-    case 'min':
+    case "min":
       const minData = min(data, (d: DataWithBoundType) => d.data.y);
       return data.map((item) => ({
         ...item,
-        flag: minData == item.data.y ? 'min' : '',
+        flag: minData == item.data.y ? "min" : "",
       }));
-    case 'max':
+    case "max":
       const maxData = max(data, (d: DataWithBoundType) => d.data.y);
       return data.map((item) => ({
         ...item,
-        flag: maxData == item.data.y ? 'max' : '',
+        flag: maxData == item.data.y ? "max" : "",
       }));
     default:
       return data;
@@ -30,18 +30,32 @@ const getAttr = ({
   length,
   x,
   y,
+  maxWidth,
 }: {
   isVertical: boolean;
   seriesWidth: number;
   length: number;
   x: number;
   y: number;
+  maxWidth: number;
 }) => {
-  if (isVertical) return { width: length, height: seriesWidth, x: y, y: x };
+  if (isVertical)
+    return {
+      width: maxWidth
+        ? Math.min(Math.max(0, length), maxWidth)
+        : Math.max(0, length),
+      height: seriesWidth,
+      x: y,
+      y: x,
+    };
   return {
-    x,
+    x: maxWidth
+      ? seriesWidth > maxWidth
+        ? x + (seriesWidth - maxWidth) / 2
+        : x
+      : x,
     y,
-    width: seriesWidth,
+    width: maxWidth ? Math.min(seriesWidth, maxWidth) : seriesWidth,
     height: length,
   };
 };
@@ -57,16 +71,18 @@ const getBorderRadius = ({
 }) => {
   return isVertical
     ? positive
-      ? '0px ' + seriesWidth + 'px ' + seriesWidth + 'px 0'
-      : seriesWidth + 'px 0 0 ' + seriesWidth + 'px'
+      ? "0px " + seriesWidth + "px " + seriesWidth + "px 0"
+      : seriesWidth + "px 0 0 " + seriesWidth + "px"
     : positive
-    ? seriesWidth / 2 + 'px ' + seriesWidth / 2 + 'px 0 0'
-    : '0 0 ' + seriesWidth / 2 + 'px ' + seriesWidth / 2 + 'px';
+    ? seriesWidth / 2 + "px " + seriesWidth / 2 + "px 0 0"
+    : "0 0 " + seriesWidth / 2 + "px " + seriesWidth / 2 + "px";
 };
 
 export default memo(
   ({
     triggerClick,
+    maxWidth: maxWidth1,
+    config,
     config: {
       pattern = {},
       seriesIntervalWidth: paddingInner = 0,
@@ -80,8 +96,9 @@ export default memo(
     data,
     xAxis: { scaler: xScaler, step, direction },
     yAxis: { scaler: yScaler },
-    name
+    name,
   }: any) => {
+    const maxWidth = maxWidth1 ? maxWidth1 : config.maxWidth;
     if (!data.length) return null;
     const { seriesWidth, seriesStep, seriesStart } = getSeriesInfo({
       step,
@@ -91,31 +108,28 @@ export default memo(
     });
     const _data = showHighlight ? getHighlightData(data, extent) : data;
 
-    const isVertical = direction === 'vertical';
+    const isVertical = direction === "vertical";
 
     const highlightColor = parseMultiColorToSVG(
       highlightFill,
-      'highlight_gradient_' + id + '_' + name
-    );
-    const color = parseMultiColorToSVG(
-      fill,
-      'gradient_' + id + '_' + name
+      "highlight_gradient_" + id + "_" + name
     );
+    const color = parseMultiColorToSVG(fill, "gradient_" + id + "_" + name);
     return (
-      <g className='__easyv-band'>
+      <g className="__easyv-band">
         <defs>
           <filter id={`filter_front`}>
             <feComponentTransfer>
-              <feFuncR type='linear' slope='0.5' />
-              <feFuncG type='linear' slope='0.5' />
-              <feFuncB type='linear' slope='0.5' />
+              <feFuncR type="linear" slope="0.5" />
+              <feFuncG type="linear" slope="0.5" />
+              <feFuncB type="linear" slope="0.5" />
             </feComponentTransfer>
           </filter>
           <filter id={`filter_side`}>
             <feComponentTransfer>
-              <feFuncR type='linear' slope='0.7' />
-              <feFuncG type='linear' slope='0.7' />
-              <feFuncB type='linear' slope='0.7' />
+              <feFuncR type="linear" slope="0.7" />
+              <feFuncG type="linear" slope="0.7" />
+              <feFuncB type="linear" slope="0.7" />
             </feComponentTransfer>
           </filter>
           {highlightColor.def}
@@ -146,6 +160,7 @@ export default memo(
               y: positionY,
               length: Math.abs(y1 - y2),
               seriesWidth,
+              maxWidth,
             });
 
             return (
@@ -175,7 +190,7 @@ const Column3DSkin = function (props: any) {
         transform: `skew(0deg, 23deg)`,
         transformOrigin: `${x + width / 2}px ${y + height / 2}px`,
         opacity: opacity,
-        cursor:"pointer"
+        cursor: "pointer",
       }}
     >
       {color.defs}
@@ -197,7 +212,7 @@ const Column3DSkin = function (props: any) {
         fill={color.fill}
         style={{
           transformOrigin: `${x + width / 2}px ${y + height / 2}px`,
-          transform: 'skew(0deg, -45deg)',
+          transform: "skew(0deg, -45deg)",
         }}
       ></rect>
       {/* 顶部 */}
@@ -233,7 +248,7 @@ function deg2rad(deg: any) {
   return deg / AngleTransfromRatio;
 }
 function deepCopy(obj: any): any {
-  if (typeof obj == 'object') {
+  if (typeof obj == "object") {
     let o: any;
     if (Array.isArray(obj)) {
       o = [];
@@ -252,7 +267,7 @@ function deepCopy(obj: any): any {
   }
 }
 function parseMultiColorToSVG(config: any, id: any) {
-  if (config.type == 'linear') {
+  if (config.type == "linear") {
     const { stops, opacity } = config.linear;
     let start = [0, 0.5],
       end = [1, 0.5];
@@ -267,7 +282,7 @@ function parseMultiColorToSVG(config: any, id: any) {
     return {
       fill: `url(#${id})`,
       def: React.createElement(
-        'linearGradient',
+        "linearGradient",
         {
           id,
           x2: start[0],
@@ -276,7 +291,7 @@ function parseMultiColorToSVG(config: any, id: any) {
           y1: end[1],
         },
         _stops.map((e: any) => {
-          return React.createElement('stop', {
+          return React.createElement("stop", {
             key: e.offset,
             offset: e.offset / 100,
             stopColor: e.color,