@fecp/designer 5.6.28 → 5.6.29

package/lib/packages/mobile/src/components/dataDisplay/chart/optionBuilder.js

@@ -0,0 +1,340 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const formatters = require("./formatters.js");
+const presets = require("./presets.js");
+function buildOption(props, rawData) {
+  const list = (rawData == null ? void 0 : rawData.list) || rawData || [];
+  const preset = presets.presets[props.preset] || presets.presets.default;
+  const hasRightAxis = (props.series || []).some((s) => s.yAxisIndex === 1);
+  const base = {
+    color: preset.color,
+    backgroundColor: preset.backgroundColor,
+    textStyle: preset.textStyle,
+    animation: props.animation
+  };
+  if (props.showTooltip) {
+    base.tooltip = {
+      trigger: ["pie", "radar", "funnel"].includes(props.chartType) ? "item" : "axis"
+    };
+  }
+  if (props.showLegend && list.length > 0) {
+    const isVertical = ["left", "right"].includes(props.legendPosition);
+    base.legend = {
+      orient: isVertical ? "vertical" : "horizontal",
+      [props.legendPosition]: 5
+    };
+    if (props.legendPosition === "top" && props.title) {
+      base.legend.top = 32;
+    }
+  }
+  if (props.title) {
+    base.title = { text: props.title, left: "center", top: 6 };
+  }
+  const grid = { ...preset.grid };
+  if (props.title && props.legendPosition !== "top") {
+    grid.top = 40;
+  }
+  if (props.showLegend) {
+    if (props.legendPosition === "top") {
+      grid.top = props.title ? 65 : 35;
+    } else if (props.legendPosition === "bottom") {
+      grid.bottom = 35;
+    } else if (props.legendPosition === "left") {
+      grid.left = 60;
+    } else if (props.legendPosition === "right") {
+      grid.right = 60;
+    }
+  }
+  const { containLabel, ...chartArea } = grid;
+  switch (props.chartType) {
+    case "bar":
+    case "line":
+    case "lineBar":
+      return buildCartesian(base, props, list, preset, hasRightAxis, grid);
+    case "pie":
+      return buildPie(base, props, list);
+    case "radar":
+      return buildRadar(base, props, list);
+    case "funnel":
+      return buildFunnel(base, props, list, chartArea);
+    default:
+      return buildCartesian(base, props, list, preset, hasRightAxis, grid);
+  }
+}
+function buildCartesian(base, props, list, preset, hasRightAxis, grid) {
+  const xAxis = {
+    type: props.xAxisType || "category",
+    data: props.xAxisType === "category" ? list.map((item) => item[props.xAxisField]) : void 0,
+    axisLabel: {
+      formatter: props.xAxisType === "time" ? (val) => formatters.formatDate(val, props.xAxisDateFormat) : void 0
+    }
+  };
+  const yAxis = [
+    {
+      type: "value",
+      axisLabel: {
+        formatter: (val) => formatters.formatValue(val, {
+          unit: props.yAxisLeftUnit,
+          decimals: props.yAxisDecimals,
+          thousands: props.yAxisThousands
+        })
+      }
+    }
+  ];
+  if (hasRightAxis) {
+    yAxis.push({
+      type: "value",
+      axisLabel: {
+        formatter: (val) => formatters.formatValue(val, {
+          unit: props.yAxisRightUnit,
+          decimals: props.yAxisDecimals,
+          thousands: props.yAxisThousands
+        })
+      }
+    });
+  }
+  const series = (props.series || []).map((s) => {
+    const isBar = props.chartType === "bar" || props.chartType === "lineBar" && s.type === "bar";
+    return {
+      name: s.name,
+      type: isBar ? "bar" : "line",
+      yAxisIndex: s.yAxisIndex || 0,
+      data: list.map((item) => ({
+        ...item,
+        value: Number(item[s.field]) || 0
+      })),
+      stack: props.stack ? "total" : void 0,
+      smooth: props.smooth,
+      areaStyle: props.areaStyle ? {} : void 0,
+      label: props.showDataLabel ? { show: true, position: "top" } : void 0,
+      itemStyle: s.color ? { color: s.color } : void 0
+    };
+  });
+  if (list.length === 0) {
+    xAxis.axisLine = { show: false };
+    xAxis.axisTick = { show: false };
+    xAxis.axisLabel = { show: false };
+    yAxis.forEach((y) => {
+      y.axisLine = { show: false };
+      y.axisTick = { show: false };
+      y.axisLabel = { show: false };
+      y.splitLine = { show: false };
+    });
+    base.graphic = {
+      type: "text",
+      left: "center",
+      top: "middle",
+      style: { text: "暂无数据", fill: "#999", fontSize: 14 }
+    };
+  }
+  return {
+    ...base,
+    grid,
+    xAxis,
+    yAxis,
+    series
+  };
+}
+function calcCenter(props) {
+  const hasTitle = !!props.title;
+  if (!props.showLegend) {
+    return hasTitle ? ["50%", "54%"] : ["50%", "50%"];
+  }
+  switch (props.legendPosition) {
+    case "top":
+      return hasTitle ? ["50%", "62%"] : ["50%", "55%"];
+    case "bottom":
+      return hasTitle ? ["50%", "48%"] : ["50%", "45%"];
+    case "left":
+      return hasTitle ? ["50%", "52%"] : ["50%", "50%"];
+    case "right":
+      return hasTitle ? ["45%", "52%"] : ["45%", "50%"];
+    default:
+      return ["50%", "50%"];
+  }
+}
+function buildPie(base, props, list) {
+  var _a;
+  const s = ((_a = props.series) == null ? void 0 : _a[0]) || { field: "value", name: "" };
+  const inner = Number(props.pieInnerRadius) || 0;
+  const outer = Number(props.pieRadius) || 60;
+  const center = calcCenter(props);
+  const result = {
+    ...base,
+    series: [
+      {
+        name: s.name,
+        type: "pie",
+        radius: [`${inner}%`, `${outer}%`],
+        center,
+        roseType: props.pieRoseType ? "radius" : void 0,
+        data: list.map((item) => ({
+          ...item,
+          name: item[props.xAxisField],
+          value: Number(item[s.field]) || 0
+        })),
+        label: props.showDataLabel ? { show: true, formatter: "{b}: {d}%" } : { show: false }
+      }
+    ]
+  };
+  if (inner > 0) {
+    const total = list.reduce(
+      (sum, item) => sum + (Number(item[s.field]) || 0),
+      0
+    );
+    const totalText = formatters.formatValue(total, { thousands: true });
+    result.graphic = {
+      type: "group",
+      left: "center",
+      top: "middle",
+      children: [
+        props.pieCenterText ? {
+          type: "text",
+          top: -16,
+          style: {
+            text: props.pieCenterText,
+            fontSize: 16,
+            fontWeight: "bold",
+            fill: "#303133",
+            align: "center"
+          }
+        } : null,
+        {
+          type: "text",
+          top: 4,
+          style: {
+            text: totalText,
+            fontSize: 13,
+            fill: "#909399",
+            align: "center"
+          }
+        }
+      ].filter(Boolean)
+    };
+  }
+  if (list.length === 0) {
+    result.series = [];
+    result.graphic = {
+      type: "text",
+      left: "center",
+      top: "middle",
+      style: { text: "暂无数据", fill: "#999", fontSize: 14 }
+    };
+  }
+  return result;
+}
+function buildRadar(base, props, list, chartArea) {
+  const indicators = list.map((item) => ({
+    name: item[props.xAxisField],
+    max: props.radarMax || void 0
+  }));
+  const hasTitle = !!props.title;
+  let center, radius;
+  if (!props.showLegend) {
+    center = hasTitle ? ["50%", "52%"] : ["50%", "50%"];
+    radius = "62%";
+  } else {
+    switch (props.legendPosition) {
+      case "top":
+        center = hasTitle ? ["50%", "58%"] : ["50%", "56%"];
+        radius = "55%";
+        break;
+      case "bottom":
+        center = hasTitle ? ["50%", "42%"] : ["50%", "44%"];
+        radius = "55%";
+        break;
+      case "left":
+        center = hasTitle ? ["56%", "50%"] : ["56%", "50%"];
+        radius = "55%";
+        break;
+      case "right":
+        center = hasTitle ? ["44%", "50%"] : ["44%", "50%"];
+        radius = "55%";
+        break;
+      default:
+        center = ["50%", "50%"];
+        radius = "62%";
+    }
+  }
+  const result = {
+    ...base,
+    radar: {
+      shape: props.radarShape || "polygon",
+      indicator: indicators,
+      center,
+      radius,
+      axisName: {
+        fontSize: 10,
+        padding: [2, 3]
+      }
+    },
+    series: (props.series || []).map((s) => ({
+      name: s.name,
+      type: "radar",
+      data: [
+        {
+          value: list.map((item) => Number(item[s.field]) || 0),
+          name: s.name
+        }
+      ],
+      label: props.showDataLabel ? { show: true } : void 0,
+      itemStyle: s.color ? { color: s.color } : void 0
+    }))
+  };
+  if (list.length === 0) {
+    result.radar = void 0;
+    result.series = [];
+    result.graphic = {
+      type: "text",
+      left: "center",
+      top: "middle",
+      style: { text: "暂无数据", fill: "#999", fontSize: 14 }
+    };
+  }
+  return result;
+}
+function buildFunnel(base, props, list, chartArea) {
+  var _a;
+  const s = ((_a = props.series) == null ? void 0 : _a[0]) || { field: "value", name: "" };
+  const labelOutside = props.showDataLabel && (props.funnelLabelPosition || "outside") === "outside";
+  const funnelPos = {
+    top: chartArea.top,
+    bottom: chartArea.bottom,
+    left: labelOutside ? "3%" : chartArea.left,
+    right: labelOutside ? "25%" : chartArea.right
+  };
+  const result = {
+    ...base,
+    series: [
+      {
+        name: s.name,
+        type: "funnel",
+        sort: props.funnelSort || "descending",
+        gap: props.funnelGap || 2,
+        ...funnelPos,
+        data: list.map((item) => ({
+          ...item,
+          name: item[props.xAxisField],
+          value: Number(item[s.field]) || 0
+        })),
+        label: props.showDataLabel ? {
+          show: true,
+          position: props.funnelLabelPosition || "outside",
+          formatter: (params) => `${params.name}: ${formatters.formatValue(params.value, { thousands: true })}`
+        } : { show: false },
+        labelLine: labelOutside ? { show: true, length: 20, length2: 20, smooth: true } : { show: false }
+      }
+    ]
+  };
+  if (list.length === 0) {
+    result.series = [];
+    result.graphic = {
+      type: "text",
+      left: "center",
+      top: "middle",
+      style: { text: "暂无数据", fill: "#999", fontSize: 14 }
+    };
+  }
+  return result;
+}
+exports.buildOption = buildOption;

