@easyv/charts 1.2.14 → 1.3.2

package/lib/components/Background.js

@@ -22,12 +22,22 @@ var _default = function _default(_ref) {
       scaler = _ref$axis.scaler,
       step = _ref$axis.step,
       direction = _ref$axis.direction,
+      bandLength = _ref.bandLength,
       _ref$config = _ref.config,
       background = _ref$config.background,
+      paddingInner = _ref$config.seriesIntervalWidth,
       paddingOuter = _ref$config.paddingInner,
       length = _ref.length;
   var isVertical = direction === 'vertical';
-  var bandwidth = (0, _utils.getBandwidth)(step, paddingOuter);
+
+  var _getSeriesInfo = (0, _utils.getSeriesInfo)({
+    step: step,
+    bandLength: bandLength,
+    paddingInner: paddingInner,
+    paddingOuter: paddingOuter
+  }),
+      bandwidth = _getSeriesInfo.width;
+
   var size = isVertical ? {
     width: length,
     height: bandwidth

package/lib/components/Band.js

@@ -111,19 +111,19 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
       direction = _ref3$xAxis.direction,
       yScaler = _ref3.yAxis.scaler;
   if (!data.length) return null;
-  var bandwidth = (0, _utils.getBandwidth)(step, paddingOuter);
 
-  var _getBandSeriesStepAnd = (0, _utils.getBandSeriesStepAndWidth)({
-    width: bandwidth,
+  var _getSeriesInfo = (0, _utils.getSeriesInfo)({
+    step: step,
+    bandLength: bandLength,
     paddingInner: paddingInner,
-    bandLength: bandLength
+    paddingOuter: paddingOuter
   }),
-      seriesStep = _getBandSeriesStepAnd.seriesStep,
-      seriesWidth = _getBandSeriesStepAnd.seriesWidth;
+      seriesWidth = _getSeriesInfo.seriesWidth,
+      seriesStep = _getSeriesInfo.seriesStep,
+      seriesStart = _getSeriesInfo.seriesStart;
 
   var _data = showHighlight ? getHighlightData(data, extent) : data;
 
-  var offset = (seriesWidth + paddingInner * seriesStep) * bandLength - paddingInner * seriesStep;
   var isVertical = direction === 'vertical';
   return /*#__PURE__*/_react["default"].createElement("g", {
     className: "__easyv-band"
@@ -141,7 +141,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
 
     var y1 = yScaler(isVertical ? end : start);
     var y2 = yScaler(isVertical ? start : end);
-    var positionX = xScaler(x) + seriesStep * index - offset / 2;
+    var positionX = xScaler(x) - step / 2 + seriesStart + index * seriesStep;
     if (isNaN(positionX)) return null;
     var positionY = y < 0 ? y1 : y2;
     var attr = getAttr({

package/lib/components/CartesianChart.js

@@ -44,6 +44,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       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,
@@ -133,7 +134,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   }, background && /*#__PURE__*/_react["default"].createElement(_.Background, {
     length: isVertical ? chartWidth : chartHeight,
     axis: axisX,
-    config: background
+    config: background,
+    bandLength: bandLength
   }), (0, _toConsumableArray2["default"])(axes.values()).map(function (item, index) {
     var config = item.axisType == 'x' ? axisX : item;
     return /*#__PURE__*/_react["default"].createElement(_.Axis, (0, _extends2["default"])({
@@ -149,6 +151,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     return yAxis && Component && /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
       key: index
     }, config, {
+      bandLength: bandLength,
       xAxis: axisX,
       yAxis: yAxis,
       triggerClick: onInteraction
@@ -161,6 +164,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     return yAxis && /*#__PURE__*/_react["default"].createElement(_.Label, (0, _extends2["default"])({
       key: index
     }, config, {
+      bandLength: bandLength,
       xAxis: axisX,
       yAxis: yAxis,
       triggerClick: onInteraction

package/lib/components/Chart.js

@@ -64,6 +64,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
   var chartWidth = width - marginLeft - marginRight;
   var chartHeight = height - marginTop - marginBottom;
   var triggerOnRelative = (0, _react.useCallback)(function (data) {
+    console.log("trigger");
     if (!interaction) return;
     var callbacks = interaction.callbacks,
         remoteControls = interaction.remoteControls;
@@ -83,7 +84,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
         }
       });
     }
-  }, [onRelative, emitEvent, JSON.stringify(interaction)]);
+  }, [JSON.stringify(interaction)]);
   var onEmit = (0, _react.useCallback)(function () {
     var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'click';
     var data = arguments.length > 1 ? arguments[1] : undefined;

package/lib/components/Label.js

@@ -41,7 +41,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       direction = _ref$xAxis.direction,
       yScaler = _ref.yAxis.scaler,
       triggerClick = _ref.triggerClick;
-  var lineType = config.hasOwnProperty('line'); //堆叠处理
+  var lineType = config.hasOwnProperty('line'); //  堆叠处理
 
   var showIcon = icon && icon.show;
   var showLabel = label && label.show;
@@ -51,17 +51,16 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       width = _useContext.width,
       height = _useContext.height;
 
-  var bandwidth = (0, _utils.getBandwidth)(step, paddingOuter);
-
-  var _getBandSeriesStepAnd = (0, _utils.getBandSeriesStepAndWidth)({
-    width: bandwidth,
+  var _getSeriesInfo = (0, _utils.getSeriesInfo)({
+    step: step,
+    bandLength: bandLength,
     paddingInner: paddingInner,
-    bandLength: bandLength
+    paddingOuter: paddingOuter
   }),
-      seriesStep = _getBandSeriesStepAnd.seriesStep,
-      seriesWidth = _getBandSeriesStepAnd.seriesWidth;
+      seriesStep = _getSeriesInfo.seriesStep,
+      seriesWidth = _getSeriesInfo.seriesWidth,
+      seriesStart = _getSeriesInfo.seriesStart;
 
-  var offset = (seriesWidth + paddingInner * seriesStep) * bandLength - paddingInner * seriesStep;
   var isVertical = direction === 'vertical';
   var _position = label.position;
   return /*#__PURE__*/React.createElement("g", {
@@ -78,11 +77,11 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
         showY = _ref2$data.showY,
         s = _ref2$data.s;
 
-    var y1 = yScaler(isVertical ? end : start); //处理z型折线图和堆叠柱图的逻辑冲突
+    var y1 = yScaler(isVertical ? end : start); //  处理z型折线图和堆叠柱图的逻辑冲突
 
     var y2 = lineType ? start ? yScaler(isVertical ? start : end - start) : yScaler(isVertical ? start : end) : yScaler(isVertical ? start : end); // const y2 =  yScaler(isVertical ? start : end);
 
-    var positionX = xScaler(x) + seriesStep * index - offset / 2;
+    var positionX = xScaler(x) - step / 2 + seriesStart + index * seriesStep;
     if (isNaN(positionX)) return null;
     var position = positionX + seriesWidth / 2;
     var labelPosition = isVertical ? getVerticalLabel({
@@ -109,7 +108,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       key: i,
       onClick: triggerClick,
       "data-data": JSON.stringify(data)
-    }, showIcon && /*#__PURE__*/React.createElement(Icon, {
+    }, showIcon && !isNaN(attr.y) && /*#__PURE__*/React.createElement(Icon, {
       cx: attr.x,
       cy: attr.y,
       config: icon

package/lib/components/StackData.js

@@ -32,15 +32,13 @@ var _default = function _default(Component) {
         data = _ref.data,
         props = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
 
-    var _series = (0, _hooks.useStackData)({
+    var _config = (0, _hooks.useStackData)({
       series: series,
       data: data
     });
 
     return /*#__PURE__*/React.createElement(Component, (0, _extends2["default"])({}, props, {
-      config: _objectSpread(_objectSpread({}, config), {}, {
-        series: _series
-      }),
+      config: _objectSpread(_objectSpread({}, config), _config),
       data: data
     }));
   });

package/lib/components/StereoBar.js

@@ -111,22 +111,22 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
       yScaler = _ref3.yAxis.scaler,
       fieldName = _ref3.fieldName;
   if (!data.length) return null;
-  var bandwidth = (0, _utils.getBandwidth)(step, paddingOuter);
 
-  var _getBandSeriesStepAnd = (0, _utils.getBandSeriesStepAndWidth)({
-    width: bandwidth,
+  var _getSeriesInfo = (0, _utils.getSeriesInfo)({
+    step: step,
+    bandLength: bandLength,
     paddingInner: paddingInner,
-    bandLength: bandLength
+    paddingOuter: paddingOuter
   }),
-      seriesStep = _getBandSeriesStepAnd.seriesStep,
-      seriesWidth = _getBandSeriesStepAnd.seriesWidth;
+      seriesWidth = _getSeriesInfo.seriesWidth,
+      seriesStep = _getSeriesInfo.seriesStep,
+      seriesStart = _getSeriesInfo.seriesStart;
 
   var _data = showHighlight ? getHighlightData(data, extent) : data;
 
-  var offset = (seriesWidth + paddingInner * seriesStep) * bandLength - paddingInner * seriesStep;
   var isVertical = direction === 'vertical';
-  var highlightColor = parseMultiColorToSVG(highlightFill, "highlight_gradient_" + id + "_" + fieldName);
-  var color = parseMultiColorToSVG(fill, "gradient_" + id + "_" + fieldName);
+  var highlightColor = parseMultiColorToSVG(highlightFill, 'highlight_gradient_' + id + '_' + fieldName);
+  var color = parseMultiColorToSVG(fill, 'gradient_' + id + '_' + fieldName);
   return /*#__PURE__*/_react["default"].createElement("g", {
     className: "__easyv-band"
   }, /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("filter", {
@@ -165,7 +165,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
 
     var y1 = yScaler(isVertical ? end : start);
     var y2 = yScaler(isVertical ? start : end);
-    var positionX = xScaler(x) + seriesStep * index - offset / 2;
+    var positionX = xScaler(x) - step / 2 + seriesStart + index * seriesStep;
     if (isNaN(positionX)) return null;
     var positionY = y < 0 ? y1 : y2;
     var attr = getAttr({
@@ -253,7 +253,7 @@ function deg2rad(deg) {
 }
 
 function deepCopy(obj) {
-  if ((0, _typeof2["default"])(obj) == "object") {
+  if ((0, _typeof2["default"])(obj) == 'object') {
     var o;
 
     if (Array.isArray(obj)) {
@@ -278,7 +278,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;
@@ -302,14 +302,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/lib/hooks/useExtentData.js

@@ -28,8 +28,10 @@ var stackData = function stackData(data, series) {
     return d.x;
   });
   var stacks = (0, _utils.getStacks)(series);
-  var min = 0,
-      max = 0;
+  var min, max;
+  max = min = (0, _d3v.min)(data, function (d) {
+    return d.y;
+  });
   dataMap.forEach(function (value) {
     var arr = [];
     (0, _utils.resetStacks)(stacks);

package/lib/hooks/useStackData.js

@@ -82,10 +82,6 @@ var setStackData = function setStackData(data, series, stacks) {
           });
         }
       }
-
-      currentSeries.bandLength = currentSeries.type === 'band' ? stacks.filter(function (item) {
-        return item.type == 'band';
-      }).length : 1;
     }
   });
   dataMap.clear();
@@ -129,7 +125,12 @@ var _default = function _default(_ref2) {
     resetStackData(seriesZ);
     setStackData(dataY, seriesY, stacks);
     setStackData(dataZ, seriesZ, stacks);
-    return [].concat((0, _toConsumableArray2["default"])(seriesY.values()), (0, _toConsumableArray2["default"])(seriesZ.values()));
+    return {
+      bandLength: stacks.filter(function (item) {
+        return item.type == 'band';
+      }).length,
+      series: [].concat((0, _toConsumableArray2["default"])(seriesY.values()), (0, _toConsumableArray2["default"])(seriesZ.values()))
+    };
   }, [_data, _series]);
   return tmp;
 };

package/lib/utils/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.band = band;
-exports.sortPie = exports.seriesYOrZ = exports.resetStacks = exports.reduceConfig = exports.isValidHttpUrl = exports.identity = exports.getTranslate3d = exports.getTranslate2d = exports.getTicksOfAxis = exports.getTickCoord = exports.getStacks = exports.getMousePos = exports.getMargin = exports.getIcon = exports.getGridCoord = exports.getFontStyle = exports.getDomPath = exports.getDataWithPercent = exports.getCurrentStack = exports.getColorList = exports.getChildren = exports.getBreakWord = exports.getBandwidth = exports.getBandSeriesStepAndWidth = exports.getBandBackground = exports.filterChildren = exports.dateFormat = exports.dataYOrZ = void 0;
+exports.sortPie = exports.seriesYOrZ = exports.resetStacks = exports.reduceConfig = exports.isValidHttpUrl = exports.identity = exports.getTranslate3d = exports.getTranslate2d = exports.getTicksOfAxis = exports.getTickCoord = exports.getStacks = exports.getSeriesInfo = exports.getMousePos = exports.getMargin = exports.getIcon = exports.getGridCoord = exports.getFontStyle = exports.getDomPath = exports.getDataWithPercent = exports.getCurrentStack = exports.getColorList = exports.getChildren = exports.getBreakWord = exports.getBandwidth = exports.getBandSeriesStepAndWidth = exports.getBandBackground = exports.filterChildren = exports.dateFormat = exports.dataYOrZ = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -408,15 +408,15 @@ function band() {
   };
 
   scale.range = function (_) {
-    var _ref11, _ref12;
+    var _ref11;
 
-    return arguments.length ? ((_ref11 = _, _ref12 = (0, _slicedToArray2["default"])(_ref11, 2), r0 = _ref12[0], r1 = _ref12[1], _ref11), r0 = +r0, r1 = +r1, rescale()) : [r0, r1];
+    return arguments.length ? ((_ref11 = (0, _slicedToArray2["default"])(_, 2), r0 = _ref11[0], r1 = _ref11[1]), r0 = +r0, r1 = +r1, rescale()) : [r0, r1];
   };
 
   scale.rangeRound = function (_) {
-    var _ref13, _ref14;
+    var _ref12;
 
-    return (_ref13 = _, _ref14 = (0, _slicedToArray2["default"])(_ref13, 2), r0 = _ref14[0], r1 = _ref14[1], _ref13), r0 = +r0, r1 = +r1, round = true, rescale();
+    return (_ref12 = (0, _slicedToArray2["default"])(_, 2), r0 = _ref12[0], r1 = _ref12[1]), r0 = +r0, r1 = +r1, round = true, rescale();
   };
 
   scale.bandwidth = function () {
@@ -481,14 +481,14 @@ function initRange(domain, range) {
 
 var getStacks = function getStacks(series) {
   var tmp = [];
-  series.forEach(function (_ref15, name) {
-    var type = _ref15.type,
-        stack = _ref15.stack,
-        yOrZ = _ref15.yOrZ;
-    var current = tmp.find(function (_ref16) {
-      var _type = _ref16.type,
-          _stack = _ref16.stack,
-          _yOrZ = _ref16.yOrZ;
+  series.forEach(function (_ref13, name) {
+    var type = _ref13.type,
+        stack = _ref13.stack,
+        yOrZ = _ref13.yOrZ;
+    var current = tmp.find(function (_ref14) {
+      var _type = _ref14.type,
+          _stack = _ref14.stack,
+          _yOrZ = _ref14.yOrZ;
       return _type == type && stack && _stack == stack && yOrZ == _yOrZ;
     });
 
@@ -523,9 +523,9 @@ var getStacks = function getStacks(series) {
 
 exports.getStacks = getStacks;
 
-var dataYOrZ = function dataYOrZ(data, _ref17) {
-  var seriesY = _ref17.y,
-      seriesZ = _ref17.z;
+var dataYOrZ = function dataYOrZ(data, _ref15) {
+  var seriesY = _ref15.y,
+      seriesZ = _ref15.z;
   var tmp = {
     y: [],
     z: []
@@ -577,11 +577,11 @@ var resetStacks = function resetStacks(stacks) {
 exports.resetStacks = resetStacks;
 
 var getCurrentStack = function getCurrentStack(stack, stackMap) {
-  return stackMap.find(function (_ref18) {
-    var _stack = _ref18.stack,
-        _type = _ref18.type,
-        _yOrZ = _ref18.yOrZ,
-        _s = _ref18.s;
+  return stackMap.find(function (_ref16) {
+    var _stack = _ref16.stack,
+        _type = _ref16.type,
+        _yOrZ = _ref16.yOrZ,
+        _s = _ref16.s;
     return _type == stack.type && _stack == stack.stack && _yOrZ == stack.yOrZ && _s.includes(stack.name);
   });
 };
@@ -609,10 +609,10 @@ var getBandwidth = function getBandwidth(step, paddingOuter) {
 
 exports.getBandwidth = getBandwidth;
 
-var getBandSeriesStepAndWidth = function getBandSeriesStepAndWidth(_ref19) {
-  var width = _ref19.width,
-      paddingInner = _ref19.paddingInner,
-      bandLength = _ref19.bandLength;
+var getBandSeriesStepAndWidth = function getBandSeriesStepAndWidth(_ref17) {
+  var width = _ref17.width,
+      paddingInner = _ref17.paddingInner,
+      bandLength = _ref17.bandLength;
   var seriesStep = width / (bandLength == 0 ? 1 : bandLength);
   var seriesWidth = seriesStep * (1 - paddingInner);
   return {
@@ -623,6 +623,33 @@ var getBandSeriesStepAndWidth = function getBandSeriesStepAndWidth(_ref19) {
 
 exports.getBandSeriesStepAndWidth = getBandSeriesStepAndWidth;
 
+var getSeriesInfo = function getSeriesInfo(_ref18) {
+  var step = _ref18.step,
+      _ref18$bandLength = _ref18.bandLength,
+      bandLength = _ref18$bandLength === void 0 ? 1 : _ref18$bandLength,
+      _ref18$paddingInner = _ref18.paddingInner,
+      paddingInner = _ref18$paddingInner === void 0 ? 0 : _ref18$paddingInner,
+      _ref18$paddingOuter = _ref18.paddingOuter,
+      paddingOuter = _ref18$paddingOuter === void 0 ? 0 : _ref18$paddingOuter;
+  if (bandLength == 0) return {
+    seriesWidth: step,
+    seriesStep: step,
+    seriesStart: 0,
+    width: step
+  };
+
+  var _step = step / (bandLength + paddingOuter * 2 + paddingInner * (bandLength - 1));
+
+  return {
+    seriesWidth: _step,
+    seriesStep: (1 + paddingInner) * _step,
+    seriesStart: paddingOuter * _step,
+    width: step - paddingOuter * 2 * _step
+  };
+};
+
+exports.getSeriesInfo = getSeriesInfo;
+
 var isValidHttpUrl = function isValidHttpUrl(string) {
   var url;
 
@@ -740,27 +767,27 @@ var sortPie = function sortPie(data, order) {
 
   switch (order) {
     case '':
-      _data.sort(function (_ref20, _ref21) {
-        var a = _ref20.index;
-        var b = _ref21.index;
+      _data.sort(function (_ref19, _ref20) {
+        var a = _ref19.index;
+        var b = _ref20.index;
         return (0, _d3v.ascending)(a, b);
       });
 
       break;
 
     case 'desc':
-      _data.sort(function (_ref22, _ref23) {
-        var a = _ref22.value;
-        var b = _ref23.value;
+      _data.sort(function (_ref21, _ref22) {
+        var a = _ref21.value;
+        var b = _ref22.value;
         return (0, _d3v.descending)(a, b);
       });
 
       break;
 
     case 'asc':
-      _data.sort(function (_ref24, _ref25) {
-        var a = _ref24.value;
-        var b = _ref25.value;
+      _data.sort(function (_ref23, _ref24) {
+        var a = _ref23.value;
+        var b = _ref24.value;
         return (0, _d3v.ascending)(a, b);
       });
 
@@ -809,15 +836,15 @@ var getDataWithPercent = function getDataWithPercent() {
     return d.vote;
   });
   var remainder = targetSeats - currentSum;
-  votesPerQuota.sort(function (_ref26, _ref27) {
-    var a = _ref26.value;
-    var b = _ref27.value;
+  votesPerQuota.sort(function (_ref25, _ref26) {
+    var a = _ref25.value;
+    var b = _ref26.value;
     return a % total - b % total;
   });
-  var tmp = votesPerQuota.map(function (_ref28, index) {
-    var vote = _ref28.vote,
-        value = _ref28.value,
-        data = (0, _objectWithoutProperties2["default"])(_ref28, _excluded2);
+  var tmp = votesPerQuota.map(function (_ref27, index) {
+    var vote = _ref27.vote,
+        value = _ref27.value,
+        data = (0, _objectWithoutProperties2["default"])(_ref27, _excluded2);
 
     var obj = _objectSpread(_objectSpread({}, data), {}, {
       value: value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.2.14",
+  "version": "1.3.2",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -22,7 +22,8 @@
     "@commitlint/cli": "^16.2.4",
     "@commitlint/config-conventional": "^16.2.4",
     "@types/d3": "^7.0.0",
-    "@types/react": "^17.0.14",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "babel-plugin-transform-import-styles": "^0.0.11",
     "babel-preset-env": "^1.7.0",
     "cz-conventional-changelog": "^3.3.0",

package/src/components/Background.tsx

@@ -2,11 +2,16 @@
  * 轴类图背景
  */
 import React from 'react';
-import { getBandwidth } from '../utils';
+import { getSeriesInfo } from '../utils';
 
 export default ({
   axis: { ticks, scaler, step, direction },
-  config: { background, paddingInner: paddingOuter },
+  bandLength,
+  config: {
+    background,
+    seriesIntervalWidth: paddingInner,
+    paddingInner: paddingOuter,
+  },
   length,
 }: {
   axis: {
@@ -15,11 +20,23 @@ export default ({
     step: number;
     direction: string;
   };
-  config: { background: string; paddingInner: number };
+  bandLength: number;
+  config: {
+    background: string;
+    seriesIntervalWidth: number;
+    paddingInner: number;
+  };
   length: number;
 }) => {
   const isVertical: boolean = direction === 'vertical';
-  const bandwidth = getBandwidth(step, paddingOuter);
+
+  const { width: bandwidth } = getSeriesInfo({
+    step,
+    bandLength,
+    paddingInner,
+    paddingOuter,
+  });
+
   const size = isVertical
     ? {
         width: length,

package/src/components/Band.tsx

@@ -3,11 +3,7 @@
  */
 import React, { memo } from 'react';
 import { min, max } from 'd3v7';
-import {
-  getBandBackground,
-  getBandwidth,
-  getBandSeriesStepAndWidth,
-} from '../utils';
+import { getBandBackground, getSeriesInfo } from '../utils';
 
 const getHighlightData = (data: Array<DataWithBoundType>, extent: string) => {
   switch (extent) {
@@ -89,19 +85,16 @@ export default memo(
     yAxis: { scaler: yScaler },
   }: any) => {
     if (!data.length) return null;
-    const bandwidth = getBandwidth(step, paddingOuter);
-    const { seriesStep, seriesWidth } = getBandSeriesStepAndWidth({
-      width: bandwidth,
-      paddingInner,
+
+    const { seriesWidth, seriesStep, seriesStart } = getSeriesInfo({
+      step,
       bandLength,
+      paddingInner,
+      paddingOuter,
     });
 
     const _data = showHighlight ? getHighlightData(data, extent) : data;
 
-    const offset =
-      (seriesWidth + paddingInner * seriesStep) * bandLength -
-      paddingInner * seriesStep;
-
     const isVertical = direction === 'vertical';
     return (
       <g className='__easyv-band'>
@@ -118,7 +111,10 @@ export default memo(
           ) => {
             const y1 = yScaler(isVertical ? end : start);
             const y2 = yScaler(isVertical ? start : end);
-            const positionX = xScaler(x) + seriesStep * index - offset / 2;
+
+            const positionX =
+              xScaler(x) - step / 2 + seriesStart + index * seriesStep;
+
             if (isNaN(positionX)) return null;
             const positionY = y < 0 ? y1 : y2;
             const attr = getAttr({