xt-element-ui 1.1.0 → 1.1.2

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

@@ -0,0 +1,106 @@
+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"
+    }
+  }
+};

package/src/components/chart/theme/white.js

@@ -0,0 +1,110 @@
+export default {
+  color: ["#1890ff", "#37c3a4", "#29c0ce", "#6480D7", "#8cce6f", "#3a5dca", "#ffb74d"],
+  backgroundColor: "#ffffff",
+  textStyle: {
+    fontFamily: "Microsoft YaHei, sans-serif"
+  },
+  title: {
+    textStyle: {
+      color: "#333",
+      fontSize: 16
+    },
+    subtextStyle: {
+      color: "#666666",
+      fontSize: 12
+    }
+  },
+  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"
+    }
+  },
+  xAxis: {
+    axisLine: {
+      lineStyle: {
+        color: "#DFE9EE"
+      }
+    },
+    axisTick: {
+      lineStyle: {
+        color: "#DFE9EE"
+      },
+      show: false
+    }
+  },
+  yAxis: {
+    axisLine: {
+      lineStyle: {
+        color: "#DFE9EE"
+      }
+    },
+    axisTick: {
+      lineStyle: {
+        color: "#DFE9EE"
+      }
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        type: "dashed",
+        color: "#DFE9EE"
+      }
+    }
+  },
+  splitArea: {
+    areaStyle: {
+      color: ["#f7f8fa", "#ffffff"]
+    }
+  },
+  legend: {
+    textStyle: {
+      color: "#333333"
+    }
+  },
+  tooltip: {
+    borderWidth: 1,
+    backgroundColor: "#ffffff",
+    textStyle: {
+      color: "#333333"
+    },
+    trigger: "axis"
+  }
+};

package/src/components/chart/utils.js

