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

package/es/{index-d151eeca.js → index-78b6b881.js}

@@ -1,5 +1,6 @@
-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, i as isEmptyData } from './colors-ec0ad9ce.js';
 import * as echarts from 'echarts/core';
+import { SeriesModel } from 'echarts/core';
 import { PieChart as PieChart$1 } from 'echarts/charts';
 import { TooltipComponent, LegendComponent, GridComponent, TitleComponent, GraphicComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
@@ -69,10 +70,11 @@ var PIE_HEIGHT_MODE = {
   VALUE: 'value'
 };
 var DEFAULT_HEIGHT_RANGE = {
-  min: 20,
-  max: 80
+  min: 10,
+  max: 25
 };
-var DEFAULT_3D_VIEW_ALPHA = 28;
+var DEFAULT_3D_VIEW_DISTANCE = 120;
+var DEFAULT_3D_VIEW_ALPHA = 55;
 var DEFAULT_INTERNAL_DIAMETER_RATIO = 0.6;
 var DEFAULT_ROSE_RADIUS_RANGE = [0.75, 1.15];
 var DEFAULT_LABEL_OPTIONS = {
@@ -90,6 +92,17 @@ var DEFAULT_LABEL_OPTIONS = {
   verticalGap: 8,
   radialOffset: 0.12
 };
+var DEFAULT_TOOLTIP_STYLE = {
+  backgroundColor: '#fff',
+  borderColor: 'transparent',
+  borderWidth: 0,
+  padding: [8, 12],
+  textStyle: {
+    color: '#333',
+    fontSize: 12
+  },
+  extraCssText: 'box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); border-radius: 4px;'
+};
 
 /**
  * 将输入值转为安全数字。
@@ -196,6 +209,9 @@ function buildPieChartData(data) {
 function replaceLabelTemplate(template, params) {
   return template.replace(/\{b\}/g, params.name).replace(/\{c\}/g, params.value).replace(/\{d\}/g, params.percent);
 }
+function escapeTooltipHtml(value) {
+  return String(value).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
 function formatPieLabelText(formatter, params) {
   if (typeof formatter === 'function') {
     return formatter(params);
@@ -205,29 +221,65 @@ function formatPieLabelText(formatter, params) {
   }
   return "".concat(params.name, "\n").concat(params.percent, "%");
 }
+function createFallbackTooltipMarker(color) {
+  var markerColor = escapeTooltipHtml(color || '#6B98F8');
+  return "<span style=\"display:inline-block;margin-right:4px;border-radius:50%;width:10px;height:10px;background-color:".concat(markerColor, ";\"></span>");
+}
+function formatPieTooltipContent(_ref) {
+  var marker = _ref.marker,
+    name = _ref.name,
+    value = _ref.value,
+    color = _ref.color;
+  var safeMarker = marker || createFallbackTooltipMarker(color);
+  return "".concat(safeMarker).concat(escapeTooltipHtml(name), ":").concat(escapeTooltipHtml(value));
+}
+
+/**
+ * 创建饼图统一 hover tooltip 样式。
+ * 默认呈现为白底阴影卡片，内容为“彩色圆点 + 名称:值”，贴近业务看板常见展示形态。
+ */
+function createPieTooltipOption(formatter) {
+  return _objectSpread2(_objectSpread2({}, DEFAULT_TOOLTIP_STYLE), {}, {
+    formatter: formatter
+  });
+}
+function formatPie2DTooltip() {
+  var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return formatPieTooltipContent({
+    marker: params.marker,
+    name: params.name === undefined ? '' : params.name,
+    value: params.value === undefined ? '' : params.value,
+    color: params.color
+  });
+}
 
 /**
  * 格式化 3D 饼图默认 tooltip 文案。
  * surface 系列 hover 时拿到的 `params.value` 实际是参数方程采样值，
  * 不能直接当业务值展示，因此统一回退到扇区自身的 `pieData`。
  */
-function formatPieTooltipText(name, value, percent) {
-  return "".concat(name, ": ").concat(value, " (").concat(percent, "%)");
+function formatPie3DTooltip(params, pieData) {
+  return formatPieTooltipContent({
+    marker: params && params.marker,
+    name: pieData && pieData.name !== undefined ? pieData.name : '',
+    value: pieData && pieData.value !== undefined ? pieData.value : 0,
+    color: pieData && pieData.itemStyle && pieData.itemStyle.color
+  });
 }
 
 /**
  * 为单个 3D 扇区生成专用 tooltip。
  * 这样即使鼠标落在 surface 网格采样点上，展示的仍然是业务名称、原始值与百分比。
  */
-function createPie3DTooltip(pieData, totalValue) {
+function createPie3DTooltip(pieData) {
   var value = toNumber(pieData && pieData.value, 0);
-  var percent = totalValue > 0 ? Number((value / totalValue * 100).toFixed(2)) : 0;
   var name = pieData && pieData.name !== undefined ? pieData.name : '';
-  return {
-    formatter: function formatter() {
-      return formatPieTooltipText(name, value, percent);
-    }
-  };
+  return createPieTooltipOption(function (params) {
+    return formatPie3DTooltip(params, _objectSpread2(_objectSpread2({}, pieData), {}, {
+      name: name,
+      value: value
+    }));
+  });
 }
 function multiplyMat4Vec4(matrix, vector) {
   return [matrix[0] * vector[0] + matrix[4] * vector[1] + matrix[8] * vector[2] + matrix[12] * vector[3], matrix[1] * vector[0] + matrix[5] * vector[1] + matrix[9] * vector[2] + matrix[13] * vector[3], matrix[2] * vector[0] + matrix[6] * vector[1] + matrix[10] * vector[2] + matrix[14] * vector[3], matrix[3] * vector[0] + matrix[7] * vector[1] + matrix[11] * vector[2] + matrix[15] * vector[3]];
@@ -436,11 +488,9 @@ function createHeightValues(values, mode, minHeight, maxHeight) {
   }
   return mapValueToRange(values, safeMinHeight, safeMaxHeight);
 }
-function createAdaptiveViewControl(showLabelLine, maxHeight) {
-  var baseDistance = showLabelLine ? 175 : 180;
-  var extraDistance = Math.max(0, maxHeight - 200) * 0.18;
+function createDefaultViewControl() {
   return {
-    distance: baseDistance + extraDistance,
+    distance: DEFAULT_3D_VIEW_DISTANCE,
     alpha: DEFAULT_3D_VIEW_ALPHA
   };
 }
@@ -577,9 +627,6 @@ function buildPie3DSeries(pieData) {
   var valueList = renderPieData.map(function (item) {
     return Math.max(0, toNumber(item.value, 0));
   });
-  var totalValue = valueList.reduce(function (sum, value) {
-    return sum + value;
-  }, 0);
   var angleValueList = getAngleValueList(valueList);
   var totalAngleValue = angleValueList.reduce(function (sum, value) {
     return sum + value;
@@ -613,7 +660,7 @@ function buildPie3DSeries(pieData) {
         selected: false,
         hovered: false
       },
-      tooltip: createPie3DTooltip(item, totalValue),
+      tooltip: createPie3DTooltip(item),
       itemStyle: _objectSpread2({}, item.itemStyle),
       parametricEquation: getParametricEquation(startRatio, endRatio, false, false, geometry)
     };
@@ -708,7 +755,7 @@ function createPie3DOption(input, variant) {
     hideZeroValueSlices: input.hideZeroValueSlices !== false
   };
   var pie3D = buildPie3DSeries(data, chartConfig);
-  var viewControl = createAdaptiveViewControl(chartConfig.showLabelLine, safeMaxHeight);
+  var viewControl = createDefaultViewControl();
   return {
     xAxis3D: {
       min: -pie3D.axisLimit,
@@ -895,10 +942,9 @@ function buildPieOption() {
   });
   var baseOption = {
     color: DEFAULT_COLORS,
-    tooltip: {
-      trigger: 'item',
-      formatter: '{b}: {c} ({d}%)'
-    },
+    tooltip: _objectSpread2({
+      trigger: 'item'
+    }, createPieTooltipOption(formatPie2DTooltip)),
     legend: {
       data: normalizedData.map(function (item) {
         return item.name;
@@ -927,33 +973,26 @@ function buildPieOption() {
   return mergeChartOption(mergeChartOption(baseOption, presetOption, variantOption), customOption);
 }
 
-var runtimePromise = null;
-var ECHARTS_GL_PACKAGE_NAME = 'echarts-gl';
-var MISSING_RUNTIME_MESSAGE = '使用 PieChart 3D 能力需要安装 echarts-gl，请执行 npm install echarts-gl。';
-var createMissingRuntimeError = function createMissingRuntimeError(error) {
-  var runtimeError = new Error(MISSING_RUNTIME_MESSAGE);
-  runtimeError.cause = error;
-  return runtimeError;
-};
-var importRuntime = function importRuntime() {
-  var dynamicImport = new Function('packageName', 'return import(packageName)');
-  return dynamicImport(ECHARTS_GL_PACKAGE_NAME);
+var SURFACE_SERIES_TYPE = 'series.surface';
+var MISSING_RUNTIME_MESSAGE = "使用 PieChart 3D 能力前，请先在业务页面中执行 import '@xq-labs/data-ui-v2/pie-chart/3d-runtime'。";
+var hasSurfaceSeriesRuntime = function hasSurfaceSeriesRuntime() {
+  return SeriesModel && (typeof SeriesModel.getClass === 'function' && !!SeriesModel.getClass('series', 'surface') || typeof SeriesModel.getClassesByMainType === 'function' && SeriesModel.getClassesByMainType('series').some(function (seriesClass) {
+    return seriesClass && seriesClass.type === SURFACE_SERIES_TYPE;
+  }));
 };
 
 /**
- * 按需加载 echarts-gl 运行时。
+ * 检测 PieChart 3D 运行时是否已经由业务项目接入。
  *
- * 这里不能在模块顶层静态加载 echarts-gl，否则只使用 2D 饼图的业务方也会被迫安装。
- * 加载结果会被缓存，避免同一个页面内多个 3D 饼图重复触发运行时加载。
+ * 方案 B 修订版下，组件库不再负责动态加载 `echarts-gl`，
+ * 而是要求业务项目在使用 3D PieChart 的页面中显式执行桥接入口：
+ * `import '@xq-labs/data-ui-v2/pie-chart/3d-runtime'`
  */
 function ensureEchartsGlRuntime() {
-  if (!runtimePromise) {
-    runtimePromise = importRuntime()["catch"](function (error) {
-      runtimePromise = null;
-      throw createMissingRuntimeError(error);
-    });
+  if (hasSurfaceSeriesRuntime()) {
+    return Promise.resolve();
   }
-  return runtimePromise;
+  return Promise.reject(new Error(MISSING_RUNTIME_MESSAGE));
 }
 
 echarts.use([PieChart$1, TooltipComponent, LegendComponent, GridComponent, TitleComponent, GraphicComponent, CanvasRenderer]);
@@ -1028,7 +1067,7 @@ var script = {
      */
     minHeight: {
       type: Number,
-      "default": 20
+      "default": 10
     },
     /**
      * 3D 模式下的最大扇区高度。
@@ -1036,7 +1075,7 @@ var script = {
      */
     maxHeight: {
       type: Number,
-      "default": 80
+      "default": 25
     },
     /**
      * 环图内径比例。
@@ -1139,13 +1178,13 @@ var script = {
     },
     /**
      * 判断当前是否进入 3D 饼图能力。
-     * 只有 3D 才需要加载 echarts-gl，2D 场景不应触发任何 3D 运行时依赖。
+     * 只有 3D 才需要 echarts-gl 桥接入口，2D 场景不应触发任何 3D 运行时依赖。
      */
     is3D: function is3D() {
       return this.dimension === '3d';
     },
     /**
-     * 标识 echarts-gl 是否已经加载完成。
+     * 标识 echarts-gl 运行时是否已经注册完成。
      * 3D option 只有在运行时就绪后才会生成 surface 序列。
      */
     isEchartsGlReady: function isEchartsGlReady() {
@@ -1153,14 +1192,14 @@ var script = {
     },
     /**
      * 汇总外部 loading 与 3D 运行时加载状态。
-     * 这样 3D 首次加载 echarts-gl 时，底层 BaseChart 能保持 loading 态。
+     * 这样 3D 首次检测运行时期间，底层 BaseChart 能保持 loading 态。
      */
     chartLoading: function chartLoading() {
       return this.loading || this.is3D && this.echartsGlStatus === 'loading';
     },
     /**
      * 汇总数据空态与 3D 运行时失败状态。
-     * 缺少 echarts-gl 时不让 BaseChart 继续渲染空 surface option。
+     * 缺少 3D 桥接运行时时不让 BaseChart 继续渲染空 surface option。
      */
     chartEmpty: function chartEmpty() {
       return this.isEmpty || this.is3D && this.echartsGlStatus === 'failed';
@@ -1176,7 +1215,7 @@ var script = {
       if (this.is3D && this.echartsGlStatus === 'failed') {
         return {
           empty: _objectSpread2(_objectSpread2({}, emptyConfig), {}, {
-            text: this.echartsGlErrorMessage || '使用 3D 饼图需要安装 echarts-gl'
+            text: this.echartsGlErrorMessage || "使用 PieChart 3D 能力前，请先在业务页面中执行 import '@xq-labs/data-ui-v2/pie-chart/3d-runtime'。"
           }),
           loading: _objectSpread2({}, loadingConfig)
         };
@@ -1216,7 +1255,7 @@ var script = {
   watch: {
     /**
      * dimension 是 2D/3D 分发的公开开关。
-     * 只有切到 3D 时才按需加载 echarts-gl，避免 2D 使用方被迫安装 3D 运行时。
+     * 只有切到 3D 时才检测 3D 运行时，避免 2D 使用方被迫安装 3D 运行时。
      */
     dimension: {
       immediate: true,
@@ -1248,7 +1287,7 @@ var script = {
       this.$emit('ready', chart);
     },
     /**
-     * 在真正进入 3D 能力时按需加载 echarts-gl。
+     * 在真正进入 3D 能力时检测 echarts-gl 桥接入口是否已经注册。
      *
      * 返回 Promise 是为了让单测和后续业务扩展能准确等待状态变化；
      * 2D、已就绪、加载中三种场景会直接返回 resolved Promise。
@@ -1264,7 +1303,7 @@ var script = {
         _this.echartsGlStatus = 'ready';
       })["catch"](function (error) {
         _this.echartsGlStatus = 'failed';
-        _this.echartsGlErrorMessage = error && error.message ? error.message : '使用 3D 饼图需要安装 echarts-gl';
+        _this.echartsGlErrorMessage = error && error.message ? error.message : "使用 PieChart 3D 能力前，请先在业务页面中执行 import '@xq-labs/data-ui-v2/pie-chart/3d-runtime'。";
         _this.$emit('runtime-error', error);
       });
     },
@@ -1302,7 +1341,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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\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 */
@@ -1334,7 +1373,7 @@ __vue_render__._withStripped = true;
 /* style */
 var __vue_inject_styles__ = undefined;
 /* scoped */
-var __vue_scope_id__ = "data-v-19bfc774";
+var __vue_scope_id__ = "data-v-7f129cbd";
 /* module identifier */
 var __vue_module_identifier__ = undefined;
 /* functional template */