xt-element-ui 1.2.5 → 1.2.7

package/package.json

@@ -1,41 +1,80 @@
-{
-  "name": "xt-element-ui",
-  "version": "1.2.5",
-  "description": "基于 Vue2.7 + ElementUI 的组件库",
-  "main": "lib/index.common.js",
-  "module": "lib/index.esm.js",
-  "unpkg": "lib/index.umd.min.js",
-  "style": "lib/index.css",
-  "scripts": {
-    "docs:dev": "vuepress dev docs",
-    "docs:build": "vuepress build docs",
-    "dev": "vue-cli-service serve",
-    "lib": "vue-cli-service build --target lib --name index --dest lib src/index.js",
-    "prepublishOnly": "npm run lib"
-  },
-  "peerDependencies": {
-    "vue": "^2.6.10"
-  },
-  "devDependencies": {
-    "@vue/cli-service": "~4.5.19",
-    "sass-loader": "^10.5.2",
-    "vue": "^2.6.10",
-    "vuepress": "^1.9.10",
-    "vuepress-plugin-demo-container": "^0.2.0",
-    "vuepress-theme-reco": "^1.6.17"
-  },
-  "files": [
-    "lib",
-    "src",
-    "README.md",
-    "docs/components/**/*md",
-    "docs/README.md"
-  ],
-  "dependencies": {
-    "echarts": "^6.1.0",
-    "element-ui": "^2.15.14",
-    "sass": "^1.32.13",
-    "vue-server-renderer": "^2.7.14",
-    "xt-element-ui": "^1.2.1"
-  }
-}
+{
+  "name": "xt-element-ui",
+  "version": "1.2.7",
+  "description": "基于 Vue 2.7 + ElementUI 的企业级组件库，提供丰富的自定义组件和扩展组件",
+  "main": "lib/index.common.js",
+  "module": "lib/index.esm.js",
+  "unpkg": "lib/index.umd.min.js",
+  "style": "lib/index.css",
+  "scripts": {
+    "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs",
+    "dev": "vue-cli-service serve",
+    "lib": "vue-cli-service build --target lib --name index --dest lib src/index.js",
+    "prepublishOnly": "npm run lib"
+  },
+  "peerDependencies": {
+    "vue": "^2.6.10"
+  },
+  "devDependencies": {
+    "@vue/cli-service": "~4.5.19",
+    "sass-loader": "^10.5.2",
+    "vue": "^2.6.10",
+    "vuepress": "^1.9.10",
+    "vuepress-plugin-demo-container": "^0.2.0",
+    "vuepress-theme-reco": "^1.6.17"
+  },
+  "files": [
+    "lib",
+    "src",
+    "README.md",
+    "CHANGELOG.md",
+    "docs/components/**/*md",
+    "docs/README.md"
+  ],
+  "dependencies": {
+    "echarts": "^6.1.0",
+    "element-ui": "^2.15.14",
+    "sass": "^1.32.13",
+    "vue-server-renderer": "^2.7.14"
+  },
+  "keywords": [
+    "vue",
+    "vue2",
+    "element-ui",
+    "element",
+    "ui",
+    "components",
+    "xt-element-ui",
+    "chart",
+    "table",
+    "echarts",
+    "component-library",
+    "vue-components",
+    "admin",
+    "dashboard"
+  ],
+  "author": "XT-Element-UI Contributors",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/JobWebNie/xt-element-ui/issues"
+  },
+  "homepage": "https://jobwebnie.github.io/xt-element-ui/",
+   "repository": {
+    "type": "git",
+    "url": "https://github.com/JobWebNie/xt-element-ui.git"
+  },
+  "engines": {
+    "node": ">=12.0.0",
+    "npm": ">=6.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "Chrome >= 60",
+    "Firefox >= 60",
+    "Safari >= 10.1",
+    "Edge >= 15"
+  ]
+}

package/src/components/ex-chart/ExBar.vue

@@ -10,16 +10,16 @@ export default {
       type: Array,
       default: () => {
         return [
-          { value: 65, name: "吴十" },
-          { value: 70, name: "唐九" },
-          { value: 73, name: "钱一" },
-          { value: 78, name: "孙二" },
-          { value: 88, name: "刘八" },
-          { value: 93, name: "王七" },
-          { value: 99, name: "赵六" },
-          { value: 103, name: "宋五" },
-          { value: 113, name: "李四" },
-          { value: 125, name: "张三" }
+          { value: 65, label: "吴十" },
+          { value: 70, label: "唐九" },
+          { value: 73, label: "钱一" },
+          { value: 78, label: "孙二" },
+          { value: 88, label: "刘八" },
+          { value: 93, label: "王七" },
+          { value: 99, label: "赵六" },
+          { value: 103, label: "宋五" },
+          { value: 113, label: "李四" },
+          { value: 125, label: "张三" }
         ];
       }
     },
