xt-element-ui 1.2.4 → 1.2.6

package/package.json

@@ -1,39 +1,80 @@
-{
-  "name": "xt-element-ui",
-  "version": "1.2.4",
-  "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"
-  ],
-  "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.6",
+  "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": "git+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,15 +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,
     config: {
       type: Object,
       default() {
@@ -23,7 +28,6 @@ export default {
           rotate: 0,
           gridbottom: 40,
           isShowthreshold: false
-
         };
       }
     },
@@ -33,6 +37,7 @@ export default {
         return [
           {
             label: "入户数",
+            unit: "户",
             data: [
               { label: "01月", value: 980 },
               { label: "02月", value: 806 },
@@ -50,6 +55,7 @@ export default {
           },
           {
             label: "隐患数",
+            unit: "个",
             data: [
               { label: "01月", value: 200 },
               { label: "02月", value: 120 },
@@ -67,6 +73,7 @@ export default {
           },
           {
             label: "整改数",
+            unit: "个",
             data: [
               { label: "01月", value: 25 },
               { label: "02月", value: 19 },
@@ -88,20 +95,11 @@ export default {
     colors: {
       type: Array,
       default: () => { return []; }
-    },
-    selectedNew: {
-      type: Object,
-      default: null
-    },
-    energyType: {
-      type: [String, Array],
-      default: ""
     }
   },
   data() {
     return {
       myChart: null
-      // chartList: []
     };
   },
   watch: {
@@ -114,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;
@@ -138,24 +124,27 @@ export default {
   methods: {
     initChart() {
       const _self = this;
-      // 数据处理
-      const groupYAxis = (unit) => {
-        return {
+      const keys = Object.assign(
+        { label: "label", value: "value", data: "data" },
+        _self.fieldKeys || {}
+      );
+
+      // 从 chartData 中收集所有 unit，并保持首次出现顺序去重
+      const uniqueUnits = [];
+      (_self.chartData || []).forEach(item => {
+        const u = item.unit || "";
+        if (uniqueUnits.indexOf(u) === -1) {
+          uniqueUnits.push(u);
+        }
+      });
+
+      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) {
@@ -167,20 +156,35 @@ export default {
             }
           }
         };
+        if (index > 0) {
+          yAxis.position = "right";
+          yAxis.splitLine = { show: false };
+        }
+        return yAxis;
       };
+
+      const yAxisList = uniqueUnits.length
+        ? uniqueUnits.map((unit, idx) => groupYAxis(unit, idx))
+        : [groupYAxis("", 0)];
+
+      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];
           }),
-          selectedMode: "multiple",
-          selected: _self.selectedNew,
-          textStyle: {
-            fontSize: 12
-          }
+          textStyle: {}
         },
         tooltip: {
           borderWidth: 1,
@@ -197,20 +201,14 @@ export default {
         },
         xAxis: {
           type: "category",
-          // splitLine: {
-          //   show: true,
-          //   lineStyle: {
-          //     type: "dashed"
-          //   }
-          // },
           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: typeof _self.energyType == "string" ? groupYAxis(_self.energyType) : this.energyType.map(unit => groupYAxis(unit)),
+        yAxis: yAxisList,
         dataZoom: [
           {
             type: "inside",
@@ -219,33 +217,25 @@ export default {
             end: 100
           }
         ],
-        series: this.getSeriesData()
+        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() {
-      // 创建 24小时 时间数据填充对象
+    getSeriesData(unitToYAxisIndex, keys) {
       const _self = this;
-
       const _seriesData = [];
-      _self.chartData.map((item, ind) => {
-        // debugger;
-        const _isNUll = item.data.some(it => !it.value || it.value == "--");
-        const _itemNull = {
-          type: "",
-          name: item.label,
-          connectNulls: true, // 断点连线，true-连接，false-不连接
-          data: item.data.map(it => it.value),
-          tooltip: {
-            show: false
-          }
-        };
+      _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);
       });