xt-element-ui 1.2.5 → 1.2.6

package/src/components/ex-chart/utils.js

@@ -1,16 +1,10 @@
 import themeWhite from "./theme/white";
 import themeDark from "./theme/dark";
-import themeBlue from "./theme/blue";
-import themeStarry from "./theme/starry";
-import themeOrange from "./theme/orange";
 
 const themeKeys = {
   "default": themeWhite,
   "white": themeWhite,
-  "dark": themeDark,
-  "blue": themeBlue,
-  "starry": themeStarry,
-  "orange": themeOrange
+  "dark": themeDark
 };
 
 // echarts 仅在客户端加载，避免 SSR 编译/渲染报错
@@ -121,6 +115,153 @@ EchartsUtil.EchartsUtil = {
 
 EchartsUtil.chartInstanceList = [];
 
+// === 极简模式（simpleMode）预设配置 ===
+// 极简模式：隐藏图例、隐藏坐标轴/网格线、缩小内边距、简化 tooltip、去除动画装饰
+
+EchartsUtil.simpleModeOption = {
+  legend: { show: false },
+  tooltip: {
+    borderWidth: 0,
+    extraCssText: "box-shadow: 0 2px 8px rgba(0,0,0,0.12);"
+  },
+  grid: {
+    top: "5%",
+    left: "5%",
+    right: "5%",
+    bottom: "5%",
+    containLabel: true
+  },
+  xAxis: {
+    axisLine: { show: false },
+    axisTick: { show: false },
+    splitLine: { show: false }
+  },
+  yAxis: {
+    axisLine: { show: false },
+    axisTick: { show: false },
+    splitLine: { show: false },
+    axisLabel: { show: false }
+  },
+  animationDuration: 300,
+  animationEasing: "linear"
+};
+
+// 各类图表的极简模式特殊配置
+EchartsUtil.simpleModeByType = {
+  bar: {
+    series: {
+      barWidth: "60%",
+      label: { show: false },
+      markPoint: null,
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 6,
+          shadowOffsetX: 0,
+          shadowColor: "rgba(0,0,0,0.15)"
+        }
+      }
+    }
+  },
+  line: {
+    series: {
+      symbol: "none",
+      smooth: true,
+      symbolSize: 0,
+      label: { show: false },
+      areaStyle: null
+    }
+  },
+  pie: {
+    legend: { show: false },
+    title: { show: false },
+    series: {
+      radius: ["40%", "72%"],
+      label: { show: false },
+      labelLine: { show: false }
+    }
+  },
+  multi: {
+    legend: { show: false },
+    grid: {
+      top: "8%",
+      left: "5%",
+      right: "5%",
+      bottom: "5%",
+      containLabel: true
+    }
+  }
+};
+
+// 深拷贝 + 深合并工具
+function deepMerge(target, source) {
+  if (source == null) return target;
+  if (Array.isArray(source)) return source.slice();
+  if (typeof source !== "object") return source;
+  if (target == null || typeof target !== "object") {
+    return JSON.parse(JSON.stringify(source));
+  }
+  const result = Array.isArray(target) ? target.slice() : Object.assign({}, target);
+  Object.keys(source).forEach(key => {
+    const src = source[key];
+    if (src === null || src === undefined) {
+      if (source.hasOwnProperty(key)) result[key] = src;
+      return;
+    }
+    if (typeof src === "object") {
+      result[key] = deepMerge(result[key], src);
+    } else {
+      result[key] = src;
+    }
+  });
+  return result;
+}
+
+// 对 option 应用极简模式（会保留调用方显式设置的值）
+EchartsUtil.applySimpleMode = function(option, type) {
+  if (!option || typeof option !== "object") return option;
+
+  const base = JSON.parse(JSON.stringify(EchartsUtil.simpleModeOption));
+  const typeConfig = EchartsUtil.simpleModeByType[type] || {};
+  const merged = deepMerge(base, typeConfig);
+
+  // 合并 base 与 typeConfig 到当前 option
+  Object.keys(merged).forEach(key => {
+    if (key === "series") return; // series 单独处理
+    if (option[key] == null) {
+      option[key] = merged[key];
+    } else if (typeof option[key] === "object" && typeof merged[key] === "object" && !Array.isArray(option[key])) {
+      option[key] = deepMerge(merged[key], option[key]);
+    }
+    // 若调用方已有原始值则保留（不覆盖）
+  });
+
+  // series 处理：若存在则对每个 series 应用简化配置
+  if (option.series && Array.isArray(option.series)) {
+    const simpleSeries = (merged.series || {});
+    option.series = option.series.map(s => {
+      if (s == null || typeof s !== "object") return s;
+      return deepMerge(simpleSeries, s); // 调用方的值优先级更高
+    });
+  }
+
+  // 特殊：xAxis / yAxis 可能是数组
+  ["xAxis", "yAxis"].forEach(axisKey => {
+    if (option[axisKey] != null && typeof option[axisKey] === "object") {
+      const simpleAxis = merged[axisKey] || {};
+      if (Array.isArray(option[axisKey])) {
+        option[axisKey] = option[axisKey].map(axis => {
+          if (axis == null || typeof axis !== "object") return axis;
+          return deepMerge(simpleAxis, axis);
+        });
+      } else {
+        option[axisKey] = deepMerge(simpleAxis, option[axisKey]);
+      }
+    }
+  });
+
+  return option;
+};
+
 EchartsUtil.mergeOptions = function(themeOption, customOption) {
   return Object.assign({}, themeOption, customOption);
 };