@@ -0,0 +1,273 @@
+import * as echarts from "echarts";
+
+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
+};
+
+for (const key in themeKeys) {
+  echarts.registerTheme(key, themeKeys[key]);
+}
+
+// 字体大小配置
+const fontSizeMap = {
+  small: {
+    title: 14,
+    subtitle: 11,
+    legend: 11,
+    axisLabel: 10,
+    tooltip: 11,
+    label: 11
+  },
+  medium: {
+    title: 16,
+    subtitle: 12,
+    legend: 12,
+    axisLabel: 12,
+    tooltip: 12,
+    label: 12
+  },
+  large: {
+    title: 18,
+    subtitle: 14,
+    legend: 14,
+    axisLabel: 14,
+    tooltip: 14,
+    label: 14
+  }
+};
+
+function EchartsUtil() {}
+
+EchartsUtil.currentTheme = "default";
+EchartsUtil.currentSize = "medium";
+EchartsUtil.inverse = false;
+
+EchartsUtil.baseOption = {
+  backgroundColor: "transparent",
+  tooltip: {
+    trigger: "axis",
+    borderWidth: 1
+  },
+  legend: {
+    right: 20,
+    top: 0,
+    show: true,
+    textStyle: {
+      fontSize: 12
+    }
+  },
+  grid: {
+    top: "25%",
+    left: "40",
+    right: "15",
+    bottom: "40"
+  },
+  xAxis: {
+    type: "category",
+    boundaryGap: false,
+    axisTick: {
+      show: true,
+      length: 4
+    },
+    axisLabel: {
+      fontSize: 12,
+      interval: 0,
+      formatter: function(value) {
+        return !this.reverse && this.longLable ? value.replace(new RegExp(`(.{${this.longLableSplitNum}})`, "g"), `$1\n`) : value;
+      }
+    }
+  },
+  yAxis: {
+    type: "value",
+    axisTick: {
+      show: false
+    },
+    min: null,
+    max: null,
+    axisLabel: {
+      show: false
+    },
+    splitLine: {
+      lineStyle: {
+        type: "dashed",
+        width: 1
+      }
+    }
+  }
+};
+
+EchartsUtil.chartInstanceList = [];
+
+EchartsUtil.mergeOptions = function(themeOption, customOption) {
+  return Object.assign({}, this.baseOption, themeOption, customOption);
+};
+
+// 根据字体大小调整主题配置
+EchartsUtil.applyFontSize = function(themeOption, size) {
+  const fontSizeConfig = fontSizeMap[size] || fontSizeMap.medium;
+  
+  const result = JSON.parse(JSON.stringify(themeOption));
+  
+  // 调整标题字体大小
+  if (result.title && result.title.textStyle) {
+    result.title.textStyle.fontSize = fontSizeConfig.title;
+  }
+  if (result.title && result.title.subtextStyle) {
+    result.title.subtextStyle.fontSize = fontSizeConfig.subtitle;
+  }
+  
+  // 调整图例字体大小
+  if (result.legend && result.legend.textStyle) {
+    result.legend.textStyle.fontSize = fontSizeConfig.legend;
+  }
+  
+  // 调整提示框字体大小
+  if (result.tooltip && result.tooltip.textStyle) {
+    result.tooltip.textStyle.fontSize = fontSizeConfig.tooltip;
+  }
+  
+  // 调整饼图标签字体大小
+  if (result.pie && result.pie.label) {
+    if (typeof result.pie.label === 'object') {
+      result.pie.label.fontSize = fontSizeConfig.label;
+    }
+  }
+  
+  // 调整雷达图指示器字体大小
+  if (result.radar && result.radar.indicator) {
+    if (typeof result.radar.indicator === 'object' && result.radar.indicator.textStyle) {
+      result.radar.indicator.textStyle.fontSize = fontSizeConfig.label;
+    }
+  }
+  
+  // 调整地图标签字体大小
+  if (result.map && result.map.label) {
+    if (typeof result.map.label === 'object') {
+      result.map.label.fontSize = fontSizeConfig.label;
+    }
+  }
+  
+  return result;
+};
+
+EchartsUtil.init = function(dom, theme, customOption, size) {
+  theme = theme || "default";
+  size = size || "medium";
+  customOption = customOption || {};
+  
+  const useTheme = this.currentTheme || theme;
+  const useSize = this.currentSize || size;
+  
+  this.currentTheme = useTheme;
+  this.currentSize = useSize;
+  
+  let themeOption = themeKeys[useTheme];
+  // 应用字体大小配置
+  themeOption = this.applyFontSize(themeOption, useSize);
+  
+  const option = this.mergeOptions(themeOption, customOption);
+  
+  const chart = echarts.init(dom, useTheme);
+  chart.setOption(option, true);
+  
+  this.chartInstanceList.push({
+    dom,
+    chart,
+    customOption,
+    size: useSize
+  });
+  
+  this.bindResize(chart);
+  return chart;
+};
+
+EchartsUtil.changeSingleTheme = function(dom, chartIns, customOption, newTheme) {
+  if (!dom || !chartIns) return;
+  
+  customOption = customOption || {};
+  newTheme = newTheme || "default";
+  
+  this.currentTheme = newTheme;
+  chartIns.dispose();
+  
+  const newChart = echarts.init(dom, newTheme, customOption);
+  
+  const item = this.chartInstanceList.find(function(v) {
+    return v.dom === dom;
+  });
+  
+  if (item) {
+    item.chart = newChart;
+  }
+  
+  return newChart;
+};
+
+EchartsUtil.changeAllTheme = function(newTheme) {
+  if (!newTheme) return;
+  
+  this.currentTheme = newTheme;
+  
+  this.chartInstanceList.forEach(function(item) {
+    const dom = item.dom;
+    const chart = item.chart;
+    const customOption = item.customOption;
+    
+    if (chart) {
+      chart.dispose();
+    }
+    
+    const newChart = echarts.init(dom, newTheme);
+    const themeOption = themeKeys[newTheme];
+    const option = EchartsUtil.mergeOptions(themeOption, customOption);
+    
+    newChart.setOption(option, true);
+    item.chart = newChart;
+    EchartsUtil.bindResize(newChart);
+  });
+};
+
+EchartsUtil.bindResize = function(chartIns) {
+  if (!chartIns || chartIns.resizeLocked) return;
+  
+  window.addEventListener("resize", function() {
+    chartIns.resize();
+  });
+  
+  chartIns._resizeLocked = true;
+};
+
+EchartsUtil.destroy = function(chartIns) {
+  if (chartIns) {
+    chartIns.dispose();
+  }
+  
+  this.chartInstanceList = this.chartInstanceList.filter(function(item) {
+    return item.chart !== chartIns;
+  });
+};
+
+EchartsUtil.destroyAll = function() {
+  this.chartInstanceList.forEach(function(item) {
+    if (item.chart) {
+      item.chart.dispose();
+    }
+  });
+  
+  this.chartInstanceList = [];
+};
+
+export default EchartsUtil;
+
+export { echarts };