xt-element-ui 1.1.0 → 1.1.2

package/src/components/chart/ExBar.vue

@@ -0,0 +1,203 @@
+<template>
+  <div ref="barchart" class="bar-box"></div>
+</template>
+<script>
+import EchartsUtil from "./utils";
+export default {
+  name: "XtBar",
+  props: {
+    chartData: {
+      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: "张三" }
+        ];
+      }
+    },
+    theme: {},
+    size: {
+      type: String,
+      default: "medium"
+    },
+    // name: {
+    //   type: String,
+    //   default: ""
+    // },
+    markPoint: {
+      type: Boolean,
+      default: false
+    },
+    energyType: {
+      type: String,
+      default: ""
+    },
+    showZoom: {
+      type: Boolean,
+      default: false
+    },
+    reverse: {
+      type: Boolean,
+      default: false
+    },
+    longLable: { // 名称占50% 的 grid值
+      type: Boolean,
+      default: false
+    },
+    longLableSplitNum: {
+      type: Number,
+      default: 1
+    },
+    longLablePx: {
+      type: Number,
+      default: 150
+    },
+    splitNumber: {
+      type: Number,
+      default: 5
+    }
+  },
+  data() {
+    return {
+      myChart: null,
+      name: "数量"
+    };
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(newVal, oldVal) {
+        const _self = this;
+        _self.initChart();
+      }
+    },
+    energyType: {
+      deep: true,
+      handler(newVal, oldVal) {
+        const _self = this;
+        if (newVal == "kW.h") {
+          _self.name = "用电量";
+        } else if (newVal == "m³") {
+          _self.name = "用气量";
+        }
+        _self.initChart();
+      }
+    }
+  },
+  mounted() {
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      const _self = this;
+      // 数据处理
+      const _xAxis = {
+        type: "category",
+        inverse: this.reverse,
+        axisLabel: {
+          interval: 0,
+          formatter: function(value) {
+            return !_self.reverse && _self.longLable ? value.replace(new RegExp(`(.{${_self.longLableSplitNum}})`, 'g'), `$1\n`) : value;
+          }
+        },
+        data: _self.chartData.map((item) => {
+          return item.name;
+        })
+      };
+      const _yAxis = {
+        type: "value",
+        splitLine: {
+          lineStyle: {
+            type: "dashed"
+          }
+        },
+        name: _self.energyType,
+        axisTick: {
+          inside: true
+        },
+        min: 0,
+        splitNumber: _self.splitNumber,
+        max: function(value) {
+          return Math.ceil(value.max / _self.splitNumber) * _self.splitNumber;
+        },
+        scale: true,
+        axisLabel: {
+          margin: 2,
+          formatter: function(value, index) {
+            if (value >= 10000 && value < 10000000) {
+              value = value / 10000 + "万";
+            } else if (value >= 10000000) {
+              value = value / 10000000 + "千万";
+            }
+            return value;
+          }
+        }
+      };
+
+      const option = {
+        legend: {
+          right: 20,
+          top: 0,
+          textStyle: {
+            fontSize: 12
+          }
+        },
+        tooltip: {
+          borderWidth: 1,
+          trigger: "item"
+        },
+        grid: {
+          top: "10",
+          left: 40 + (this.reverse && this.longLable ? _self.longLablePx : 0),
+          right: "10",
+          bottom: (_self.showZoom ? 50 : 20) + (!_self.reverse && _self.longLable ? _self.longLablePx : 0),
+          containLabel: true
+        },
+        xAxis: this.reverse ? _yAxis : _xAxis,
+        yAxis: this.reverse ? _xAxis : _yAxis,
+        series: [{
+          name: _self.name,
+          type: "bar",
+          markPoint: {
+            data: [
+              { type: "min", name: "Min" },
+              { type: "max", name: "Max" }
+            ]
+          },
+          avoidLabelOverlap: true,
+          data: _self.chartData.map((item, ind) => {
+            const { name, value } = item;
+            return {
+              value,
+              name,
+              tooltip: {
+                borderWidth: 1
+              }
+            };
+          })
+        }],
+        dataZoom: _self.showZoom ? [{ height: 20, bottom: 0 }] : [],
+      };
+      if (!this.markPoint) {
+        this.$delete(option.series[0], "markPoint");
+      }
+      this.myChart = EchartsUtil.init(_self.$refs.barchart, this.theme, option, this.size);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.bar-box{
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+</style>

package/src/components/chart/ExLine.vue

@@ -0,0 +1,146 @@
+<template>
+  <div ref="linechart" class="line-box"></div>
+</template>
+<script>
+import EchartsUtil from "./utils";
+export default {
+  name: "XtLine",
+  props: {
+    isDark: {
+      type: Boolean, // 设置文字标线为白色系
+      default: false
+    },
+    theme: {},
+    size: {
+      type: String,
+      default: "medium"
+    },
+    chartData: {
+      type: Array,
+      default: () => {
+        return [
+          { value: 53, name: "张三" },
+          { value: 10, name: "李四" },
+          { value: 60, name: "宋五" }
+        ];
+      }
+    },
+    isArea: {
+      type: Boolean,
+      default: false
+    },
+    energyType: {
+      type: String,
+      default: ""
+    },
+    intervalvalue: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      myChart: null
+    };
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(newVal, oldVal) {
+        const _self = this;
+        _self.initChart();
+      }
+    },
+    energyType: {
+      deep: true,
+      handler(newVal, oldVal) {
+        const _self = this;
+        _self.initChart();
+      }
+    }
+  },
+  mounted() {
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      console.log(this.intervalvalue);
+      const _self = this;
+      // 数据处理
+      const option = {
+        animationDuration: 500,
+        grid: {
+          top: "18%",
+          left: "30",
+          right: "30",
+          bottom: "20"
+        },
+        xAxis: [{
+          type: "category",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed"
+            }
+          },
+          axisLabel: {
+            interval: this.intervalvalue
+          },
+          boundaryGap: false,
+          data: _self.chartData.map((item) => {
+            return item.name;
+          })
+        }],
+        yAxis: {
+          type: "value",
+          axisLine: {
+            show: false,
+            lineStyle: {
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            lineStyle: {
+              type: "dashed"
+            }
+          },
+          name: _self.energyType,
+          scale: true,
+          axisLabel: {
+            margin: 2,
+            formatter: function(value, index) {
+              if (value >= 10000 && value < 10000000) {
+                value = Math.floor(value / 10000) + "万";
+              } else if (value >= 10000000) {
+                value = Math.floor(value / 10000000) + "千万";
+              }
+              return value;
+            }
+          }
+        },
+        series: [{
+          type: "line",
+          symbol: "circle",
+          areaStyle: _self.isArea ? {} : null,
+          smooth: true,
+          avoidLabelOverlap: true,
+          data: _self.chartData.map((item, ind) => {
+            return item.value;
+          })
+        }]
+      };
+
+      this.myChart = EchartsUtil.init(_self.$refs.linechart, this.theme, option, this.size);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.line-box{
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+</style>

package/src/components/chart/ExMulti.vue

@@ -0,0 +1,257 @@
+<template>
+  <div ref="multilinechart" class="multiline-box"></div>
+</template>
+<script>
+import EchartsUtil from "./utils";
+export default {
+  name: "XtMulti",
+  props: {
+    isDark: {
+      type: Boolean, // 设置文字标线为白色系
+      default: false
+    },
+    theme: {},
+    size: {
+      type: String,
+      default: "medium"
+    },
+    config: {
+      type: Object,
+      default() {
+        return {
+          interval: 0,
+          rotate: 0,
+          gridbottom: 40,
+          isShowthreshold: false
+
+        };
+      }
+    },
+    chartData: {
+      type: Array,
+      default: () => {
+        return [
+          {
+            label: "入户数",
+            data: [
+              { label: "01月", value: 980 },
+              { label: "02月", value: 806 },
+              { label: "03月", value: 930 },
+              { label: "04月", value: 804 },
+              { label: "05月", value: 750 },
+              { label: "06月", value: 660 },
+              { label: "07月", value: 780 },
+              { label: "08月", value: 630 },
+              { label: "09月", value: 806 },
+              { label: "10月", value: 950 },
+              { label: "11月", value: 810 },
+              { label: "12月", value: 703 }
+            ]
+          },
+          {
+            label: "隐患数",
+            data: [
+              { label: "01月", value: 200 },
+              { label: "02月", value: 120 },
+              { label: "03月", value: 110 },
+              { label: "04月", value: 109 },
+              { label: "05月", value: 108 },
+              { label: "06月", value: 150 },
+              { label: "07月", value: 126 },
+              { label: "08月", value: 130 },
+              { label: "09月", value: 108 },
+              { label: "10月", value: 109 },
+              { label: "11月", value: 140 },
+              { label: "12月", value: 106 }
+            ]
+          },
+          {
+            label: "整改数",
+            data: [
+              { label: "01月", value: 25 },
+              { label: "02月", value: 19 },
+              { label: "03月", value: 34 },
+              { label: "04月", value: 12 },
+              { label: "05月", value: 16 },
+              { label: "06月", value: 20 },
+              { label: "07月", value: 19 },
+              { label: "08月", value: 18 },
+              { label: "09月", value: 14 },
+              { label: "10月", value: 12 },
+              { label: "11月", value: 11 },
+              { label: "12月", value: 16 }
+            ]
+          }
+        ];
+      }
+    },
+    colors: {
+      type: Array,
+      default: () => { return []; }
+    },
+    selectedNew: {
+      type: Object,
+      default: null
+    },
+    energyType: {
+      type: [String, Array],
+      default: ""
+    }
+  },
+  data() {
+    return {
+      myChart: null
+      // chartList: []
+    };
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(newVal, oldVal) {
+        const _self = this;
+        this.myChart && this.myChart.dispose();
+        this.myChart = null;
+        _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();
+      }
+    }
+  },
+  mounted() {
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      const _self = this;
+      // 数据处理
+      const groupYAxis = (unit) => {
+        return {
+          type: "value",
+          name: unit,
+          axisLine: {
+            show: false,
+            lineStyle: {
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            lineStyle: {
+              type: "dashed"
+            }
+          },
+          axisLabel: {
+            formatter: function(value, index) {
+              if (value >= 10000 && value < 10000000) {
+                value = Math.floor(value / 10000) + "万";
+              } else if (value >= 10000000) {
+                value = Math.floor(value / 10000000) + "千万";
+              }
+              return value;
+            }
+          }
+        };
+      };
+      const option = {
+        legend: {
+          right: 20,
+          top: 0,
+          show: true,
+          data: _self.chartData.map((item) => {
+            return item.label;
+          }),
+          selectedMode: "multiple",
+          selected: _self.selectedNew,
+          textStyle: {
+            fontSize: 12
+          }
+        },
+        tooltip: {
+          borderWidth: 1,
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          }
+        },
+        grid: {
+          top: "25%",
+          left: "40",
+          right: "15",
+          bottom: this.config.gridbottom == null ? 20 : this.config.gridbottom
+        },
+        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;
+          }) : []
+        },
+        yAxis: typeof _self.energyType == "string" ? groupYAxis(_self.energyType) : this.energyType.map(unit => groupYAxis(unit)),
+        dataZoom: [
+          {
+            type: "inside",
+            xAxisIndex: [0],
+            start: 1,
+            end: 100
+          }
+        ],
+        series: this.getSeriesData()
+      };
+      this.myChart = EchartsUtil.init(_self.$refs.multilinechart, this.theme, option, this.size);
+    },
+    getSeriesData() {
+      // 创建 24小时 时间数据填充对象
+      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
+          }
+        };
+        const _item = {
+          animation: true,
+          name: item.label,
+          type: item.type || "bar",
+          avoidLabelOverlap: true,
+          data: item.data.map(it => it.value)
+        };
+        _seriesData.push(_item);
+      });
+      return _seriesData;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.multiline-box{
+  height: 100%;
+  width: 100%;
+}
+</style>