package/src/components/ex-chart/theme/blue.js

@@ -1,91 +0,0 @@
-export default {
-  color: ["#2CDEB3", "#A17EE6", "#E57E40", "#409EFF"],
-  backgroundColor: "#ffffff",
-  textStyle: {
-    fontFamily: "Microsoft YaHei, sans-serif"
-  },
-  title: {
-    textStyle: {
-      color: "#333"
-    },
-    subtextStyle: {
-      color: "#666666"
-    }
-  },
-  line: {
-    itemStyle: {
-    },
-    lineStyle: {
-      width: 2
-    }
-  },
-  bar: {
-    itemStyle: {
-      borderRadius: 4
-    }
-  },
-  pie: {
-    roseType: "radius",
-    label: {
-      color: "#333"
-    }
-  },
-  radar: {
-    indicator: {
-      color: "#666666"
-    }
-  },
-  map: {
-    label: {
-      color: "#333"
-    },
-    itemStyle: {
-      borderColor: "#fff"
-    }
-  },
-  gauge: {
-    axisLine: {
-      lineStyle: {
-        color: [[1, "#5470c6"]]
-      }
-    }
-  },
-  toolbox: {
-    iconStyle: {
-      borderColor: "#666666"
-    }
-  },
-  axisLine: {
-    lineStyle: {
-      color: "#DCDFE6"
-    }
-  },
-  axisTick: {
-    lineStyle: {
-      color: "#DCDFE6"
-    }
-  },
-  splitLine: {
-    lineStyle: {
-      color: "#ebeef5"
-    }
-  },
-  splitArea: {
-    areaStyle: {
-      color: ["#f7f8fa", "#ffffff"]
-    }
-  },
-  legend: {
-    textStyle: {
-      color: "#666"
-    }
-  },
-  tooltip: {
-    backgroundColor: "rgba(255, 255, 255, 0.95)",
-    borderColor: "#DCDFE6",
-    borderWidth: 1,
-    textStyle: {
-      color: "#333"
-    }
-  }
-};

package/src/components/ex-chart/theme/orange.js