package/lib/packages/mobile/src/components/dataDisplay/chart/presets.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const presets = {
+  default: {
+    color: ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de"],
+    backgroundColor: "transparent",
+    textStyle: { color: "#333" },
+    grid: { left: "3%", right: "4%", bottom: "3%", top: "12%", containLabel: true }
+  },
+  business: {
+    color: ["#2f6bea", "#7b61ff", "#41c0d3", "#ff9d4d", "#ff6b6b"],
+    backgroundColor: "transparent",
+    textStyle: { color: "#333" },
+    grid: { left: "3%", right: "4%", bottom: "3%", top: "12%", containLabel: true }
+  },
+  elegant: {
+    color: ["#8e44ad", "#e74c3c", "#f39c12", "#16a085", "#2980b9"],
+    backgroundColor: "transparent",
+    textStyle: { color: "#333" },
+    grid: { left: "3%", right: "4%", bottom: "3%", top: "12%", containLabel: true }
+  },
+  fresh: {
+    color: ["#52c41a", "#13c2c2", "#1890ff", "#722ed1", "#eb2f96"],
+    backgroundColor: "transparent",
+    textStyle: { color: "#333" },
+    grid: { left: "3%", right: "4%", bottom: "3%", top: "12%", containLabel: true }
+  }
+};
+exports.presets = presets;

