@xq-labs/data-ui-v2 0.3.0 → 0.5.0

package/lib/{index-cc49894a.js → index-3dcce54f.js}

@@ -32,7 +32,8 @@ var DEFAULT_SERIES = {
   kind: 'bar',
   stack: '',
   yAxisIndex: 0,
-  colors: []
+  colors: [],
+  cubeGradientColors: []
 };
 
 /**
@@ -83,7 +84,8 @@ function normalizeBarLineInput(_ref) {
         kind: normalizeKind(item.kind),
         stack: typeof item.stack === 'string' ? item.stack : '',
         yAxisIndex: normalizeYAxisIndex(item.yAxisIndex),
-        colors: normalizeColors(item.colors)
+        colors: normalizeColors(item.colors),
+        cubeGradientColors: normalizeColors(item.cubeGradientColors)
       });
     }),
     rawData: rawData
@@ -149,6 +151,19 @@ function resolveSeriesColor$1(item, index) {
   }
   return colors.DEFAULT_COLORS[index % colors.DEFAULT_COLORS.length];
 }
+function collectBarSeries(normalizedSeries) {
+  return normalizedSeries.map(function (item, originalIndex) {
+    return colors._objectSpread2(colors._objectSpread2({}, item), {}, {
+      originalIndex: originalIndex
+    });
+  }).filter(function (item) {
+    return item.kind === 'bar';
+  }).map(function (item, barSeriesIndex) {
+    return colors._objectSpread2(colors._objectSpread2({}, item), {}, {
+      barSeriesIndex: barSeriesIndex
+    });
+  });
+}
 
 /**
  * 归一化颜色入参。
@@ -499,6 +514,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;
+}
 
 /**
  * 创建堆叠累加器。
@@ -627,13 +689,7 @@ function buildCustomBarSeries(_ref) {
     barGap = _ref.barGap,
     createRenderItem = _ref.createRenderItem,
     resolveColorMap = _ref.resolveColorMap;
-  var barSeries = normalizedSeries.map(function (item, originalIndex) {
-    return colors._objectSpread2(colors._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) {
@@ -662,6 +718,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, colors._objectSpread2(colors._objectSpread2({}, item), {}, {
+        isBackground: true
+      })),
+      encode: {
+        x: 0
+      },
+      itemStyle: {
+        color: backgroundColorMap.legend || applyAlphaToColor(fallbackColor, barBackground.opacity)
+      },
+      data: backgroundSeriesData,
+      z: 0
+    };
+  });
+}
 
 /**
  * 归一化 flat 模式下的 `barGap`。
@@ -725,6 +832,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;
+}
 
 /**
  * 创建柱体纵向渐变。
@@ -756,9 +884,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);
@@ -779,11 +910,18 @@ function createFlatBarLineSeries(_ref) {
         yAxisIndex: item.yAxisIndex
       });
     }
+    var showBackground = barBackground.show && shouldEnableBackground(item, renderedStacks);
+    var backgroundColors = resolveFlatBackgroundColors(item, index, barBackground);
     return colors._objectSpread2(colors._objectSpread2({}, baseSeries), {}, {
       stack: item.stack,
       barWidth: resolvedBarWidth,
-      barGap: resolvedBarGap
-    });
+      barGap: resolvedBarGap,
+      showBackground: showBackground
+    }, showBackground ? {
+      backgroundStyle: {
+        color: createBarGradient(backgroundColors)
+      }
+    } : {});
   });
 }
 
@@ -842,14 +980,80 @@ function createFaceGradient(x0, y0, x1, y1, startColor, endColor) {
     color: endColor
   }]);
 }
+function resolveCubeGradientFaceColors(seriesItem, colorMap) {
+  var gradientColors = seriesItem && Array.isArray(seriesItem.cubeGradientColors) ? seriesItem.cubeGradientColors : [];
+  return {
+    left: gradientColors[0] || colorMap.left,
+    right: gradientColors[1] || colorMap.right,
+    top: gradientColors[2] || colorMap.top
+  };
+}
 
 /**
  * 创建方柱渲染器。
  * 参考案例使用三块 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;
+    if (seriesItem && seriesItem.isBackground === true) {
+      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);
+      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 gradientFaceColors = resolveCubeGradientFaceColors(seriesItem, colorMap);
+    var leftFaceGradient = createFaceGradient(0, 0, 0, 1, colorMap.left, gradientFaceColors.left);
+    var rightFaceGradient = createFaceGradient(0, 0, 0, 1, colorMap.right, gradientFaceColors.right);
+    var topFaceGradient = createFaceGradient(0, 0, 1, 0, colorMap.top, gradientFaceColors.top);
     var endValue = api.value(1);
     var baseValue = api.value(2);
     var rawValue = api.value(3);
@@ -860,20 +1064,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: [{
@@ -919,6 +1116,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,
@@ -937,7 +1143,7 @@ function createCubeBarLineOption(normalizedInput) {
     return flatSeries[index];
   });
   return colors._objectSpread2(colors._objectSpread2({}, flatOption), {}, {
-    series: series
+    series: [].concat(colors._toConsumableArray(series), colors._toConsumableArray(backgroundSeries))
   });
 }
 
@@ -961,6 +1167,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(colors._toConsumableArray(topLowerArc), colors._toConsumableArray(bottomUpperArc));
+}
 
 /**
  * 创建圆柱渲染器。
@@ -969,9 +1189,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 echarts.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);
@@ -982,10 +1269,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];
@@ -1000,16 +1283,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 echarts.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(colors._toConsumableArray(showBottomPlate ? [{
@@ -1056,6 +1330,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,
@@ -1074,13 +1357,18 @@ function createCylinderBarLineOption(normalizedInput) {
     return flatSeries[index];
   });
   return colors._objectSpread2(colors._objectSpread2({}, flatOption), {}, {
-    series: series
+    series: [].concat(colors._toConsumableArray(series), colors._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。
@@ -1164,6 +1452,21 @@ function normalizeXAxisScrollConfig() {
   };
 }
 
+/**
+ * 归一化柱形背景配置。
+ * 这里统一收敛开关、颜色数量和透明度范围，避免变体层重复兜底。
+ */
+function normalizeBarBackgroundConfig() {
+  var barBackground = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var config = barBackground && colors._typeof(barBackground) === 'object' ? barBackground : {};
+  var opacity = Number(config.opacity);
+  return colors._objectSpread2(colors._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` 个类目，满足“最新数据优先展示”的看板诉求。
@@ -1234,6 +1537,7 @@ 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({
@@ -1245,10 +1549,12 @@ function buildBarLineOption() {
   var presetOption = getBarLinePreset(preset);
   var resolvedVariant = resolveVariantName(variant);
   var createVariantOption = variantFactory[resolvedVariant] || variantFactory[DEFAULT_VARIANT];
+  var normalizedBarBackground = normalizeBarBackgroundConfig(barBackground);
   var variantOption = createVariantOption(colors._objectSpread2(colors._objectSpread2({}, normalizedInput), {}, {
     includeXAxis: false,
     barWidth: barWidth,
-    barGap: barGap
+    barGap: barGap,
+    barBackground: normalizedBarBackground
   }));
   var xAxisScrollOption = createXAxisScrollOption(normalizedInput.categories, xAxisScroll);
   return colors.mergeChartOption(colors.mergeChartOption(colors.mergeChartOption(baseOption, presetOption, variantOption), xAxisScrollOption), customOption);
@@ -1305,6 +1611,7 @@ var script = {
      * - name: 系列名称
      * - kind: bar / line
      * - stack / yAxisIndex / colors: 可选增强配置
+     * - cubeGradientColors: 仅在 `variant="cube"` 时用于前景方柱三个面的渐变终点色
      */
     series: {
       type: Array,
@@ -1350,6 +1657,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 合并完成后再覆盖。
@@ -1384,6 +1702,14 @@ var script = {
       type: Boolean,
       "default": false
     },
+    /**
+     * 是否在数据为空时展示统一空状态。
+     * 关闭后仍会保留图表容器与坐标系渲染，只是不再替换成 BaseEmpty。
+     */
+    showEmptyState: {
+      type: Boolean,
+      "default": true
+    },
     /**
      * 统一状态展示配置。
      * 组件层只负责原样透传给 BaseChart，不参与文案计算。
@@ -1410,6 +1736,12 @@ var script = {
     isEmpty: function isEmpty() {
       return colors.isEmptyData(this.data);
     },
+    /**
+     * 对 BaseChart 的空态展示做一层显式开关控制。
+     */
+    chartEmpty: function chartEmpty() {
+      return this.showEmptyState && this.isEmpty;
+    },
     /**
      * 将公开 props 汇总为 builder 所需输入。
      * 组件层不做类型分发，只负责把标准公开参数交给构建层。
@@ -1424,6 +1756,7 @@ var script = {
         preset: this.preset,
         barWidth: this.barWidth,
         barGap: this.barGap,
+        barBackground: this.barBackground,
         xAxisScroll: this.xAxisScroll,
         customOption: this.customOption
       });
@@ -1431,7 +1764,7 @@ var script = {
   }
 };
 
-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";
+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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n";
 withInstall.styleInject(css_248z);
 
 /* script */
@@ -1445,7 +1778,7 @@ var __vue_render__ = function __vue_render__() {
     attrs: {
       option: _vm.chartOption,
       loading: _vm.loading,
-      empty: _vm.isEmpty,
+      empty: _vm.chartEmpty,
       "state-config": _vm.stateConfig,
       height: _vm.height
     },
@@ -1465,7 +1798,7 @@ __vue_render__._withStripped = true;
 /* style */
 var __vue_inject_styles__ = undefined;
 /* scoped */
-var __vue_scope_id__ = "data-v-0c9a6292";
+var __vue_scope_id__ = "data-v-38c7a21f";
 /* module identifier */
 var __vue_module_identifier__ = undefined;
 /* functional template */