转移g2统计组件到util项目了

src/components/statistics/bar.vue

@@ -1,127 +0,0 @@
-<template>
-  <div id="bar">
-    <div :id="gid"></div>
-  </div>
-</template>
-
-<script>
-import _ from 'lodash';
-import { Bar, Column } from '@antv/g2plot';
-import { mapState, createNamespacedHelpers } from 'vuex';
-export default {
-  name: 'bar',
-  props: {
-    data: { type: [Object, Array], default: () => [] },
-    axis: { type: Object, default: () => {} },
-    gid: { type: String, default: `${new Date().getTime()}` },
-    horizontal: { type: Boolean, default: true },
-  },
-  components: {},
-  data: function() {
-    return {
-      chart: null,
-      list: [],
-    };
-  },
-  created() {},
-  mounted() {
-    this.init();
-  },
-  methods: {
-    async init() {
-      let e = document.getElementById(this.gid);
-      if (!e) {
-        console.warn('没有找到指定渲染容器');
-        return;
-      }
-      if (!this.list) {
-        //未获得数据
-        return;
-      }
-      if (this.chart) {
-        this.chart.updateConfig({ data: this.list });
-      } else {
-        let { x, y, xAlias, yAlias } = this.axis;
-        let meta = {};
-        meta[x] = { alias: xAlias };
-        meta[y] = { alias: yAlias };
-        let options = {
-          pixelRatio: 1,
-          data: this.list,
-          //条形和柱状的x,y轴需要互换
-          xField: this.horizontal ? y : x,
-          yField: this.horizontal ? x : y,
-          meta: meta,
-          point: {
-            visible: true,
-          },
-          label: {
-            visible: true,
-          },
-          //stackField + legend 一起使用,前者确定以哪个字段作为选项,后者是显示与否,位置
-          stackField: x,
-          legend: {
-            visible: true,
-            position: 'right-top',
-          },
-          xAxis: {
-            nice: true,
-            visible: true,
-            line: {
-              visible: true,
-            },
-            grid: {
-              visible: true,
-            },
-            tickLine: {
-              visible: true,
-            },
-          },
-          yAxis: {
-            nice: true,
-            visible: true,
-            grid: {
-              visible: true,
-            },
-            line: {
-              visible: true,
-            },
-          },
-
-          events: {
-            // onColumnClick: e => this.gclick(e),
-          },
-        };
-        if (this.horizontal) this.chart = new Bar(this.gid, options);
-        else this.chart = new Column(this.gid, options);
-      }
-      this.chart.render();
-    },
-  },
-  computed: {
-    ...mapState(['user']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
-  },
-  watch: {
-    data: {
-      handler(val) {
-        if (val.length > 0) this.$set(this, `list`, val);
-      },
-      immediate: true,
-      deep: true,
-    },
-    list: {
-      handler(val) {
-        if (val) this.$nextTick(() => this.init());
-      },
-    },
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
-};
-</script>
-
-<style lang="less" scoped></style>

src/components/statistics/donut.vue

@@ -1,102 +0,0 @@
-<template>
-  <div id="donut">
-    <div :id="gid"></div>
-  </div>
-</template>
-
-<script>
-import { mapState, createNamespacedHelpers } from 'vuex';
-import { Donut } from '@antv/g2plot';
-export default {
-  name: 'donut',
-  props: {
-    data: { type: Array, default: () => [] },
-    axis: { type: Object, default: () => {} }, //{x:x轴字段名; xAlias:x轴名称; y:y轴字段名; yAlias:y轴名称}
-    gid: { type: String, default: `${new Date().getTime()}` },
-    headTitle: { type: String, default: '' },
-  },
-  components: {},
-  data: function() {
-    return {
-      chart: null,
-      list: undefined,
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    async init() {
-      let e = document.getElementById(this.gid);
-      if (!e) {
-        console.warn('没有找到指定渲染容器');
-        return;
-      }
-      if (!this.list) {
-        //未获得数据
-        return;
-      }
-      if (this.chart) {
-        this.chart.updateConfig({ data: this.list });
-      } else {
-        let { x, y, xAlias, yAlias } = this.axis;
-        let meta = {};
-        meta[x] = { alias: xAlias };
-        meta[y] = { alias: yAlias };
-        this.chart = new Donut(this.gid, {
-          title: { visible: true, text: this.headTitle },
-          pixelRatio: 4,
-          data: this.list,
-          colorField: x,
-          angleField: y,
-          meta: meta,
-          point: {
-            visible: true,
-          },
-          label: {
-            visible: true,
-            type: 'spider',
-            formatter: (text, item) => `${item._origin[x]}: ${item._origin[y]}`,
-          },
-          //stackField + legend 一起使用,前者确定以哪个字段作为选项,后者是显示与否,位置
-          stackField: x,
-          legend: {
-            visible: true,
-            position: 'right-top',
-          },
-          events: {
-            // onPieClick: e => this.gclick(e),
-          },
-        });
-      }
-
-      this.chart.render();
-    },
-  },
-  watch: {
-    data: {
-      handler(val) {
-        if (val.length > 0) this.$set(this, `list`, val);
-      },
-      immediate: true,
-      deep: true,
-    },
-    list: {
-      handler(val) {
-        if (val) this.$nextTick(() => this.init());
-      },
-    },
-  },
-  computed: {
-    ...mapState(['user']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
-};
-</script>
-
-<style lang="less" scoped></style>

src/components/statistics/liquid.vue

@@ -1,81 +0,0 @@
-<template>
-  <div id="liquid">
-    <div :id="gid" style="height:450px"></div>
-  </div>
-</template>
-
-<script>
-import _ from 'lodash';
-import { mapState, createNamespacedHelpers } from 'vuex';
-import { Liquid } from '@antv/g2plot';
-export default {
-  name: 'liquid',
-  props: {
-    data: { type: [Number, String], default: 0 },
-    max: { type: Number, default: 100 }, //整体上限,调整比例
-    min: { type: Number, default: 0 }, //整体上限,调整比例
-    gid: { type: String, default: `${new Date().getTime()}` },
-    headTitle: { type: String, default: '' },
-  },
-  components: {},
-  data: function() {
-    return {
-      chart: null,
-      value: 0,
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  created() {},
-  methods: {
-    async init() {
-      let e = document.getElementById(this.gid);
-      if (!e) {
-        console.warn('没有找到指定渲染容器');
-        return;
-      }
-      if (this.chart) {
-        this.chart.updateConfig({ value: this.value });
-      } else {
-        this.chart = new Liquid(this.gid, {
-          title: { visible: true, text: this.headTitle },
-          min: this.min,
-          max: this.max,
-          value: this.value, //
-          events: {
-            // onPieClick: e => this.gclick(e),
-          },
-        });
-      }
-
-      this.chart.render();
-    },
-  },
-  watch: {
-    data: {
-      handler(val) {
-        if (val) this.$set(this, `value`, val);
-      },
-      immediate: true,
-      deep: true,
-    },
-    value: {
-      handler(val) {
-        if (val) this.$nextTick(() => this.init());
-      },
-    },
-  },
-  computed: {
-    ...mapState(['user']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
-};
-</script>
-
-<style lang="less" scoped></style>

src/components/statistics/pie.vue

@@ -1,114 +0,0 @@
-<template>
-  <div id="down-pie">
-    <div :id="gid"></div>
-  </div>
-</template>
-
-<script>
-import { mapState, createNamespacedHelpers } from 'vuex';
-import { Pie } from '@antv/g2plot';
-export default {
-  name: 'downPie',
-  props: {
-    data: { type: Array, default: () => [] },
-    axis: { type: Object, default: () => {} }, //{x:x轴字段名; xAlias:x轴名称; y:y轴字段名; yAlias:y轴名称}
-    gid: { type: String, default: `${new Date().getTime()}` },
-    headTitle: { type: String, default: '' },
-  },
-  components: {},
-  data: () => {
-    return {
-      chart: null,
-      list: undefined,
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    async init() {
-      let e = document.getElementById(this.gid);
-      if (!e) {
-        console.warn('没有找到指定渲染容器');
-        return;
-      }
-      if (!this.list) {
-        //未获得数据
-        return;
-      }
-      if (this.chart) {
-        this.chart.updateConfig({ data: this.list });
-      } else {
-        let { x, y, xAlias, yAlias } = this.axis;
-        let meta = {};
-        meta[x] = { alias: xAlias };
-        meta[y] = { alias: yAlias };
-        this.chart = new Pie(this.gid, {
-          title: { visible: true, text: this.headTitle },
-          pixelRatio: 4,
-          data: this.list,
-          colorField: x,
-          angleField: y,
-          meta: meta,
-          point: {
-            visible: true,
-          },
-          label: {
-            visible: true,
-            type: 'spider',
-            formatter: (text, item) => `${item._origin[x]}: ${item._origin[y]}`,
-          },
-          //stackField + legend 一起使用,前者确定以哪个字段作为选项,后者是显示与否,位置
-          stackField: x,
-          legend: {
-            visible: true,
-            position: 'right-top',
-          },
-          events: {
-            // onPieClick: e => this.gclick(e),
-          },
-        });
-      }
-
-      this.chart.render();
-    },
-  },
-  watch: {
-    data: {
-      handler(val) {
-        if (val.length > 0) this.$set(this, `list`, val);
-      },
-      immediate: true,
-      deep: true,
-    },
-    list: {
-      handler(val) {
-        if (val) this.$nextTick(() => this.init());
-      },
-    },
-  },
-  computed: {
-    ...mapState(['user']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.rightData {
-  padding: 0 30px;
-  height: 391px;
-  overflow: hidden;
-}
-/deep/.el-table td {
-  padding: 8px 0;
-}
-/deep/.el-table th {
-  padding: 8px 0;
-}
-</style>

src/components/statistics/rose.vue

@@ -1,104 +0,0 @@
-<template>
-  <div id="rose">
-    <div :id="gid"></div>
-  </div>
-</template>
-
-<script>
-import { mapState, createNamespacedHelpers } from 'vuex';
-import { Rose } from '@antv/g2plot';
-export default {
-  name: 'rose',
-  props: {
-    data: { type: Array, default: () => [] },
-    axis: { type: Object, default: () => {} }, //{x:x轴字段名; xAlias:x轴名称; y:y轴字段名; yAlias:y轴名称}
-    gid: { type: String, default: `${new Date().getTime()}` },
-    headTitle: { type: String, default: '' },
-  },
-  components: {},
-  data: function() {
-    return {
-      chart: null,
-      list: undefined,
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    async init() {
-      let e = document.getElementById(this.gid);
-      if (!e) {
-        console.warn('没有找到指定渲染容器');
-        return;
-      }
-      if (!this.list) {
-        //未获得数据
-        return;
-      }
-      if (this.chart) {
-        this.chart.updateConfig({ data: this.list });
-      } else {
-        let { x, y, xAlias, yAlias } = this.axis;
-        let meta = {};
-        meta[x] = { alias: xAlias };
-        meta[y] = { alias: yAlias };
-        this.chart = new Rose(this.gid, {
-          title: { visible: true, text: this.headTitle },
-          pixelRatio: 4,
-          data: this.list,
-          radiusField: y,
-          categoryField: x,
-          colorField: x,
-          // angleField: y,
-          meta: meta,
-          point: {
-            visible: true,
-          },
-          label: {
-            visible: true,
-            type: 'spider',
-            formatter: (text, item) => `${item[x]}: ${item[y]}`,
-          },
-          //stackField + legend 一起使用,前者确定以哪个字段作为选项,后者是显示与否,位置
-          stackField: x,
-          legend: {
-            visible: true,
-            position: 'right-top',
-          },
-          events: {
-            // onPieClick: e => this.gclick(e),
-          },
-        });
-      }
-
-      this.chart.render();
-    },
-  },
-  watch: {
-    data: {
-      handler(val) {
-        if (val.length > 0) this.$set(this, `list`, val);
-      },
-      immediate: true,
-      deep: true,
-    },
-    list: {
-      handler(val) {
-        if (val) this.$nextTick(() => this.init());
-      },
-    },
-  },
-  computed: {
-    ...mapState(['user']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title };
-  },
-};
-</script>
-
-<style lang="less" scoped></style>