@xq-labs/data-ui-v2 0.1.0

package/lib/index-ce63a14a.js

@@ -0,0 +1,1364 @@
+'use strict';
+
+var echarts = require('echarts/core');
+var charts = require('echarts/charts');
+var components = require('echarts/components');
+var renderers = require('echarts/renderers');
+var withInstall = require('./with-install-6ce12163.js');
+var colors = require('./colors-55265c91.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var echarts__namespace = /*#__PURE__*/_interopNamespaceDefault(echarts);
+
+var DEFAULT_SERIES = {
+  key: 'value',
+  name: '数值',
+  kind: 'bar',
+  stack: '',
+  yAxisIndex: 0,
+  colors: []
+};
+
+/**
+ * 归一化系列类型。
+ * 当前对外仅识别 `bar` / `line`，其他值全部回退为 `bar`。
+ */
+function normalizeKind(kind) {
+  return kind === 'line' ? 'line' : 'bar';
+}
+
+/**
+ * 归一化系列所属的 Y 轴索引。
+ * 只接受大于等于 0 的整数，异常值统一回退到主轴。
+ */
+function normalizeYAxisIndex(yAxisIndex) {
+  return Number.isInteger(yAxisIndex) && yAxisIndex >= 0 ? yAxisIndex : 0;
+}
+
+/**
+ * 归一化颜色配置。
+ * 保证后续构建层总能拿到数组结构，避免额外分支判断。
+ */
+function normalizeColors(colors) {
+  return Array.isArray(colors) ? colors : [];
+}
+
+/**
+ * 统一归一化柱线图输入。
+ * 输出结果固定为：
+ * - categories：横轴类目数组
+ * - normalizedSeries：标准化后的系列定义
+ * - rawData：原始数据源
+ */
+function normalizeBarLineInput(_ref) {
+  var data = _ref.data,
+    _ref$xAxisKey = _ref.xAxisKey,
+    xAxisKey = _ref$xAxisKey === void 0 ? 'name' : _ref$xAxisKey,
+    series = _ref.series;
+  // 对外输入在这里统一收口，后续 builder/variant 只处理这一种规范结构。
+  var rawData = Array.isArray(data) ? data : [];
+  var sourceSeries = Array.isArray(series) && series.length > 0 ? series : [DEFAULT_SERIES];
+  return {
+    categories: rawData.map(function (item) {
+      return item[xAxisKey];
+    }),
+    normalizedSeries: sourceSeries.map(function (item) {
+      return colors._objectSpread2(colors._objectSpread2(colors._objectSpread2({}, DEFAULT_SERIES), item), {}, {
+        kind: normalizeKind(item.kind),
+        stack: typeof item.stack === 'string' ? item.stack : '',
+        yAxisIndex: normalizeYAxisIndex(item.yAxisIndex),
+        colors: normalizeColors(item.colors)
+      });
+    }),
+    rawData: rawData
+  };
+}
+
+var BAR_LINE_PRESETS = {
+  trend: {
+    legend: {
+      show: false
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'line'
+      }
+    }
+  },
+  compare: {
+    legend: {
+      show: true,
+      bottom: 0
+    }
+  },
+  rank: {
+    xAxis: {
+      axisLabel: {
+        interval: 0
+      }
+    }
+  }
+};
+
+/**
+ * 获取柱线图预设配置。
+ * 未命中时统一回退到 `compare`，保证预设读取稳定。
+ */
+function getBarLinePreset() {
+  var preset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'compare';
+  return BAR_LINE_PRESETS[preset] || BAR_LINE_PRESETS.compare;
+}
+
+var CUBE_LEFT_FACE_OPACITY = 0.488;
+var CUBE_RIGHT_FACE_OPACITY = 0.695;
+var CYLINDER_TOP_HSL_SHIFT = {
+  h: 3.051375194602999,
+  s: -0.018373071528752,
+  l: 0.1235294117647059
+};
+var CYLINDER_BOTTOM_HSL_SHIFT = {
+  h: -33.97606382978725,
+  s: 0.0800133022946456,
+  l: -0.0764705882352941
+};
+
+/**
+ * 解析单个系列的主色。
+ * 自定义柱体默认只读取第一项颜色；未传时按原始系列顺序回退到组件色板。
+ */
+function resolveSeriesColor$1(item, index) {
+  if (Array.isArray(item.colors) && item.colors.length > 0) {
+    return item.colors[0];
+  }
+  return colors.DEFAULT_COLORS[index % colors.DEFAULT_COLORS.length];
+}
+
+/**
+ * 归一化颜色入参。
+ * 对外约定支持 1~3 个颜色值，空值会被过滤。
+ */
+function normalizeColorInput(colors, fallbackColor) {
+  var colorList = Array.isArray(colors) ? colors.filter(Boolean) : [];
+  if (!colorList.length) {
+    return [fallbackColor];
+  }
+  return colorList.slice(0, 3);
+}
+
+/**
+ * 将十六进制颜色统一转成 `#RRGGBB`。
+ */
+function normalizeHex(color) {
+  if (typeof color !== 'string') {
+    return null;
+  }
+  var trimmedColor = color.trim();
+  if (!/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(trimmedColor)) {
+    return null;
+  }
+  if (trimmedColor.length === 4) {
+    return "#".concat(trimmedColor[1]).concat(trimmedColor[1]).concat(trimmedColor[2]).concat(trimmedColor[2]).concat(trimmedColor[3]).concat(trimmedColor[3]).toUpperCase();
+  }
+  return trimmedColor.toUpperCase();
+}
+
+/**
+ * 十六进制颜色转 RGB 对象。
+ */
+function hexToRgb(color) {
+  var hexColor = normalizeHex(color);
+  if (!hexColor) {
+    return null;
+  }
+  return {
+    r: parseInt(hexColor.slice(1, 3), 16),
+    g: parseInt(hexColor.slice(3, 5), 16),
+    b: parseInt(hexColor.slice(5, 7), 16)
+  };
+}
+
+/**
+ * RGB 对象转十六进制颜色。
+ */
+function rgbToHex(rgb) {
+  var toHex = function toHex(value) {
+    var nextValue = Math.max(0, Math.min(255, Math.round(value)));
+    return nextValue.toString(16).padStart(2, '0');
+  };
+  return "#".concat(toHex(rgb.r)).concat(toHex(rgb.g)).concat(toHex(rgb.b));
+}
+
+/**
+ * 为颜色补充透明度，统一转成 `rgba(...)`。
+ * 这样图形层只关心“用什么透明度”，不需要自己解析颜色格式。
+ */
+function applyAlphaToColor(color) {
+  var alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  var parsedAlpha = Number(alpha);
+  var normalizedAlpha = Number.isFinite(parsedAlpha) ? Math.max(0, Math.min(1, parsedAlpha)) : 1;
+  var rgb = hexToRgb(color);
+  if (rgb) {
+    return "rgba(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", ").concat(normalizedAlpha, ")");
+  }
+  if (typeof color !== 'string') {
+    return color;
+  }
+  var rgbMatch = color.trim().match(/^rgba?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)(?:\s*,\s*\d+(?:\.\d+)?)?\s*\)$/i);
+  if (!rgbMatch) {
+    return color;
+  }
+  return "rgba(".concat(Number(rgbMatch[1]), ", ").concat(Number(rgbMatch[2]), ", ").concat(Number(rgbMatch[3]), ", ").concat(normalizedAlpha, ")");
+}
+
+/**
+ * 将主色按透明度叠加到白色背景上。
+ * 方柱参考图中的侧面色不是单纯加深，而是顶面色以不同透明度叠白后的结果。
+ */
+function blendColorWithWhite(color, opacity) {
+  var rgb = hexToRgb(color);
+  if (!rgb) {
+    return color;
+  }
+  var white = 255;
+  return rgbToHex({
+    r: rgb.r * opacity + white * (1 - opacity),
+    g: rgb.g * opacity + white * (1 - opacity),
+    b: rgb.b * opacity + white * (1 - opacity)
+  });
+}
+
+/**
+ * RGB 转 HSL。
+ * 用于圆柱单色输入时按参考色关系派生顶面和底部色。
+ */
+function rgbToHsl(rgb) {
+  var red = rgb.r / 255;
+  var green = rgb.g / 255;
+  var blue = rgb.b / 255;
+  var max = Math.max(red, green, blue);
+  var min = Math.min(red, green, blue);
+  var lightness = (max + min) / 2;
+  var delta = max - min;
+  var hue = 0;
+  var saturation = 0;
+  if (delta !== 0) {
+    saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+    switch (max) {
+      case red:
+        hue = (green - blue) / delta + (green < blue ? 6 : 0);
+        break;
+      case green:
+        hue = (blue - red) / delta + 2;
+        break;
+      default:
+        hue = (red - green) / delta + 4;
+        break;
+    }
+    hue *= 60;
+  }
+  return {
+    h: hue,
+    s: saturation,
+    l: lightness
+  };
+}
+
+/**
+ * HSL 转 RGB。
+ */
+function hslToRgb(hsl) {
+  var normalizedHue = (hsl.h % 360 + 360) % 360 / 360;
+  var saturation = Math.max(0, Math.min(1, hsl.s));
+  var lightness = Math.max(0, Math.min(1, hsl.l));
+  if (saturation === 0) {
+    var value = lightness * 255;
+    return {
+      r: value,
+      g: value,
+      b: value
+    };
+  }
+  var hueToRgb = function hueToRgb(p, q, t) {
+    var next = t;
+    if (next < 0) next += 1;
+    if (next > 1) next -= 1;
+    if (next < 1 / 6) return p + (q - p) * 6 * next;
+    if (next < 1 / 2) return q;
+    if (next < 2 / 3) return p + (q - p) * (2 / 3 - next) * 6;
+    return p;
+  };
+  var q = lightness < 0.5 ? lightness * (1 + saturation) : lightness + saturation - lightness * saturation;
+  var p = 2 * lightness - q;
+  return {
+    r: hueToRgb(p, q, normalizedHue + 1 / 3) * 255,
+    g: hueToRgb(p, q, normalizedHue) * 255,
+    b: hueToRgb(p, q, normalizedHue - 1 / 3) * 255
+  };
+}
+
+/**
+ * 按 HSL 偏移规则生成派生色。
+ */
+function shiftColorByHsl(color, shift) {
+  var rgb = hexToRgb(color);
+  if (!rgb) {
+    return color;
+  }
+  var hsl = rgbToHsl(rgb);
+  return rgbToHex(hslToRgb({
+    h: hsl.h + shift.h,
+    s: hsl.s + shift.s,
+    l: hsl.l + shift.l
+  }));
+}
+
+/**
+ * 按比例调整颜色亮度。
+ * `ratio > 0` 变亮，`ratio < 0` 变暗。
+ */
+function adjustColor(color, ratio) {
+  var rgb = hexToRgb(color);
+  if (!rgb) {
+    return color;
+  }
+  var nextColor = colors._objectSpread2({}, rgb);
+  if (ratio >= 0) {
+    nextColor.r = rgb.r + (255 - rgb.r) * ratio;
+    nextColor.g = rgb.g + (255 - rgb.g) * ratio;
+    nextColor.b = rgb.b + (255 - rgb.b) * ratio;
+  } else {
+    nextColor.r = rgb.r * (1 + ratio);
+    nextColor.g = rgb.g * (1 + ratio);
+    nextColor.b = rgb.b * (1 + ratio);
+  }
+  return rgbToHex(nextColor);
+}
+
+/**
+ * 生成更亮的颜色。
+ */
+function lightenColor(color) {
+  var ratio = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.2;
+  return adjustColor(color, ratio);
+}
+
+/**
+ * 生成更暗的颜色。
+ */
+function darkenColor(color) {
+  var ratio = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.16;
+  return adjustColor(color, ratio * -1);
+}
+
+/**
+ * 解析圆柱视觉所需颜色。
+ * - `top`：顶部椭圆
+ * - `middle`：柱体主体
+ * - `bottom`：底部暗面
+ * - `legend`：图例/tooltip 颜色
+ */
+function resolveCylinderColors(colors, fallbackColor) {
+  var palette = normalizeColorInput(colors, fallbackColor);
+  if (palette.length === 1) {
+    return {
+      top: shiftColorByHsl(palette[0], CYLINDER_TOP_HSL_SHIFT),
+      middle: palette[0],
+      bottom: shiftColorByHsl(palette[0], CYLINDER_BOTTOM_HSL_SHIFT),
+      legend: palette[0]
+    };
+  }
+  if (palette.length === 2) {
+    return {
+      top: palette[0],
+      middle: palette[1],
+      bottom: darkenColor(palette[1], 0.15),
+      legend: palette[1]
+    };
+  }
+  return {
+    top: palette[0],
+    middle: palette[1],
+    bottom: palette[2],
+    legend: palette[1]
+  };
+}
+
+/**
+ * 解析方柱视觉所需颜色。
+ * - `left`：左侧暗面
+ * - `right`：右侧主面
+ * - `top`：顶面高光
+ * - `legend`：图例/tooltip 颜色
+ */
+function resolveCubeColors(colors, fallbackColor) {
+  var palette = normalizeColorInput(colors, fallbackColor);
+  if (palette.length === 1) {
+    return {
+      left: blendColorWithWhite(palette[0], CUBE_LEFT_FACE_OPACITY),
+      right: blendColorWithWhite(palette[0], CUBE_RIGHT_FACE_OPACITY),
+      top: palette[0],
+      legend: palette[0]
+    };
+  }
+  if (palette.length === 2) {
+    return {
+      left: palette[0],
+      right: palette[1],
+      top: lightenColor(palette[0], 0.4),
+      legend: palette[1]
+    };
+  }
+  return {
+    left: palette[0],
+    right: palette[1],
+    top: palette[2],
+    legend: palette[1]
+  };
+}
+
+/**
+ * 将输入值安全转成数字。
+ * 无法转换时返回 `null`，由上层决定默认值。
+ */
+function toNumber(value) {
+  var numberValue = Number(value);
+  return Number.isFinite(numberValue) ? numberValue : null;
+}
+
+/**
+ * 解析柱体宽度。
+ */
+function resolveBarWidth(barWidth) {
+  var resolvedBarWidth = toNumber(barWidth);
+  return resolvedBarWidth === null ? 18 : resolvedBarWidth;
+}
+
+/**
+ * 解析柱间距比例。
+ * 保持当前组件对外语义：数字或百分比字符串最终都按比例解释。
+ */
+function resolveBarGapRatio(barGap) {
+  if (typeof barGap === 'string') {
+    var trimmedBarGap = barGap.trim();
+    if (trimmedBarGap.endsWith('%')) {
+      var percentValue = toNumber(trimmedBarGap.slice(0, -1));
+      if (percentValue !== null) {
+        return percentValue / 100;
+      }
+    }
+    var numericValue = toNumber(trimmedBarGap);
+    if (numericValue !== null) {
+      return numericValue / 100;
+    }
+    return 0.3;
+  }
+  var numericBarGap = toNumber(barGap);
+  if (numericBarGap !== null) {
+    return numericBarGap / 100;
+  }
+  return 0.3;
+}
+
+/**
+ * 计算自定义柱体布局。
+ * 同一 stack 共用一个槽位，保证堆叠段在水平方向严格对齐。
+ */
+function createBarLayout(barSeries, barWidth, barGap) {
+  var resolvedBarWidth = resolveBarWidth(barWidth);
+  var resolvedBarGap = resolvedBarWidth * resolveBarGapRatio(barGap);
+  var slotMap = {};
+  var slotCount = 0;
+  barSeries.forEach(function (item, index) {
+    var slotKey = item.stack || "__slot_".concat(index);
+    if (slotMap[slotKey] === undefined) {
+      slotMap[slotKey] = slotCount;
+      slotCount += 1;
+    }
+  });
+  return {
+    slotMap: slotMap,
+    slotCount: slotCount || 1,
+    barWidth: resolvedBarWidth,
+    barGap: resolvedBarGap
+  };
+}
+
+/**
+ * 创建堆叠累加器。
+ * 正值和负值分别累加，避免双向数据互相污染基线。
+ */
+function createStackAccumulator(dataLength) {
+  return {
+    positive: new Array(dataLength).fill(0),
+    negative: new Array(dataLength).fill(0)
+  };
+}
+
+/**
+ * 为每个 stack 构建边界映射。
+ * 该映射用于判断当前段是否是堆叠起点/终点。
+ */
+function buildStackBoundaryMap(rawData, barSeries) {
+  var stackBoundaryMap = {};
+  barSeries.forEach(function (seriesItem, seriesIndex) {
+    if (!seriesItem.stack) {
+      return;
+    }
+    rawData.forEach(function (row, rowIndex) {
+      var rawValue = toNumber(row[seriesItem.key]) || 0;
+      if (!rawValue) {
+        return;
+      }
+      var stackKey = "".concat(seriesItem.stack, "__").concat(rowIndex);
+      var direction = rawValue > 0 ? 'positive' : 'negative';
+      if (!stackBoundaryMap[stackKey]) {
+        stackBoundaryMap[stackKey] = {
+          positive: [],
+          negative: []
+        };
+      }
+      stackBoundaryMap[stackKey][direction].push(seriesIndex);
+    });
+  });
+  return stackBoundaryMap;
+}
+
+/**
+ * 读取当前堆叠段元信息。
+ * `stackStart/stackEnd` 会直接透传给 `renderItem`，决定连接面与顶面绘制策略。
+ */
+function getStackSegmentMeta(seriesItem, seriesIndex, rowIndex, rawValue, stackBoundaryMap) {
+  if (!seriesItem.stack || !rawValue) {
+    return {
+      isStacked: false,
+      stackStart: true,
+      stackEnd: true
+    };
+  }
+  var stackKey = "".concat(seriesItem.stack, "__").concat(rowIndex);
+  var direction = rawValue > 0 ? 'positive' : 'negative';
+  var stackIndexList = stackBoundaryMap[stackKey] && stackBoundaryMap[stackKey][direction] || [];
+  return {
+    isStacked: stackIndexList.length > 1,
+    stackStart: stackIndexList[0] === seriesIndex,
+    stackEnd: stackIndexList[stackIndexList.length - 1] === seriesIndex
+  };
+}
+
+/**
+ * 将 bar 系列转换为 custom series 需要的数据协议。
+ * `value` 结构：
+ * `[类目索引, 结束值, 起点值, 原始值, 是否起点, 是否终点]`
+ */
+function buildBarSeriesData(rawData, barSeries) {
+  var stackAccumulatorMap = {};
+  var stackBoundaryMap = buildStackBoundaryMap(rawData, barSeries);
+  return barSeries.map(function (seriesItem, seriesIndex) {
+    return colors._objectSpread2(colors._objectSpread2({}, seriesItem), {}, {
+      data: rawData.map(function (row, rowIndex) {
+        var rawValue = toNumber(row[seriesItem.key]) || 0;
+        var stackMeta = getStackSegmentMeta(seriesItem, seriesIndex, rowIndex, rawValue, stackBoundaryMap);
+        var baseValue = 0;
+        var endValue = rawValue;
+        if (seriesItem.stack) {
+          if (!stackAccumulatorMap[seriesItem.stack]) {
+            stackAccumulatorMap[seriesItem.stack] = createStackAccumulator(rawData.length);
+          }
+          var accumulator = stackAccumulatorMap[seriesItem.stack];
+          if (rawValue >= 0) {
+            baseValue = accumulator.positive[rowIndex];
+            endValue = baseValue + rawValue;
+            accumulator.positive[rowIndex] = endValue;
+          } else {
+            baseValue = accumulator.negative[rowIndex];
+            endValue = baseValue + rawValue;
+            accumulator.negative[rowIndex] = endValue;
+          }
+        }
+        return {
+          value: [rowIndex, endValue, baseValue, rawValue, stackMeta.stackStart ? 1 : 0, stackMeta.stackEnd ? 1 : 0],
+          rawValue: rawValue,
+          baseValue: baseValue,
+          stackStart: stackMeta.stackStart,
+          stackEnd: stackMeta.stackEnd,
+          isStacked: stackMeta.isStacked
+        };
+      })
+    });
+  });
+}
+
+/**
+ * 计算槽位相对类目中心的偏移量。
+ */
+function getBarOffset(layout, slotIndex) {
+  if (layout.slotCount <= 1) {
+    return 0;
+  }
+  var totalWidth = layout.slotCount * layout.barWidth + (layout.slotCount - 1) * layout.barGap;
+  return -totalWidth / 2 + slotIndex * (layout.barWidth + layout.barGap) + layout.barWidth / 2;
+}
+
+/**
+ * 统一构建自定义柱图系列。
+ * 颜色映射和 renderItem 细节由具体变体自行提供。
+ */
+function buildCustomBarSeries(_ref) {
+  var rawData = _ref.rawData,
+    normalizedSeries = _ref.normalizedSeries,
+    barWidth = _ref.barWidth,
+    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 layout = createBarLayout(barSeries, barWidth, barGap);
+  var barSeriesWithData = buildBarSeriesData(rawData, barSeries);
+  return barSeriesWithData.map(function (item, index) {
+    var slotKey = item.stack || "__slot_".concat(index);
+    var slotIndex = layout.slotMap[slotKey];
+    var fallbackColor = resolveSeriesColor$1(item, item.originalIndex);
+    var colorMap = resolveColorMap ? resolveColorMap(item.colors, fallbackColor) : {
+      legend: fallbackColor
+    };
+    return {
+      name: item.name,
+      type: 'custom',
+      stack: item.stack,
+      yAxisIndex: item.yAxisIndex || 0,
+      renderItem: createRenderItem(layout, slotIndex, colorMap, item),
+      encode: {
+        x: 0,
+        y: 1,
+        tooltip: 3
+      },
+      itemStyle: {
+        color: colorMap.legend || fallbackColor
+      },
+      data: item.data,
+      z: index + 1
+    };
+  });
+}
+
+/**
+ * 归一化 flat 模式下的 `barGap`。
+ * 数字输入统一转换为 ECharts 百分比字符串，字符串则原样透传。
+ */
+function toBarGapValue(barGap) {
+  // flat 模式下透传到 echarts barGap：数字按百分比解释，字符串原样保留。
+  if (typeof barGap === 'string') {
+    return barGap;
+  }
+  if (Number.isFinite(Number(barGap))) {
+    return "".concat(Number(barGap), "%");
+  }
+  return '30%';
+}
+
+/**
+ * 为 flat 变体解析系列主色。
+ * 优先使用系列自定义颜色，其次回退到组件默认色板。
+ */
+function resolveSeriesColor(item, index) {
+  if (Array.isArray(item.colors) && item.colors.length > 0) {
+    return item.colors[0];
+  }
+  return colors.DEFAULT_COLORS[index % colors.DEFAULT_COLORS.length];
+}
+
+/**
+ * 解析平面柱图的渐变色。
+ * - 传 1 个色值：自动生成亮/中/暗三段
+ * - 传 2 个色值：首色作为顶部，次色作为主体，底部由主体自动加深
+ * - 传 3 个色值：分别映射为顶/中/底
+ */
+function resolveFlatBarColors(item, index) {
+  var fallbackColor = colors.DEFAULT_COLORS[index % colors.DEFAULT_COLORS.length];
+  var palette = Array.isArray(item.colors) ? item.colors.filter(Boolean).slice(0, 3) : [];
+  if (palette.length === 1) {
+    return {
+      start: lightenColor(palette[0], 0.18),
+      middle: palette[0],
+      end: darkenColor(palette[0], 0.12)
+    };
+  }
+  if (palette.length === 2) {
+    return {
+      start: palette[0],
+      middle: palette[1],
+      end: darkenColor(palette[1], 0.12)
+    };
+  }
+  if (palette.length === 3) {
+    return {
+      start: palette[0],
+      middle: palette[1],
+      end: palette[2]
+    };
+  }
+  return {
+    start: lightenColor(fallbackColor, 0.18),
+    middle: fallbackColor,
+    end: darkenColor(fallbackColor, 0.12)
+  };
+}
+
+/**
+ * 创建柱体纵向渐变。
+ * 让 2D 柱图与 3D 变体保持一致的明暗层次。
+ */
+function createBarGradient(colorMap) {
+  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+    offset: 0,
+    color: colorMap.start
+  }, {
+    offset: 0.55,
+    color: colorMap.middle
+  }, {
+    offset: 1,
+    color: colorMap.end
+  }]);
+}
+
+/**
+ * 生成 flat 变体的 series。
+ * 同时兼容：
+ * - bar
+ * - line
+ * - stack
+ * - yAxisIndex
+ * - colors / barWidth / barGap
+ */
+function createFlatBarLineSeries(_ref) {
+  var normalizedSeries = _ref.normalizedSeries,
+    rawData = _ref.rawData,
+    barWidth = _ref.barWidth,
+    barGap = _ref.barGap;
+  var resolvedBarWidth = Number.isFinite(Number(barWidth)) ? Number(barWidth) : 18;
+  var resolvedBarGap = toBarGapValue(barGap);
+  return normalizedSeries.map(function (item, index) {
+    var isLine = item.kind === 'line';
+    var color = resolveSeriesColor(item, index);
+    var barColorMap = resolveFlatBarColors(item, index);
+    var baseSeries = {
+      name: item.name,
+      type: isLine ? 'line' : 'bar',
+      data: rawData.map(function (row) {
+        return row[item.key];
+      }),
+      itemStyle: {
+        color: isLine ? color : createBarGradient(barColorMap)
+      }
+    };
+    if (isLine) {
+      return colors._objectSpread2(colors._objectSpread2({}, baseSeries), {}, {
+        smooth: true,
+        yAxisIndex: item.yAxisIndex
+      });
+    }
+    return colors._objectSpread2(colors._objectSpread2({}, baseSeries), {}, {
+      stack: item.stack,
+      barWidth: resolvedBarWidth,
+      barGap: resolvedBarGap
+    });
+  });
+}
+
+/**
+ * 根据系列定义决定是否需要双 Y 轴。
+ * 只有当 line 系列显式使用副轴时，才返回双轴结构。
+ */
+function createFlatYAxis(normalizedSeries) {
+  var hasSecondaryAxis = normalizedSeries.some(function (item) {
+    return item.kind === 'line' && item.yAxisIndex > 0;
+  });
+  if (!hasSecondaryAxis) {
+    return {
+      type: 'value'
+    };
+  }
+  return [{
+    type: 'value'
+  }, {
+    type: 'value',
+    position: 'right',
+    splitLine: {
+      show: false
+    }
+  }];
+}
+
+/**
+ * 生成 flat 变体的 option 片段。
+ */
+function createFlatBarLineOption(normalizedInput) {
+  var option = {
+    color: colors.DEFAULT_COLORS,
+    yAxis: createFlatYAxis(normalizedInput.normalizedSeries),
+    series: createFlatBarLineSeries(normalizedInput)
+  };
+  if (normalizedInput.includeXAxis !== false) {
+    option.xAxis = {
+      type: 'category',
+      data: normalizedInput.categories
+    };
+  }
+  return option;
+}
+
+/**
+ * 创建方柱单个面的渐变。
+ * 左右侧面使用纵向渐变，顶面使用横向渐变，增强立体面的层次感。
+ */
+function createFaceGradient(x0, y0, x1, y1, startColor, endColor) {
+  return new echarts.graphic.LinearGradient(x0, y0, x1, y1, [{
+    offset: 0,
+    color: startColor
+  }, {
+    offset: 1,
+    color: endColor
+  }]);
+}
+
+/**
+ * 创建方柱渲染器。
+ * 参考案例使用三块 polygon 拼接成立方体，而不是“正面 rect + 顶面/侧面”。
+ */
+function createCubeRenderItem(layout, slotIndex, colorMap) {
+  return function renderItem(params, api) {
+    var rowIndex = api.value(0);
+    var endValue = api.value(1);
+    var baseValue = api.value(2);
+    var rawValue = api.value(3);
+    var stackStart = api.value(4) === 1;
+    var stackEnd = api.value(5) === 1;
+    if (!rawValue) {
+      return null;
+    }
+    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: [{
+        type: 'polygon',
+        shape: {
+          points: [[centerX, topY + offsetY - 1], [centerX - halfWidth, topY], [centerX - halfWidth, connectBaseY - offsetY], [centerX, connectBaseY - 1]]
+        },
+        style: {
+          fill: leftFaceGradient,
+          stroke: colorMap.left,
+          lineWidth: 1
+        }
+      }, {
+        type: 'polygon',
+        shape: {
+          points: [[centerX, topY + offsetY - 1], [centerX + halfWidth, topY], [centerX + halfWidth, connectBaseY - offsetY], [centerX, connectBaseY - 1]]
+        },
+        style: {
+          fill: rightFaceGradient,
+          stroke: colorMap.right,
+          lineWidth: 1
+        }
+      }, {
+        type: 'polygon',
+        shape: {
+          points: [[centerX, topSurfaceY + offsetY - 1], [centerX + halfWidth, topSurfaceY], [centerX, topSurfaceY - offsetY + 1], [centerX - halfWidth, topSurfaceY]]
+        },
+        style: {
+          fill: topFaceGradient,
+          stroke: colorMap.top,
+          lineWidth: 1
+        },
+        z2: stackEnd ? 10 : 2
+      }]
+    };
+  };
+}
+
+/**
+ * 生成方柱变体 option。
+ * line 系列继续复用 flat 逻辑，只替换 bar 系列的 custom renderItem。
+ */
+function createCubeBarLineOption(normalizedInput) {
+  var flatOption = createFlatBarLineOption(normalizedInput);
+  var flatSeries = createFlatBarLineSeries(normalizedInput);
+  var customBarSeries = buildCustomBarSeries({
+    rawData: normalizedInput.rawData,
+    normalizedSeries: normalizedInput.normalizedSeries,
+    barWidth: normalizedInput.barWidth,
+    barGap: normalizedInput.barGap,
+    createRenderItem: createCubeRenderItem,
+    resolveColorMap: resolveCubeColors
+  });
+  var barIndex = 0;
+  var series = normalizedInput.normalizedSeries.map(function (item, index) {
+    if (item.kind === 'bar') {
+      var nextSeries = customBarSeries[barIndex];
+      barIndex += 1;
+      return nextSeries;
+    }
+    return flatSeries[index];
+  });
+  return colors._objectSpread2(colors._objectSpread2({}, flatOption), {}, {
+    series: series
+  });
+}
+
+/**
+ * 圆柱柱身透明度：
+ * - 顶面保持实色，避免与柱身混在一起；
+ * - 柱身增加少量透明度，让渐变层次更轻一些。
+ */
+var CYLINDER_SIDE_OPACITY = 0.82;
+
+/**
+ * 生成完整椭圆面的多边形顶点。
+ * 由于 custom graphic 不直接支持椭圆面填充，这里用多边形近似。
+ */
+function createEllipsePolygon(cx, cy, rx, ry) {
+  var points = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 24;
+  var polygonPoints = [];
+  for (var index = 0; index < points; index += 1) {
+    var angle = index / points * Math.PI * 2;
+    polygonPoints.push([cx + Math.cos(angle) * rx, cy + Math.sin(angle) * ry]);
+  }
+  return polygonPoints;
+}
+
+/**
+ * 创建圆柱渲染器。
+ * 关键点：
+ * 1. 顶部用椭圆多边形模拟高光面；
+ * 2. 主体用纵向渐变矩形模拟曲面；
+ * 3. 堆叠连接处保留底片，但不绘制深色描边和弧线，避免形成脏色带。
+ */
+function createCylinderRenderItem(layout, slotIndex, colorMap) {
+  return function renderItem(params, api) {
+    var rowIndex = api.value(0);
+    var endValue = api.value(1);
+    var baseValue = api.value(2);
+    var rawValue = api.value(3);
+    var stackStart = api.value(4) === 1;
+    var stackEnd = api.value(5) === 1;
+    if (!rawValue) {
+      return null;
+    }
+    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];
+    var connectorOverlap = stackStart ? 0 : Math.max(2, Math.round(radiusY));
+    var connectorCapOffset = stackEnd ? 0 : Math.min(2, radiusY * 0.4);
+    var showBottomPlate = isPositive && !stackStart;
+    var bottomPlateOffset = showBottomPlate ? Math.min(1.6, Math.max(0.9, radiusY * 0.32)) : 0;
+    var sideY = isPositive ? visibleEllipseY : basePoint[1] - connectorOverlap;
+    var sideHeight = isPositive ? barHeight : barHeight + connectorOverlap;
+    var topEllipseY = visibleEllipseY + connectorCapOffset;
+    var bottomPlateY = basePoint[1] + bottomPlateOffset;
+    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)
+    }]);
+    return {
+      type: 'group',
+      children: [].concat(colors._toConsumableArray(showBottomPlate ? [{
+        type: 'polygon',
+        shape: {
+          points: createEllipsePolygon(centerX, bottomPlateY, radiusX, radiusY)
+        },
+        style: {
+          fill: colorMap.bottom,
+          opacity: 0.9
+        },
+        z: 0
+      }] : []), [{
+        type: 'rect',
+        shape: {
+          x: centerX - radiusX,
+          y: sideY,
+          width: layout.barWidth,
+          height: sideHeight,
+          r: isPositive ? stackStart ? [0, 0, 6, 6] : [0, 0, 0, 0] : stackStart ? [6, 6, 0, 0] : [0, 0, 0, 0]
+        },
+        style: {
+          fill: sideGradient
+        },
+        z: 1
+      }, {
+        type: 'polygon',
+        shape: {
+          points: createEllipsePolygon(centerX, topEllipseY, radiusX, radiusY)
+        },
+        style: {
+          fill: isPositive ? colorMap.top : colorMap.bottom
+        },
+        z2: stackEnd ? 100 : 2
+      }])
+    };
+  };
+}
+
+/**
+ * 生成圆柱变体 option。
+ * 仅替换 bar 的渲染方式，line 系列继续复用 flat 变体逻辑。
+ */
+function createCylinderBarLineOption(normalizedInput) {
+  var flatOption = createFlatBarLineOption(normalizedInput);
+  var flatSeries = createFlatBarLineSeries(normalizedInput);
+  var customBarSeries = buildCustomBarSeries({
+    rawData: normalizedInput.rawData,
+    normalizedSeries: normalizedInput.normalizedSeries,
+    barWidth: normalizedInput.barWidth,
+    barGap: normalizedInput.barGap,
+    createRenderItem: createCylinderRenderItem,
+    resolveColorMap: resolveCylinderColors
+  });
+  var barIndex = 0;
+  var series = normalizedInput.normalizedSeries.map(function (item, index) {
+    if (item.kind === 'bar') {
+      var nextSeries = customBarSeries[barIndex];
+      barIndex += 1;
+      return nextSeries;
+    }
+    return flatSeries[index];
+  });
+  return colors._objectSpread2(colors._objectSpread2({}, flatOption), {}, {
+    series: series
+  });
+}
+
+var DEFAULT_VARIANT = 'flat';
+var BAR_LINE_PUBLIC_VARIANTS = ['flat', 'cylinder', 'cube'];
+
+// 公开 variant 能力在此处收口：只允许 flat / cylinder / cube。
+// 注意：three-d、square 文件仍可作为内部实现存在，但绝不加入公开分发链。
+var variantFactory = {
+  flat: createFlatBarLineOption,
+  cylinder: createCylinderBarLineOption,
+  cube: createCubeBarLineOption
+};
+
+/**
+ * 当前 builder 不再解析历史别名。
+ * 组件 props 层已经通过 validator 保证只会传入公开类型。
+ */
+function resolveVariantName(variant) {
+  return variant;
+}
+
+/**
+ * 生成所有柱线图共用的基础 option。
+ * 包括 tooltip、legend、grid、xAxis 等与具体视觉变体无关的公共结构。
+ */
+function createBaseOption(normalizedInput) {
+  return {
+    tooltip: {
+      trigger: 'axis'
+    },
+    legend: {
+      data: normalizedInput.normalizedSeries.map(function (item) {
+        return item.name;
+      })
+    },
+    grid: {
+      left: 16,
+      right: 16,
+      top: 24,
+      bottom: 32,
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: normalizedInput.categories
+    }
+  };
+}
+
+/**
+ * 构建 `BarLineChart` 最终 option。
+ * 这里会统一完成：
+ * 1. 输入归一化
+ * 2. preset 合并
+ * 3. 变体分发
+ * 4. customOption 覆盖
+ */
+function buildBarLineOption() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    data = _ref.data,
+    xAxisKey = _ref.xAxisKey,
+    series = _ref.series,
+    _ref$preset = _ref.preset,
+    preset = _ref$preset === void 0 ? 'compare' : _ref$preset,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'flat' : _ref$variant,
+    barWidth = _ref.barWidth,
+    barGap = _ref.barGap,
+    customOption = _ref.customOption;
+  var normalizedInput = normalizeBarLineInput({
+    data: data,
+    xAxisKey: xAxisKey,
+    series: series
+  });
+  var baseOption = createBaseOption(normalizedInput);
+  var presetOption = getBarLinePreset(preset);
+  var resolvedVariant = resolveVariantName(variant);
+  var createVariantOption = variantFactory[resolvedVariant] || variantFactory[DEFAULT_VARIANT];
+  var variantOption = createVariantOption(colors._objectSpread2(colors._objectSpread2({}, normalizedInput), {}, {
+    includeXAxis: false,
+    barWidth: barWidth,
+    barGap: barGap
+  }));
+  return colors.mergeChartOption(colors.mergeChartOption(baseOption, presetOption, variantOption), customOption);
+}
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+/**
+ * BarLineChart 基于 `echarts/core` 的按需模式工作。
+ * 这里显式注册柱图、折线图、自定义系列以及笛卡尔坐标系常用组件，
+ * 否则运行时虽然能生成 option，但对应主类型不会真正参与渲染。
+ */
+echarts__namespace.use([charts.BarChart, charts.LineChart, charts.CustomChart, components.TooltipComponent, components.LegendComponent, components.GridComponent, components.TitleComponent, renderers.CanvasRenderer]);
+var script = {
+  name: 'BarLineChart',
+  components: {
+    BaseChart: withInstall.BaseChart
+  },
+  props: {
+    /**
+     * 图表原始数据源。
+     * 每一项通常是一个类目对象，例如月份、地区等维度下的业务统计结果。
+     */
+    data: {
+      type: Array,
+      "default": function _default() {
+        return [];
+      }
+    },
+    /**
+     * 类目轴字段名。
+     * builder 会使用该字段从 `data` 中提取横轴类目文本。
+     */
+    xAxisKey: {
+      type: String,
+      "default": 'name'
+    },
+    /**
+     * 系列定义数组。
+     * 每项建议包含：
+     * - key: 对应数据字段
+     * - name: 系列名称
+     * - kind: bar / line
+     * - stack / yAxisIndex / colors: 可选增强配置
+     */
+    series: {
+      type: Array,
+      "default": function _default() {
+        return [];
+      }
+    },
+    /**
+     * 公开柱体风格枚举。
+     * 当前仅允许：
+     * - flat：二维柱线图
+     * - cylinder：圆柱视觉
+     * - cube：方柱视觉
+     */
+    variant: {
+      type: String,
+      "default": 'flat',
+      validator: function validator(value) {
+        return BAR_LINE_PUBLIC_VARIANTS.includes(value);
+      }
+    },
+    /**
+     * 预设配置名称。
+     * 用于切换 compare / trend / rank 等通用布局和展示细节。
+     */
+    preset: {
+      type: String,
+      "default": 'compare'
+    },
+    /**
+     * 柱体宽度。
+     * flat 模式直接透传给 ECharts；3D 变体会作为自定义图形布局宽度使用。
+     */
+    barWidth: {
+      type: Number,
+      "default": 18
+    },
+    /**
+     * 柱间距。
+     * 数字按百分比语义处理；字符串则按原样语义交给内部布局计算。
+     */
+    barGap: {
+      type: [Number, String],
+      "default": 8
+    },
+    /**
+     * 额外透传给 ECharts option 的自定义配置。
+     * 会在 base / preset / variant option 合并完成后再覆盖。
+     */
+    customOption: {
+      type: Object,
+      "default": function _default() {
+        return {};
+      }
+    },
+    /**
+     * 图表 loading 状态。
+     * 由 BaseChart 统一接管具体的 loading UI。
+     */
+    loading: {
+      type: Boolean,
+      "default": false
+    },
+    /**
+     * 图表容器高度。
+     * 支持数字像素值或原样透传的 CSS 高度字符串。
+     */
+    height: {
+      type: [String, Number],
+      "default": 320
+    }
+  },
+  computed: {
+    /**
+     * 根据数据源判断是否进入空态。
+     */
+    isEmpty: function isEmpty() {
+      return colors.isEmptyData(this.data);
+    },
+    /**
+     * 将公开 props 汇总为 builder 所需输入。
+     * 组件层不做类型分发，只负责把标准公开参数交给构建层。
+     */
+    chartOption: function chartOption() {
+      // 组件层只负责组装公开参数，不承载变体分发策略。
+      return buildBarLineOption({
+        data: this.data,
+        xAxisKey: this.xAxisKey,
+        series: this.series,
+        variant: this.variant,
+        preset: this.preset,
+        barWidth: this.barWidth,
+        barGap: this.barGap,
+        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";
+withInstall.styleInject(css_248z);
+
+/* script */
+var __vue_script__ = script;
+/* template */
+var __vue_render__ = function __vue_render__() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("BaseChart", {
+    attrs: {
+      option: _vm.chartOption,
+      loading: _vm.loading,
+      empty: _vm.isEmpty,
+      height: _vm.height
+    },
+    on: {
+      "chart-click": function chartClick($event) {
+        return _vm.$emit("chart-click", $event);
+      },
+      ready: function ready($event) {
+        return _vm.$emit("ready", $event);
+      }
+    }
+  });
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+/* style */
+var __vue_inject_styles__ = undefined;
+/* scoped */
+var __vue_scope_id__ = "data-v-e33b855e";
+/* module identifier */
+var __vue_module_identifier__ = undefined;
+/* functional template */
+var __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+var __vue_component__ = /*#__PURE__*/withInstall.normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+var BarLineChart = __vue_component__;
+
+exports.BarLineChart = BarLineChart;