@@ -1,92 +0,0 @@
-export default {
-  color: ["#e69419", "#A5b4da", "#F8792C", "#97bfb4", "#de747b", "#d6bac0", "#e62737", "#f35969", "#f1ccb0", "#b7394e", "#fe9c1c2"],
-  backgroundColor: "#ffffff",
-  textStyle: {
-    fontFamily: "Microsoft YaHei, sans-serif"
-  },
-  title: {
-    textStyle: {
-      color: "#333"
-    },
-    subtextStyle: {
-      color: "#666666"
-    }
-  },
-  line: {
-    itemStyle: {
-      color: "#e69419"
-    },
-    lineStyle: {
-      width: 2
-    }
-  },
-  bar: {
-    itemStyle: {
-      borderRadius: 4
-    }
-  },
-  pie: {
-    roseType: "radius",
-    label: {
-      color: "#333"
-    }
-  },
-  radar: {
-    indicator: {
-      color: "#666666"
-    }
-  },
-  map: {
-    label: {
-      color: "#333"
-    },
-    itemStyle: {
-      borderColor: "#fff"
-    }
-  },
-  gauge: {
-    axisLine: {
-      lineStyle: {
-        color: [[1, "#5470c6"]]
-      }
-    }
-  },
-  toolbox: {
-    iconStyle: {
-      borderColor: "#666666"
-    }
-  },
-  axisLine: {
-    lineStyle: {
-      color: "#DCDFE6"
-    }
-  },
-  axisTick: {
-    lineStyle: {
-      color: "#DCDFE6"
-    }
-  },
-  splitLine: {
-    lineStyle: {
-      color: "#ebeef5"
-    }
-  },
-  splitArea: {
-    areaStyle: {
-      color: ["#f7f8fa", "#ffffff"]
-    }
-  },
-  legend: {
-    textStyle: {
-      color: "#666"
-    }
-  },
-  tooltip: {
-    backgroundColor: "rgba(255, 255, 255, 0.95)",
-    borderColor: "#DCDFE6",
-    borderWidth: 1,
-    textStyle: {
-      color: "#333"
-    }
-  }
-};

package/src/components/ex-chart/theme/starry.js

@@ -1,106 +0,0 @@
-export default {
-  color: [
-    "#1685a9", // 石青
-    "#21a675", // 松柏绿
-    "#1bd1a5", // 飞燕草蓝
-    "#8c4356", // 绛紫
-    "#0dafc6", // 孔雀蓝
-    "#4b5cc4", // 宝蓝
-    "#758a99", // 墨灰
-    "#cca4e3", // 丁香色
-    "#205277", // 靛青色
-    "#d9b611", // 秋香色
-    "#ff8c31", // 杏红
-    "#9d2933", // 胭脂
-    "#0288c5", // 浅靛青蓝
-    "#44cef6" // 天蓝色
-  ],
-  backgroundColor: "#ffffff",
-  textStyle: {
-    fontFamily: "Microsoft YaHei, sans-serif"
-  },
-  title: {
-    textStyle: {
-      color: "#333"
-    },
-    subtextStyle: {
-      color: "#666666"
-    }
-  },
-  line: {
-    itemStyle: {
-    },
-    lineStyle: {
-      width: 2
-    }
-  },
-  bar: {
-    itemStyle: {
-      borderRadius: 4
-    }
-  },
-  pie: {
-    roseType: "radius",
-    label: {
-      color: "#333"
-    }
-  },
-  radar: {
-    indicator: {
-      color: "#666666"
-    }
-  },
-  map: {
-    label: {
-      color: "#333"
-    },
-    itemStyle: {
-      borderColor: "#fff"
-    }
-  },
-  gauge: {
-    axisLine: {
-      lineStyle: {
-        color: [[1, "#5470c6"]]
-      }
-    }
-  },
-  toolbox: {
-    iconStyle: {
-      borderColor: "#666666"
-    }
-  },
-  axisLine: {
-    lineStyle: {
-      color: "#DCDFE6"
-    }
-  },
-  axisTick: {
-    lineStyle: {
-      color: "#DCDFE6"
-    }
-  },
-  splitLine: {
-    lineStyle: {
-      color: "#ebeef5"
-    }
-  },
-  splitArea: {
-    areaStyle: {
-      color: ["#f7f8fa", "#ffffff"]
-    }
-  },
-  legend: {
-    textStyle: {
-      color: "#666"
-    }
-  },
-  tooltip: {
-    backgroundColor: "rgba(255, 255, 255, 0.95)",
-    borderColor: "#DCDFE6",
-    borderWidth: 1,
-    textStyle: {
-      color: "#333"
-    }
-  }
-};