@@ -28,15 +28,15 @@ export default {
       type: String,
       default: "medium"
     },
-    // name: {
-    //   type: String,
-    //   default: ""
-    // },
+    fieldKeys: {
+      type: Object,
+      default: () => ({ label: "label", value: "value", data: "data" })
+    },
     markPoint: {
       type: Boolean,
       default: false
     },
-    energyType: {
+    unit: {
       type: String,
       default: ""
     },
@@ -48,7 +48,7 @@ export default {
       type: Boolean,
       default: false
     },
-    longLable: { // 名称占50% 的 grid值
+    longLable: {
       type: Boolean,
       default: false
     },
@@ -63,6 +63,10 @@ export default {
     splitNumber: {
       type: Number,
       default: 5
+    },
+    simpleMode: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -79,15 +83,10 @@ export default {
         _self.initChart();
       }
     },
-    energyType: {
+    unit: {
       deep: true,
       handler(newVal, oldVal) {
         const _self = this;
-        if (newVal == "kW.h") {
-          _self.name = "用电量";
-        } else if (newVal == "m³") {
-          _self.name = "用气量";
-        }
         _self.initChart();
       }
     },
@@ -101,7 +100,10 @@ export default {
   methods: {
     initChart() {
       const _self = this;
-      // 数据处理
+      const keys = Object.assign(
+        { label: "label", value: "value", data: "data" },
+        _self.fieldKeys || {}
+      );
       const _xAxis = {
         type: "category",
         inverse: this.reverse,
@@ -112,7 +114,7 @@ export default {
           }
         },
         data: _self.chartData.map((item) => {
-          return item.name;
+          return item[keys.label];
         })
       };
       const _yAxis = {
@@ -166,8 +168,8 @@ export default {
         },
         xAxis: this.reverse ? _yAxis : _xAxis,
         yAxis: this.reverse ? _xAxis : _yAxis,
-        series: [{
-          name: _self.name,
+        series: {
+          name: _self.unit,
           type: "bar",
           markPoint: {
             data: [
@@ -177,21 +179,25 @@ export default {
           },
           avoidLabelOverlap: true,
           data: _self.chartData.map((item, ind) => {
-            const { name, value } = item;
+            const label = item[keys.label];
+            const value = item[keys.value];
             return {
               value,
-              name,
+              name: label,
               tooltip: {
                 borderWidth: 1
               }
             };
           })
-        }],
+        },
         dataZoom: _self.showZoom ? [{ height: 20, bottom: 0 }] : [],
       };
       if (!this.markPoint) {
         this.$delete(option.series[0], "markPoint");
       }
+      if (this.simpleMode) {
+        EchartsUtil.applySimpleMode(option, "bar");
+      }
       this.myChart = EchartsUtil.init(_self.$refs.barchart, this.theme, option, this.size);
     }
   }

package/src/components/ex-chart/ExLine.vue

@@ -6,10 +6,6 @@ import EchartsUtil from "./utils";
 export default {
   name: "XtLine",
   props: {
-    isDark: {
-      type: Boolean, // 设置文字标线为白色系
-      default: false
-    },
     theme: {},
     size: {
       type: String,
@@ -19,23 +15,31 @@ export default {
       type: Array,
       default: () => {
         return [
-          { value: 53, name: "张三" },
-          { value: 10, name: "李四" },
-          { value: 60, name: "宋五" }
+          { value: 53, label: "张三" },
+          { value: 10, label: "李四" },
+          { value: 60, label: "宋五" }
         ];
       }
     },
+    fieldKeys: {
+      type: Object,
+      default: () => ({ label: "label", value: "value", data: "data" })
+    },
     isArea: {
       type: Boolean,
       default: false
     },
-    energyType: {
+    unit: {
       type: String,
       default: ""
     },
     intervalvalue: {
       type: Number,
       default: 0
+    },
+    simpleMode: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -51,7 +55,7 @@ export default {
         _self.initChart();
       }
     },
-    energyType: {
+    unit: {
       deep: true,
       handler(newVal, oldVal) {
         const _self = this;
@@ -67,9 +71,11 @@ export default {
   },
   methods: {
     initChart() {
-      console.log(this.intervalvalue);
       const _self = this;
-      // 数据处理
+      const keys = Object.assign(
+        { label: "label", value: "value", data: "data" },
+        _self.fieldKeys || {}
+      );
       const option = {
         animationDuration: 500,
         grid: {
@@ -91,7 +97,7 @@ export default {
           },
           boundaryGap: false,
           data: _self.chartData.map((item) => {
-            return item.name;
+            return item[keys.label];
           })
         }],
         yAxis: {
@@ -109,7 +115,7 @@ export default {
               type: "dashed"
             }
           },
-          name: _self.energyType,
+          name: _self.unit,
           scale: true,
           axisLabel: {
             margin: 2,
@@ -130,11 +136,14 @@ export default {
           smooth: true,
           avoidLabelOverlap: true,
           data: _self.chartData.map((item, ind) => {
-            return item.value;
+            return item[keys.value];
           })
         }]
       };
 
+      if (this.simpleMode) {
+        EchartsUtil.applySimpleMode(option, "line");
+      }
       this.myChart = EchartsUtil.init(_self.$refs.linechart, this.theme, option, this.size);
     }
   }

package/src/components/ex-chart/ExMulti.vue

@@ -6,21 +6,20 @@ import EchartsUtil from "./utils";
 export default {
   name: "XtMulti",
   props: {
-    isDark: {
-      type: Boolean, // 设置文字标线为白色系
-      default: false
-    },
     theme: {},
     size: {
       type: String,
       default: "medium"
     },
-    // 新增极简模式开关
+    fieldKeys: {
+      type: Object,
+      default: () => ({ label: "label", value: "value", data: "data" })
+    },
     simpleMode: {
       type: Boolean,
       default: false
     },
-    highlightKey: String,// 需要高亮的日期/标识
+    highlightKey: String,
     config: {
       type: Object,
       default() {
@@ -29,7 +28,6 @@ export default {
           rotate: 0,
           gridbottom: 40,
           isShowthreshold: false
-
         };
       }
     },
@@ -97,16 +95,11 @@ export default {
     colors: {
       type: Array,
       default: () => { return []; }
-    },
-    energyType: {
-      type: [String, Array],
-      default: ""
     }
   },
   data() {
     return {
       myChart: null
-      // chartList: []
     };
   },
   watch: {
@@ -119,18 +112,6 @@ export default {
         _self.initChart();
       }
     },
-    energyType: {
-      deep: true,
-      handler(newVal, oldVal) {
-        if (newVal && oldVal && newVal.toString() == oldVal.toString()) {
-          return;
-        }
-        this.myChart && this.myChart.dispose();
-        this.myChart = null;
-        const _self = this;
-        _self.initChart();
-      }
-    },
     theme(newVal) {
       this.myChart && this.myChart.dispose();
       this.myChart = null;
@@ -143,6 +124,10 @@ export default {
   methods: {
     initChart() {
       const _self = this;
+      const keys = Object.assign(
+        { label: "label", value: "value", data: "data" },
+        _self.fieldKeys || {}
+      );
 
       // 从 chartData 中收集所有 unit，并保持首次出现顺序去重
       const uniqueUnits = [];
@@ -153,24 +138,13 @@ export default {
         }
       });
 
-      // 单个 yAxis 的生成函数
       const groupYAxis = (unit, index) => {
         const yAxis = {
           type: "value",
           name: unit,
-          axisLine: {
-            show: false,
-            lineStyle: {
-            }
-          },
-          axisTick: {
-            show: false
-          },
-          splitLine: {
-            lineStyle: {
-              type: "dashed"
-            }
-          },
+          axisLine: { show: false, lineStyle: {} },
+          axisTick: { show: false },
+          splitLine: { lineStyle: { type: "dashed" } },
           axisLabel: {
             formatter: function(value, index) {
               if (value >= 10000 && value < 10000000) {
@@ -189,27 +163,28 @@ export default {
         return yAxis;
       };
 
-      // 根据去重后的 unit 生成 yAxis
       const yAxisList = uniqueUnits.length
         ? uniqueUnits.map((unit, idx) => groupYAxis(unit, idx))
         : [groupYAxis("", 0)];
 
-      // unit -> yAxisIndex 的映射，便于 series 绑定
       const unitToYAxisIndex = {};
       uniqueUnits.forEach((unit, idx) => {
         unitToYAxisIndex[unit] = idx;
       });
 
+      const firstSeriesData = _self.chartData && _self.chartData.length
+        ? _self.chartData[0][keys.data] || []
+        : [];
+
       const option = {
         legend: {
           right: 20,
           top: 0,
           show: true,
           data: _self.chartData.map((item) => {
-            return item.label;
+            return item[keys.label];
           }),
-          textStyle: {
-          }
+          textStyle: {}
         },
         tooltip: {
           borderWidth: 1,
@@ -229,9 +204,9 @@ export default {
           axisLabel: {
             rotate: this.config.rotate
           },
-          data: _self.chartData && _self.chartData.length ? _self.chartData[0].data.map((item) => {
-            return item.label;
-          }) : []
+          data: firstSeriesData.map((item) => {
+            return item[keys.label];
+          })
         },
         yAxis: yAxisList,
         dataZoom: [
@@ -242,21 +217,24 @@ export default {
             end: 100
           }
         ],
-        series: this.getSeriesData(unitToYAxisIndex)
+        series: this.getSeriesData(unitToYAxisIndex, keys)
       };
+      if (this.simpleMode) {
+        EchartsUtil.applySimpleMode(option, "multi");
+      }
       this.myChart = EchartsUtil.init(_self.$refs.multilinechart, this.theme, option, this.size);
     },
-    getSeriesData(unitToYAxisIndex) {
+    getSeriesData(unitToYAxisIndex, keys) {
       const _self = this;
-
       const _seriesData = [];
-      _self.chartData.map((item, ind) => {
+      _self.chartData.forEach((item, ind) => {
+        const seriesItems = item[keys.data] || [];
         const _item = {
           animation: true,
-          name: item.label,
+          name: item[keys.label],
           type: item.type || "bar",
           avoidLabelOverlap: true,
-          data: item.data.map(it => it.value),
+          data: seriesItems.map(it => it[keys.value]),
           yAxisIndex: unitToYAxisIndex[item.unit || ""] != null ? unitToYAxisIndex[item.unit || ""] : 0
         };
         _seriesData.push(_item);

package/src/components/ex-chart/ExPie.vue

@@ -15,12 +15,16 @@ export default {
       type: Array,
       default: () => {
         return [
-          { value: 53, name: "张三" },
-          { value: 10, name: "李四" },
-          { value: 60, name: "宋五" }
+          { value: 53, label: "张三" },
+          { value: 10, label: "李四" },
+          { value: 60, label: "宋五" }
         ];
       }
     },
+    fieldKeys: {
+      type: Object,
+      default: () => ({ label: "label", value: "value", data: "data" })
+    },
     colors: {
       type: Array,
       default: () => { return []; }
@@ -33,12 +37,11 @@ export default {
       type: Boolean,
       default: true
     },
-    // 新增极简模式开关
     simpleMode: {
       type: Boolean,
       default: false
     },
-    highlightKey: String,// 需要高亮的日期/标识
+    highlightKey: String,
     roseType: {
       type: String,
       default: ""
@@ -59,7 +62,11 @@ export default {
   },
   computed: {
     totalNum() {
-      return this.chartData.map(it => parseFloat(it.value)).reduce((pre, aft) => { return pre + aft; }, 0);
+      const keys = Object.assign(
+        { label: "label", value: "value", data: "data" },
+        this.fieldKeys || {}
+      );
+      return this.chartData.map(it => parseFloat(it[keys.value])).reduce((pre, aft) => { return pre + aft; }, 0);
     }
   },
   watch: {
@@ -78,23 +85,19 @@ export default {
     this.$nextTick(() => {
       this.initChart();
     });
-    /* setTimeout(() => {
-      this.initChart();
-    }, 1000); */
   },
   methods: {
     initChart() {
       const _self = this;
-      // 数据处理
+      const keys = Object.assign(
+        { label: "label", value: "value", data: "data" },
+        _self.fieldKeys || {}
+      );
       const option = {
         title: {
           text: `${_self.totalLabel}:${_self.totalNum}`,
           textStyle: {
-            color: "#808080",
-            fontSize: 20
           },
-          // left: "40%",
-          // top: "45%",
           top: "middle",
           left: "center"
         },
@@ -122,10 +125,11 @@ export default {
           minAngle: 5,
           avoidLabelOverlap: true,
           data: _self.chartData.map((item, ind) => {
-            const { name, value } = item;
+            const label = item[keys.label];
+            const value = item[keys.value];
             return {
               value,
-              name,
+              name: label,
               labelLine: {
                 show: this.showLabel
               },
@@ -146,6 +150,9 @@ export default {
           })
         }]
       };
+      if (this.simpleMode) {
+        EchartsUtil.applySimpleMode(option, "pie");
+      }
       this.myChart = EchartsUtil.init(_self.$refs.piechart, this.theme, option, this.size);
     }
   }

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

@@ -42,7 +42,7 @@ export default {
       color: "#ffffff"
     },
     itemStyle: {
-      borderColor: variables.xtColorBorder
+      borderColor: "#dcdfe6"
     }
   },
   gauge: {
@@ -83,11 +83,12 @@ export default {
     }
   },
   tooltip: {
-    backgroundColor: variables.xtColorBgOverlay,
-    borderColor: variables.xtColorBorder,
+    backgroundColor: "#333333",
     borderWidth: 1,
+    borderColor: "#dcdfe6",
     textStyle: {
       color: "#fff"
     }
-  }
+  },
+  trigger: "axis"
 };

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

@@ -102,6 +102,7 @@ export default {
   tooltip: {
     borderWidth: 1,
     backgroundColor: "#ffffff",
+    borderColor: "#dcdfe6",
     textStyle: {
       color: "#333333"
     },