package/lib/packages/mobile/src/components/dataDisplay/chart/useEcharts.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const core = require("../../../../../../node_modules/echarts/core.js");
+const install = require("../../../../../../node_modules/echarts/lib/chart/bar/install.js");
+const install$1 = require("../../../../../../node_modules/echarts/lib/chart/line/install.js");
+const install$2 = require("../../../../../../node_modules/echarts/lib/chart/pie/install.js");
+const install$3 = require("../../../../../../node_modules/echarts/lib/chart/radar/install.js");
+const install$4 = require("../../../../../../node_modules/echarts/lib/chart/funnel/install.js");
+const install$5 = require("../../../../../../node_modules/echarts/lib/component/title/install.js");
+const install$6 = require("../../../../../../node_modules/echarts/lib/component/tooltip/install.js");
+const install$7 = require("../../../../../../node_modules/echarts/lib/component/legend/install.js");
+const install$8 = require("../../../../../../node_modules/echarts/lib/component/grid/install.js");
+const install$9 = require("../../../../../../node_modules/echarts/lib/component/radar/install.js");
+const install$a = require("../../../../../../node_modules/echarts/lib/component/dataset/install.js");
+const install$b = require("../../../../../../node_modules/echarts/lib/component/transform/install.js");
+const install$c = require("../../../../../../node_modules/echarts/lib/component/graphic/install.js");
+const installCanvasRenderer = require("../../../../../../node_modules/echarts/lib/renderer/installCanvasRenderer.js");
+const extension = require("../../../../../../node_modules/echarts/lib/extension.js");
+let registered = false;
+function ensureEcharts() {
+  if (registered) return core;
+  extension.use([
+    install.install,
+    install$1.install,
+    install$2.install,
+    install$3.install,
+    install$4.install,
+    install$5.install,
+    install$6.install,
+    install$7.install,
+    install$8.install,
+    install$9.install,
+    install$a.install,
+    install$b.install,
+    install$c.install,
+    installCanvasRenderer.install
+  ]);
+  registered = true;
+  return core;
+}
+exports.echarts = core;
+exports.ensureEcharts = ensureEcharts;