@xq-labs/data-ui-v2 0.2.1 → 0.4.0

package/es/{index-017ccf86.js → index-914fbae3.js}

@@ -1,10 +1,10 @@
 import * as echarts from 'echarts/core';
 import { graphic } from 'echarts/core';
 import { BarChart, LineChart, CustomChart } from 'echarts/charts';
-import { TooltipComponent, LegendComponent, GridComponent, TitleComponent } from 'echarts/components';
+import { TooltipComponent, LegendComponent, GridComponent, TitleComponent, DataZoomComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import { B as BaseChart, s as styleInject, n as normalizeComponent } from './with-install-e405b463.js';
-import { _ as _objectSpread2, D as DEFAULT_COLORS, a as _toConsumableArray, m as mergeChartOption, i as isEmptyData } from './colors-ca059479.js';
+import { _ as _objectSpread2, D as DEFAULT_COLORS, a as _toConsumableArray, m as mergeChartOption, b as _typeof, i as isEmptyData } from './colors-ec0ad9ce.js';
 
 var DEFAULT_SERIES = {
   key: 'value',
@@ -129,6 +129,19 @@ function resolveSeriesColor$1(item, index) {
   }
   return DEFAULT_COLORS[index % DEFAULT_COLORS.length];
 }
+function collectBarSeries(normalizedSeries) {
+  return normalizedSeries.map(function (item, originalIndex) {
+    return _objectSpread2(_objectSpread2({}, item), {}, {
+      originalIndex: originalIndex
+    });
+  }).filter(function (item) {
+    return item.kind === 'bar';
+  }).map(function (item, barSeriesIndex) {
+    return _objectSpread2(_objectSpread2({}, item), {}, {
+      barSeriesIndex: barSeriesIndex
+    });
+  });
+}
 
 /**
  * 归一化颜色入参。
@@ -479,6 +492,53 @@ function createBarLayout(barSeries, barWidth, barGap) {
     barGap: resolvedBarGap
   };
 }
+function pickBackgroundSlotSeries(barSeries) {
+  var renderedStacks = new Set();
+  return barSeries.filter(function (item) {
+    if (!item.stack) {
+      return true;
+    }
+    if (renderedStacks.has(item.stack)) {
+      return false;
+    }
+    renderedStacks.add(item.stack);
+    return true;
+  });
+}
+function createBackgroundSeriesData(rawData) {
+  return rawData.map(function (row, rowIndex) {
+    return {
+      value: [rowIndex]
+    };
+  });
+}
+function resolveBackgroundFaceAlpha(key, opacity) {
+  var alphaMap = {
+    left: 0.82,
+    right: 1,
+    top: 1.8,
+    middle: 0.82,
+    bottom: 1.28,
+    legend: 1
+  };
+  var ratio = alphaMap[key] || 1;
+  return Math.max(0, Math.min(1, opacity * ratio));
+}
+function applyBackgroundFaceAlphaToColorMap(colorMap, opacity) {
+  return Object.keys(colorMap || {}).reduce(function (result, key) {
+    result[key] = applyAlphaToColor(colorMap[key], resolveBackgroundFaceAlpha(key, opacity));
+    return result;
+  }, {});
+}
+function normalizeBackgroundColors(barBackground, item) {
+  if (Array.isArray(barBackground && barBackground.colors) && barBackground.colors.length > 0) {
+    return barBackground.colors;
+  }
+  if (Array.isArray(item && item.colors) && item.colors.length > 0) {
+    return item.colors;
+  }
+  return undefined;
+}
 
 /**
  * 创建堆叠累加器。
@@ -607,13 +667,7 @@ function buildCustomBarSeries(_ref) {
     barGap = _ref.barGap,
     createRenderItem = _ref.createRenderItem,
     resolveColorMap = _ref.resolveColorMap;
-  var barSeries = normalizedSeries.map(function (item, originalIndex) {
-    return _objectSpread2(_objectSpread2({}, item), {}, {
-      originalIndex: originalIndex
-    });
-  }).filter(function (item) {
-    return item.kind === 'bar';
-  });
+  var barSeries = collectBarSeries(normalizedSeries);
   var layout = createBarLayout(barSeries, barWidth, barGap);
   var barSeriesWithData = buildBarSeriesData(rawData, barSeries);
   return barSeriesWithData.map(function (item, index) {
@@ -642,6 +696,57 @@ function buildCustomBarSeries(_ref) {
     };
   });
 }
+function buildBackgroundCustomBarSeries(_ref2) {
+  var rawData = _ref2.rawData,
+    normalizedSeries = _ref2.normalizedSeries,
+    barWidth = _ref2.barWidth,
+    barGap = _ref2.barGap,
+    _ref2$barBackground = _ref2.barBackground,
+    barBackground = _ref2$barBackground === void 0 ? {} : _ref2$barBackground,
+    createRenderItem = _ref2.createRenderItem,
+    resolveColorMap = _ref2.resolveColorMap;
+  if (!barBackground.show) {
+    return [];
+  }
+  var barSeries = collectBarSeries(normalizedSeries);
+  if (!barSeries.length) {
+    return [];
+  }
+  var layout = createBarLayout(barSeries, barWidth, barGap);
+  var backgroundSeriesData = createBackgroundSeriesData(rawData);
+  return pickBackgroundSlotSeries(barSeries).map(function (item) {
+    var slotKey = item.stack || "__slot_".concat(item.barSeriesIndex);
+    var slotIndex = layout.slotMap[slotKey];
+    var fallbackColor = resolveSeriesColor$1(item, item.originalIndex);
+    var palette = normalizeBackgroundColors(barBackground, item);
+    var baseColorMap = resolveColorMap ? resolveColorMap(palette, fallbackColor) : {
+      legend: fallbackColor
+    };
+    var backgroundColorMap = applyBackgroundFaceAlphaToColorMap(baseColorMap, barBackground.opacity);
+    return {
+      name: item.name,
+      type: 'custom',
+      stack: item.stack,
+      yAxisIndex: item.yAxisIndex || 0,
+      isBackground: true,
+      silent: true,
+      tooltip: {
+        show: false
+      },
+      renderItem: createRenderItem(layout, slotIndex, backgroundColorMap, _objectSpread2(_objectSpread2({}, item), {}, {
+        isBackground: true
+      })),
+      encode: {
+        x: 0
+      },
+      itemStyle: {
+        color: backgroundColorMap.legend || applyAlphaToColor(fallbackColor, barBackground.opacity)
+      },
+      data: backgroundSeriesData,
+      z: 0
+    };
+  });
+}
 
 /**
  * 归一化 flat 模式下的 `barGap`。
@@ -705,6 +810,27 @@ function resolveFlatBarColors(item, index) {
     end: darkenColor(fallbackColor, 0.12)
   };
 }
+function resolveFlatBackgroundColors(item, index, barBackground) {
+  var paletteSource = Array.isArray(barBackground.colors) && barBackground.colors.length > 0 ? {
+    colors: barBackground.colors
+  } : item;
+  var colorMap = resolveFlatBarColors(paletteSource, index);
+  return {
+    start: applyAlphaToColor(colorMap.start, barBackground.opacity),
+    middle: applyAlphaToColor(colorMap.middle, barBackground.opacity),
+    end: applyAlphaToColor(colorMap.end, barBackground.opacity)
+  };
+}
+function shouldEnableBackground(item, renderedStacks) {
+  if (!item.stack) {
+    return true;
+  }
+  if (renderedStacks.has(item.stack)) {
+    return false;
+  }
+  renderedStacks.add(item.stack);
+  return true;
+}
 
 /**
  * 创建柱体纵向渐变。
@@ -736,9 +862,12 @@ function createFlatBarLineSeries(_ref) {
   var normalizedSeries = _ref.normalizedSeries,
     rawData = _ref.rawData,
     barWidth = _ref.barWidth,
-    barGap = _ref.barGap;
+    barGap = _ref.barGap,
+    _ref$barBackground = _ref.barBackground,
+    barBackground = _ref$barBackground === void 0 ? {} : _ref$barBackground;
   var resolvedBarWidth = Number.isFinite(Number(barWidth)) ? Number(barWidth) : 18;
   var resolvedBarGap = toBarGapValue(barGap);
+  var renderedStacks = new Set();
   return normalizedSeries.map(function (item, index) {
     var isLine = item.kind === 'line';
     var color = resolveSeriesColor(item, index);
@@ -759,11 +888,18 @@ function createFlatBarLineSeries(_ref) {
         yAxisIndex: item.yAxisIndex
       });
     }
+    var showBackground = barBackground.show && shouldEnableBackground(item, renderedStacks);
+    var backgroundColors = resolveFlatBackgroundColors(item, index, barBackground);
     return _objectSpread2(_objectSpread2({}, baseSeries), {}, {
       stack: item.stack,
       barWidth: resolvedBarWidth,
-      barGap: resolvedBarGap
-    });
+      barGap: resolvedBarGap,
+      showBackground: showBackground
+    }, showBackground ? {
+      backgroundStyle: {
+        color: createBarGradient(backgroundColors)
+      }
+    } : {});
   });
 }
 
@@ -827,9 +963,63 @@ function createFaceGradient(x0, y0, x1, y1, startColor, endColor) {
  * 创建方柱渲染器。
  * 参考案例使用三块 polygon 拼接成立方体，而不是“正面 rect + 顶面/侧面”。
  */
-function createCubeRenderItem(layout, slotIndex, colorMap) {
+function createCubeRenderItem(layout, slotIndex, colorMap, seriesItem) {
   return function renderItem(params, api) {
     var rowIndex = api.value(0);
+    var offsetX = getBarOffset(layout, slotIndex);
+    var centerPoint = api.coord([rowIndex, 0]);
+    var centerX = centerPoint[0] + offsetX;
+    var halfWidth = layout.barWidth / 2;
+    var offsetY = Math.tan(Math.PI / 9) * halfWidth;
+    var leftFaceGradient = createFaceGradient(0, 0, 0, 1, colorMap.left, colorMap.left);
+    var rightFaceGradient = createFaceGradient(0, 0, 0, 1, colorMap.right, colorMap.right);
+    var topFaceGradient = createFaceGradient(0, 0, 1, 0, colorMap.top, colorMap.top);
+    if (seriesItem && seriesItem.isBackground === true) {
+      var coordSys = params.coordSys || {};
+      var clipX = coordSys.x || 0;
+      var _topY = coordSys.y || 0;
+      var width = coordSys.width || 0;
+      var _baseY = _topY + (coordSys.height || 0);
+      var _topSurfaceY = _topY + Math.abs(offsetY - 1);
+      return {
+        type: 'group',
+        clipPath: {
+          type: 'rect',
+          shape: {
+            x: clipX,
+            y: _topY,
+            width: width,
+            height: coordSys.height || 0
+          }
+        },
+        children: [{
+          type: 'polygon',
+          shape: {
+            points: [[centerX, _topSurfaceY + offsetY - 1], [centerX - halfWidth, _topSurfaceY], [centerX - halfWidth, _baseY - offsetY], [centerX, _baseY - 1]]
+          },
+          style: {
+            fill: leftFaceGradient
+          }
+        }, {
+          type: 'polygon',
+          shape: {
+            points: [[centerX, _topSurfaceY + offsetY - 1], [centerX + halfWidth, _topSurfaceY], [centerX + halfWidth, _baseY - offsetY], [centerX, _baseY - 1]]
+          },
+          style: {
+            fill: rightFaceGradient
+          }
+        }, {
+          type: 'polygon',
+          shape: {
+            points: [[centerX, _topSurfaceY + offsetY - 1], [centerX + halfWidth, _topSurfaceY], [centerX, _topSurfaceY - offsetY + 1], [centerX - halfWidth, _topSurfaceY]]
+          },
+          style: {
+            fill: topFaceGradient
+          },
+          z2: 2
+        }]
+      };
+    }
     var endValue = api.value(1);
     var baseValue = api.value(2);
     var rawValue = api.value(3);
@@ -840,20 +1030,13 @@ function createCubeRenderItem(layout, slotIndex, colorMap) {
     }
     var endPoint = api.coord([rowIndex, endValue]);
     var basePoint = api.coord([rowIndex, baseValue]);
-    var offsetX = getBarOffset(layout, slotIndex);
-    var centerX = endPoint[0] + offsetX;
     var topY = endPoint[1];
     var baseY = basePoint[1];
-    var halfWidth = layout.barWidth / 2;
-    var offsetY = Math.tan(Math.PI / 9) * halfWidth;
     var isPositive = rawValue >= 0;
     var connectorOverlap = stackStart ? 0 : Math.max(2, Math.round(offsetY));
     var connectorCapOffset = stackEnd ? 0 : Math.min(2, offsetY * 0.45);
     var connectBaseY = isPositive ? baseY + connectorOverlap : baseY - connectorOverlap;
     var topSurfaceY = topY + connectorCapOffset;
-    var leftFaceGradient = createFaceGradient(0, 0, 0, 1, colorMap.left, colorMap.left);
-    var rightFaceGradient = createFaceGradient(0, 0, 0, 1, colorMap.right, colorMap.right);
-    var topFaceGradient = createFaceGradient(0, 0, 1, 0, colorMap.top, colorMap.top);
     return {
       type: 'group',
       children: [{
@@ -899,6 +1082,15 @@ function createCubeRenderItem(layout, slotIndex, colorMap) {
 function createCubeBarLineOption(normalizedInput) {
   var flatOption = createFlatBarLineOption(normalizedInput);
   var flatSeries = createFlatBarLineSeries(normalizedInput);
+  var backgroundSeries = buildBackgroundCustomBarSeries({
+    rawData: normalizedInput.rawData,
+    normalizedSeries: normalizedInput.normalizedSeries,
+    barWidth: normalizedInput.barWidth,
+    barGap: normalizedInput.barGap,
+    barBackground: normalizedInput.barBackground,
+    createRenderItem: createCubeRenderItem,
+    resolveColorMap: resolveCubeColors
+  });
   var customBarSeries = buildCustomBarSeries({
     rawData: normalizedInput.rawData,
     normalizedSeries: normalizedInput.normalizedSeries,
@@ -917,7 +1109,7 @@ function createCubeBarLineOption(normalizedInput) {
     return flatSeries[index];
   });
   return _objectSpread2(_objectSpread2({}, flatOption), {}, {
-    series: series
+    series: [].concat(_toConsumableArray(series), _toConsumableArray(backgroundSeries))
   });
 }
 
@@ -941,6 +1133,20 @@ function createEllipsePolygon(cx, cy, rx, ry) {
   }
   return polygonPoints;
 }
+function createEllipseArcPoints(cx, cy, rx, ry, startAngle, endAngle) {
+  var points = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 12;
+  var arcPoints = [];
+  for (var index = 0; index <= points; index += 1) {
+    var angle = startAngle + (endAngle - startAngle) * index / points;
+    arcPoints.push([cx + Math.cos(angle) * rx, cy + Math.sin(angle) * ry]);
+  }
+  return arcPoints;
+}
+function createCylinderSidePolygon(cx, topCy, bottomCy, rx, ry) {
+  var topLowerArc = createEllipseArcPoints(cx, topCy, rx, ry, Math.PI, 0);
+  var bottomUpperArc = createEllipseArcPoints(cx, bottomCy, rx, ry, 0, -Math.PI);
+  return [].concat(_toConsumableArray(topLowerArc), _toConsumableArray(bottomUpperArc));
+}
 
 /**
  * 创建圆柱渲染器。
@@ -949,9 +1155,76 @@ function createEllipsePolygon(cx, cy, rx, ry) {
  * 2. 主体用纵向渐变矩形模拟曲面；
  * 3. 堆叠连接处保留底片，但不绘制深色描边和弧线，避免形成脏色带。
  */
-function createCylinderRenderItem(layout, slotIndex, colorMap) {
+function createCylinderRenderItem(layout, slotIndex, colorMap, seriesItem) {
   return function renderItem(params, api) {
     var rowIndex = api.value(0);
+    var offsetX = getBarOffset(layout, slotIndex);
+    var centerPoint = api.coord([rowIndex, 0]);
+    var centerX = centerPoint[0] + offsetX;
+    var radiusX = layout.barWidth / 2;
+    var radiusY = radiusX * 0.4;
+    var createSideGradient = function createSideGradient(topColor, middleColor, bottomColor) {
+      var opacity = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : CYLINDER_SIDE_OPACITY;
+      return new graphic.LinearGradient(0, 0, 0, 1, [{
+        offset: 0,
+        color: opacity === null ? topColor : applyAlphaToColor(topColor, opacity)
+      }, {
+        offset: 0.55,
+        color: opacity === null ? middleColor : applyAlphaToColor(middleColor, opacity)
+      }, {
+        offset: 1,
+        color: opacity === null ? bottomColor : applyAlphaToColor(bottomColor, opacity)
+      }]);
+    };
+    if (seriesItem && seriesItem.isBackground === true) {
+      var coordSys = params.coordSys || {};
+      var clipX = coordSys.x || 0;
+      var topY = coordSys.y || 0;
+      var width = coordSys.width || 0;
+      var height = coordSys.height || 0;
+      var _topEllipseY = topY + radiusY;
+      var bottomEllipseY = topY + height - radiusY;
+      return {
+        type: 'group',
+        clipPath: {
+          type: 'rect',
+          shape: {
+            x: clipX,
+            y: topY,
+            width: width,
+            height: height
+          }
+        },
+        children: [{
+          type: 'polygon',
+          shape: {
+            points: createEllipsePolygon(centerX, bottomEllipseY, radiusX, radiusY)
+          },
+          style: {
+            fill: colorMap.bottom
+          },
+          z: 0
+        }, {
+          type: 'polygon',
+          shape: {
+            points: createCylinderSidePolygon(centerX, _topEllipseY, bottomEllipseY, radiusX, radiusY)
+          },
+          style: {
+            fill: createSideGradient(colorMap.middle, colorMap.middle, colorMap.bottom, null)
+          },
+          z: 1
+        }, {
+          type: 'polygon',
+          shape: {
+            points: createEllipsePolygon(centerX, _topEllipseY, radiusX, radiusY)
+          },
+          style: {
+            fill: colorMap.top
+          },
+          z2: 2
+        }]
+      };
+    }
     var endValue = api.value(1);
     var baseValue = api.value(2);
     var rawValue = api.value(3);
@@ -962,10 +1235,6 @@ function createCylinderRenderItem(layout, slotIndex, colorMap) {
     }
     var endPoint = api.coord([rowIndex, endValue]);
     var basePoint = api.coord([rowIndex, baseValue]);
-    var offsetX = getBarOffset(layout, slotIndex);
-    var centerX = endPoint[0] + offsetX;
-    var radiusX = layout.barWidth / 2;
-    var radiusY = radiusX * 0.4;
     var isPositive = rawValue >= 0;
     var barHeight = Math.abs(endPoint[1] - basePoint[1]);
     var visibleEllipseY = endPoint[1];
@@ -980,16 +1249,7 @@ function createCylinderRenderItem(layout, slotIndex, colorMap) {
     var gradientTopColor = isPositive ? colorMap.middle : darkenColor(colorMap.bottom, 0.05);
     var gradientMiddleColor = colorMap.middle;
     var gradientBottomColor = isPositive ? colorMap.bottom : colorMap.middle;
-    var sideGradient = new graphic.LinearGradient(0, 0, 0, 1, [{
-      offset: 0,
-      color: applyAlphaToColor(gradientTopColor, CYLINDER_SIDE_OPACITY)
-    }, {
-      offset: 0.55,
-      color: applyAlphaToColor(gradientMiddleColor, CYLINDER_SIDE_OPACITY)
-    }, {
-      offset: 1,
-      color: applyAlphaToColor(gradientBottomColor, CYLINDER_SIDE_OPACITY)
-    }]);
+    var sideGradient = createSideGradient(gradientTopColor, gradientMiddleColor, gradientBottomColor);
     return {
       type: 'group',
       children: [].concat(_toConsumableArray(showBottomPlate ? [{
@@ -1036,6 +1296,15 @@ function createCylinderRenderItem(layout, slotIndex, colorMap) {
 function createCylinderBarLineOption(normalizedInput) {
   var flatOption = createFlatBarLineOption(normalizedInput);
   var flatSeries = createFlatBarLineSeries(normalizedInput);
+  var backgroundSeries = buildBackgroundCustomBarSeries({
+    rawData: normalizedInput.rawData,
+    normalizedSeries: normalizedInput.normalizedSeries,
+    barWidth: normalizedInput.barWidth,
+    barGap: normalizedInput.barGap,
+    barBackground: normalizedInput.barBackground,
+    createRenderItem: createCylinderRenderItem,
+    resolveColorMap: resolveCylinderColors
+  });
   var customBarSeries = buildCustomBarSeries({
     rawData: normalizedInput.rawData,
     normalizedSeries: normalizedInput.normalizedSeries,
@@ -1054,11 +1323,18 @@ function createCylinderBarLineOption(normalizedInput) {
     return flatSeries[index];
   });
   return _objectSpread2(_objectSpread2({}, flatOption), {}, {
-    series: series
+    series: [].concat(_toConsumableArray(series), _toConsumableArray(backgroundSeries))
   });
 }
 
 var DEFAULT_VARIANT = 'flat';
+var DEFAULT_X_AXIS_SCROLL_VISIBLE_COUNT = 8;
+var DEFAULT_X_AXIS_SCROLL_GRID_BOTTOM = 56;
+var DEFAULT_BAR_BACKGROUND = {
+  show: false,
+  colors: [],
+  opacity: 1
+};
 var BAR_LINE_PUBLIC_VARIANTS = ['flat', 'cylinder', 'cube'];
 
 // 公开 variant 能力在此处收口：只允许 flat / cylinder / cube。
@@ -1104,6 +1380,108 @@ function createBaseOption(normalizedInput) {
     }
   };
 }
+function isValidNumber(value) {
+  return Number.isFinite(Number(value));
+}
+function normalizePositiveInteger(value, fallback) {
+  var normalizedValue = Number(value);
+  if (!Number.isFinite(normalizedValue) || normalizedValue <= 0) {
+    return fallback;
+  }
+  return Math.floor(normalizedValue);
+}
+function normalizeStartIndex(startIndex) {
+  if (!isValidNumber(startIndex)) {
+    return null;
+  }
+  var normalizedStartIndex = Math.floor(Number(startIndex));
+  return normalizedStartIndex >= 0 ? normalizedStartIndex : null;
+}
+function toPercent(value, total) {
+  return Number((value / total * 100).toFixed(2));
+}
+
+/**
+ * 归一化横轴滚动配置。
+ * 该配置只服务 X 轴类目过多的场景，不扩展 Y 轴滚动，避免 API 语义变复杂。
+ */
+function normalizeXAxisScrollConfig() {
+  var xAxisScroll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var scrollConfig = xAxisScroll && _typeof(xAxisScroll) === 'object' ? xAxisScroll : {};
+  return {
+    enabled: scrollConfig.enabled === true,
+    visibleCount: normalizePositiveInteger(scrollConfig.visibleCount, DEFAULT_X_AXIS_SCROLL_VISIBLE_COUNT),
+    startPosition: scrollConfig.startPosition === 'start' ? 'start' : 'end',
+    startIndex: normalizeStartIndex(scrollConfig.startIndex),
+    showSlider: scrollConfig.showSlider !== false,
+    inside: scrollConfig.inside !== false
+  };
+}
+
+/**
+ * 归一化柱形背景配置。
+ * 这里统一收敛开关、颜色数量和透明度范围，避免变体层重复兜底。
+ */
+function normalizeBarBackgroundConfig() {
+  var barBackground = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var config = barBackground && _typeof(barBackground) === 'object' ? barBackground : {};
+  var opacity = Number(config.opacity);
+  return _objectSpread2(_objectSpread2({}, DEFAULT_BAR_BACKGROUND), {}, {
+    show: config.show === true,
+    colors: Array.isArray(config.colors) ? config.colors.filter(Boolean).slice(0, 3) : [],
+    opacity: Number.isFinite(opacity) ? Math.max(0, Math.min(1, opacity)) : 1
+  });
+}
+
+/**
+ * 根据横轴类目数量生成 ECharts dataZoom。
+ * 默认从末尾向前取 `visibleCount` 个类目，满足“最新数据优先展示”的看板诉求。
+ */
+function createXAxisScrollOption() {
+  var categories = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var xAxisScroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var scrollConfig = normalizeXAxisScrollConfig(xAxisScroll);
+  var totalCount = Array.isArray(categories) ? categories.length : 0;
+  if (!scrollConfig.enabled || totalCount <= scrollConfig.visibleCount) {
+    return {};
+  }
+  var windowSize = Math.min(scrollConfig.visibleCount, totalCount);
+  var maxStartIndex = totalCount - windowSize;
+  var resolvedStartIndex = scrollConfig.startIndex !== null ? Math.min(scrollConfig.startIndex, maxStartIndex) : scrollConfig.startPosition === 'start' ? 0 : maxStartIndex;
+  var start = toPercent(resolvedStartIndex, totalCount);
+  var end = toPercent(resolvedStartIndex + windowSize, totalCount);
+  var dataZoom = [];
+  if (scrollConfig.showSlider) {
+    dataZoom.push({
+      type: 'slider',
+      xAxisIndex: 0,
+      start: start,
+      end: end,
+      height: 14,
+      bottom: 8,
+      brushSelect: false
+    });
+  }
+  if (scrollConfig.inside) {
+    dataZoom.push({
+      type: 'inside',
+      xAxisIndex: 0,
+      start: start,
+      end: end,
+      zoomLock: true
+    });
+  }
+  if (dataZoom.length === 0) {
+    return {};
+  }
+  return _objectSpread2(_objectSpread2({}, scrollConfig.showSlider ? {
+    grid: {
+      bottom: DEFAULT_X_AXIS_SCROLL_GRID_BOTTOM
+    }
+  } : {}), {}, {
+    dataZoom: dataZoom
+  });
+}
 
 /**
  * 构建 `BarLineChart` 最终 option。
@@ -1111,7 +1489,8 @@ function createBaseOption(normalizedInput) {
  * 1. 输入归一化
  * 2. preset 合并
  * 3. 变体分发
- * 4. customOption 覆盖
+ * 4. X 轴滚动配置合并
+ * 5. customOption 覆盖
  */
 function buildBarLineOption() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
@@ -1124,6 +1503,8 @@ function buildBarLineOption() {
     variant = _ref$variant === void 0 ? 'flat' : _ref$variant,
     barWidth = _ref.barWidth,
     barGap = _ref.barGap,
+    barBackground = _ref.barBackground,
+    xAxisScroll = _ref.xAxisScroll,
     customOption = _ref.customOption;
   var normalizedInput = normalizeBarLineInput({
     data: data,
@@ -1134,12 +1515,15 @@ function buildBarLineOption() {
   var presetOption = getBarLinePreset(preset);
   var resolvedVariant = resolveVariantName(variant);
   var createVariantOption = variantFactory[resolvedVariant] || variantFactory[DEFAULT_VARIANT];
+  var normalizedBarBackground = normalizeBarBackgroundConfig(barBackground);
   var variantOption = createVariantOption(_objectSpread2(_objectSpread2({}, normalizedInput), {}, {
     includeXAxis: false,
     barWidth: barWidth,
-    barGap: barGap
+    barGap: barGap,
+    barBackground: normalizedBarBackground
   }));
-  return mergeChartOption(mergeChartOption(baseOption, presetOption, variantOption), customOption);
+  var xAxisScrollOption = createXAxisScrollOption(normalizedInput.categories, xAxisScroll);
+  return mergeChartOption(mergeChartOption(mergeChartOption(baseOption, presetOption, variantOption), xAxisScrollOption), customOption);
 }
 
 //
@@ -1161,7 +1545,7 @@ function buildBarLineOption() {
  * 这里显式注册柱图、折线图、自定义系列以及笛卡尔坐标系常用组件，
  * 否则运行时虽然能生成 option，但对应主类型不会真正参与渲染。
  */
-echarts.use([BarChart, LineChart, CustomChart, TooltipComponent, LegendComponent, GridComponent, TitleComponent, CanvasRenderer]);
+echarts.use([BarChart, LineChart, CustomChart, TooltipComponent, LegendComponent, GridComponent, TitleComponent, DataZoomComponent, CanvasRenderer]);
 var script = {
   name: 'BarLineChart',
   components: {
@@ -1238,6 +1622,17 @@ var script = {
       type: [Number, String],
       "default": 8
     },
+    /**
+     * 柱形背景配置。
+     * 仅对支持背景柱的柱系列生效，builder 会负责归一化 `show/colors/opacity`
+     * 并交由具体变体决定最终渲染策略。
+     */
+    barBackground: {
+      type: Object,
+      "default": function _default() {
+        return {};
+      }
+    },
     /**
      * 额外透传给 ECharts option 的自定义配置。
      * 会在 base / preset / variant option 合并完成后再覆盖。
@@ -1248,6 +1643,22 @@ var script = {
         return {};
       }
     },
+    /**
+     * X 轴类目滚动配置。
+     * 仅控制横轴，不扩展 Y 轴；适合月份、日期、地区等类目数量较多的看板场景。
+     * 常用字段：
+     * - enabled: 是否开启 X 轴滚动
+     * - visibleCount: 初始窗口内展示的类目数量，默认按 8 个处理
+     * - startPosition: 初始窗口位置，默认 end，即展示最新一段数据
+     * - startIndex: 指定窗口起始索引；传入合法数字时优先级高于 startPosition
+     * - showSlider / inside: 分别控制底部滚动条与图表内部滚轮/触控滚动
+     */
+    xAxisScroll: {
+      type: Object,
+      "default": function _default() {
+        return {};
+      }
+    },
     /**
      * 图表 loading 状态。
      * 由 BaseChart 统一接管组件层遮罩式 loading UI。
@@ -1296,13 +1707,15 @@ var script = {
         preset: this.preset,
         barWidth: this.barWidth,
         barGap: this.barGap,
+        barBackground: this.barBackground,
+        xAxisScroll: this.xAxisScroll,
         customOption: this.customOption
       });
     }
   }
 };
 
-var css_248z = "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n";
+var css_248z = "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n";
 styleInject(css_248z);
 
 /* script */
@@ -1336,7 +1749,7 @@ __vue_render__._withStripped = true;
 /* style */
 var __vue_inject_styles__ = undefined;
 /* scoped */
-var __vue_scope_id__ = "data-v-1ad2414e";
+var __vue_scope_id__ = "data-v-4e3be95d";
 /* module identifier */
 var __vue_module_identifier__ = undefined;
 /* functional template */