xt-element-ui 1.1.0 → 1.1.1

package/src/components/chart/ExPie.vue

@@ -0,0 +1,159 @@
+<template>
+  <div ref="piechart" class="pie-box"></div>
+</template>
+<script>
+import EchartsUtil from "./utils";
+export default {
+  name: "XtPie",
+  props: {
+    theme: {},
+    size: {
+      type: String,
+      default: "medium"
+    },
+    chartData: {
+      type: Array,
+      default: () => {
+        return [
+          { value: 53, name: "张三" },
+          { value: 10, name: "李四" },
+          { value: 60, name: "宋五" }
+        ];
+      }
+    },
+    colors: {
+      type: Array,
+      default: () => { return []; }
+    },
+    unit: {
+      type: String,
+      default: ""
+    },
+    showLegend: {
+      type: Boolean,
+      default: true
+    },
+    chartMode: {
+      type: String,
+      default: "dark"
+    },
+    roseType: {
+      type: String,
+      default: ""
+    },
+    showLabel: {
+      type: Boolean,
+      default: true
+    },
+    totalLabel: {
+      type: String,
+      default: "总数"
+    }
+  },
+  data() {
+    return {
+      myChart: null
+    };
+  },
+  computed: {
+    totalNum() {
+      return this.chartData.map(it => parseFloat(it.value)).reduce((pre, aft) => { return pre + aft; }, 0);
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(newVal, oldVal) {
+        const _self = this;
+        _self.initChart();
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+    /* setTimeout(() => {
+      this.initChart();
+    }, 1000); */
+  },
+  methods: {
+    initChart() {
+      const _self = this;
+      console.log(this.chartMode);
+      // 数据处理
+      const option = {
+        title: {
+          text: `${_self.totalLabel}:${_self.totalNum}`,
+          textStyle: {
+            color: "#808080",
+            fontSize: 20
+          },
+          // left: "40%",
+          // top: "45%",
+          top: "middle",
+          left: "center"
+        },
+        tooltip: {
+          trigger: "item"
+        },
+        legend: this.showLegend ? {
+          top: "top",
+          right: "20",
+          type: "scroll",
+          textStyle: {
+            color: "#808080"
+          }
+        } : null,
+        grid: {
+          left: 30,
+          right: 0,
+          top: 20,
+          bottom: 0,
+          containLabel: true
+        },
+        series: [{
+          name: _self.unit,
+          type: "pie",
+          center: ["50%", "50%"],
+          roseType: this.roseType,
+          radius: ["50%", "65%"],
+          minAngle: 5,
+          avoidLabelOverlap: true,
+          data: _self.chartData.map((item, ind) => {
+            const { name, value } = item;
+            return {
+              value,
+              name,
+              labelLine: {
+                show: this.showLabel
+              },
+              emphasis: {
+                labelLine: {
+                  show: this.showLabel
+                }
+              },
+              label: {
+                show: this.showLabel
+              },
+              tooltip: {
+                formatter: "{b}:{c} ({d}%)",
+                position: "inside",
+                borderWidth: 1
+              }
+            };
+          })
+        }]
+      };
+      this.myChart = EchartsUtil.init(_self.$refs.piechart, this.theme, option, this.size);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.pie-box{
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+</style>

package/src/components/chart/ExTrend.vue

@@ -0,0 +1,121 @@
+<template>
+  <div ref="barchart" class="bar-box" :style="{width:width}"></div>
+</template>
+<script>
+import EchartsUtil from "./utils";
+export default {
+  name: "XtTrend",
+  props: {
+    type: {
+      type: String,
+      default: "bar"
+    },
+    theme: {},
+    size: {
+      type: String,
+      default: "medium"
+    },
+    chartData: {
+      type: Array,
+      default: () => {
+        return [
+          { value: 53, label: "正常设备" },
+          { value: 10, label: "正常设备" },
+          { value: 60, label: "离线设备" }
+        ];
+      }
+    },
+    width: {
+      type: String,
+      default: "100%"
+    },
+    energyType: {
+      type: String,
+      default: "m³"
+    }
+  },
+  data() {
+    return {
+      myChart: null
+    };
+  },
+  watch: {
+    type: {
+      handler() {
+        const _self = this;
+        const option = _self.getOption();
+        _self.myChart.setOption(option);
+      }
+    },
+    chartData: {
+      deep: true,
+      handler(newVal, oldVal) {
+        const _self = this;
+        _self.initChart();
+      }
+    }
+  },
+  mounted() {
+    this.initChart();
+  },
+  methods: {
+    getOption() {
+      const _self = this;
+      // 数据处理
+      const option = {
+        xAxis: {
+          type: "category",
+          axisTick: {
+            show: false,
+            splitLine: {
+              lineStyle: {
+              }
+            }
+          },
+          axisLabel: {
+          }
+        },
+        tooltip: {
+          borderWidth: 1,
+          trigger: "item"
+        },
+        grid: {
+          top: "10",
+          left: "10",
+          right: "10",
+          bottom: "20"
+        },
+        yAxis: {
+          show: false,
+          type: "value"
+        },
+        series: {
+          type: _self.type || "bar",
+          areaStyle: {},
+          showSymbol: false,
+          smooth: true,
+          data: _self.chartData.map((item, ind) => {
+            const { label, value } = item;
+            return {
+              value,
+              label
+            };
+          })
+        }
+      };
+      return option;
+    },
+    initChart() {
+      const _self = this;
+      // 数据处理
+      const option = this.getOption();
+      this.myChart = EchartsUtil.init(_self.$refs.barchart, this.theme, option, this.size);
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.bar-box{
+  position: relative;
+}
+</style>

package/src/components/chart/index.js

@@ -0,0 +1,2 @@
+import XtChart from './index.vue'
+export default XtChart

package/src/components/chart/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <ex-bar v-if="type=='bar'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-bar>
+  <ex-line v-else-if="type=='line'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-line>
+  <ex-pie v-else-if="type=='pie'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-pie>
+  <ex-multi v-else-if="type=='multi'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-multi>
+  <ex-trend v-else-if="type=='trend'" v-bind="$attrs" :theme="myTheme" :size="mySize"></ex-trend>
+</template>
+<script>
+export default {
+  name: "XtChart",
+  components: {
+    ExBar: () => import("./ExBar.vue"),
+    ExLine: () => import("./ExLine.vue"),
+    ExPie: () => import("./ExPie.vue"),
+    ExMulti: () => import("./ExMulti.vue"),
+    ExTrend: () => import("./ExTrend.vue")
+  },
+  props: {
+    theme: {
+      type: String,
+      default: ""
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: (value) => {
+        return ['small', 'medium', 'large'].includes(value)
+      }
+    },
+    type: {
+      type: String,
+      required: true,
+      default: "bar"
+    }
+  },
+  data() {
+    return {
+      myTheme: this.theme,
+      mySize: this.size
+    };
+  },
+  watch: {
+    theme(newVal) {
+      this.myTheme = newVal;
+    },
+    size(newVal) {
+      this.mySize = newVal;
+    }
+  }
+};
+</script>

package/src/components/chart/pieList.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="pieLBox">
+    <div class="left">
+      <ExPie class="chart-box" :chart-data="chartData" :showLegend="false" :showLabel="false" :colors="colors"></ExPie>
+    </div>
+    <div class="right">
+      <div v-for="(item, index) in chartData" :key="index" class="box">
+        <div class="itH">
+          <span class="sign" :style="{background: colors[index]}"></span>
+          <span>{{ item.name }}</span>
+          <span class="fr">占比</span>
+        </div>
+        <div class="itB">
+          <span class="sign"></span>
+          <span>{{ item.value }}</span>
+          <span class="fr">{{ parseFloat( item.value * 100 / totalNum ).toFixed(2)+"%" }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "XtPieLine",
+  props: {
+    chartData: {
+      type: Array,
+      default: () => {
+        return [
+          { value: 538, name: "管道" },
+          { value: 250, name: "阀门" },
+          { value: 60, name: "燃气表" },
+          { value: 6, name: "其他" }
+        ];
+      }
+    },
+    colors: {
+      type: Array,
+      default: () => { return ["#F38787", "#B3BFCB", "#2CDEB3", "#A17EE6", "#E57E40", "#409EFF"]; }
+    }
+  },
+  data() {
+    return {
+      myChart: null
+    };
+  },
+  computed: {
+    totalNum() {
+      return this.chartData.map(it => parseFloat(it.value)).reduce((pre, aft) => { return pre + aft; }, 0);
+    }
+  },
+  watch: {
+  },
+  mounted() {
+  },
+  methods: {
+  }
+};
+</script>
+<style lang="scss" scoped>
+.pieLBox{
+  display: flex;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  @include font_color("fontColor");
+}
+.left{
+  flex: 1;
+  width: 50%;
+  .chart-box{
+    height: calc(100% - 20px);
+    width: 100%;
+    position: relative;
+  }
+}
+.right{
+  width: 50%;
+  height: calc(100% - 20px);
+  overflow-y: auto;
+  padding: 0px 10px 0 0;
+  .box{
+    padding-top: 28px;
+    padding-bottom: 3px;
+    border-bottom: 1px solid rgba(0, 0, 0, .1);
+    &:first-child{
+      padding-top: 3px;
+    }
+    &:last-child{
+      border-bottom-color: transparent;
+    }
+    .itH{
+      margin-bottom: 20px;
+      font-size: 14px;
+      .sign{
+        display: inline-block;
+        width: 12px;
+        height: 8px;
+        margin-right: 10px;
+      }
+    }
+    .itB{
+      font-size: 15px;
+    }
+    .fr{
+      float: right;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,91 @@
+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/chart/theme/dark.js

@@ -0,0 +1,91 @@
+export default {
+  color: ["#0de7ff", "#a782ff", "#fcdd60", "#0de7ff", "#ffc5a1", "#6291ae", "#13ce66"],
+  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/orange.js

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