update

parts/statistics/bar.vue

@@ -1,10 +1,12 @@
 <template>
   <div id="bar">
     <div :id="gid"></div>
+    <download :gid="gid" :canvas="canvas"></download>
   </div>
 </template>
 
 <script>
+import download from '@frame/parts/statistics/to-download';
 import _ from 'lodash';
 import { Bar } from '@antv/g2plot';
 import { mapState, createNamespacedHelpers } from 'vuex';
@@ -15,11 +17,12 @@ export default {
     axis: { type: Object, default: () => {} },
     gid: { type: String, default: `${new Date().getTime()}` },
   },
-  components: {},
+  components: { download },
   data: function() {
     return {
       chart: null,
       list: [],
+      canvas: undefined,
     };
   },
   created() {},
@@ -82,11 +85,21 @@ export default {
         },
       });
       this.chart.render();
+      this.prepaid();
     },
     gclick(data) {
       console.log('in function:gclick');
       console.log(data);
     },
+    prepaid() {
+      let doc = document.getElementById(this.gid);
+      let cav = doc.getElementsByTagName('canvas');
+      if (cav.length <= 0) {
+        console.warn('没有找到图表');
+        return;
+      }
+      this.$set(this, `canvas`, cav[0]);
+    },
   },
   computed: {
     ...mapState(['user']),

parts/statistics/column.vue

@@ -1,10 +1,12 @@
 <template>
   <div id="column">
     <div :id="gid"></div>
+    <download :gid="gid" :canvas="canvas"></download>
   </div>
 </template>
 
 <script>
+import download from '@frame/parts/statistics/to-download';
 import { Column } from '@antv/g2plot';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
@@ -14,11 +16,12 @@ export default {
     axis: { type: Object, default: () => {} },
     gid: { type: String, default: `${new Date().getTime()}` },
   },
-  components: {},
+  components: { download },
   data: function() {
     return {
       chart: null,
       list: [],
+      canvas: undefined,
     };
   },
   created() {},
@@ -54,11 +57,21 @@ export default {
         },
       });
       this.chart.render();
+      this.prepaid();
     },
     gclick(data) {
       console.log('in function:gclick');
       console.log(data);
     },
+    prepaid() {
+      let doc = document.getElementById(this.gid);
+      let cav = doc.getElementsByTagName('canvas');
+      if (cav.length <= 0) {
+        console.warn('没有找到图表');
+        return;
+      }
+      this.$set(this, `canvas`, cav[0]);
+    },
   },
   watch: {
     data: {

parts/statistics/donut.vue

@@ -1,10 +1,12 @@
 <template>
   <div id="donut">
     <div :id="gid"></div>
+    <download :gid="gid" :canvas="canvas"></download>
   </div>
 </template>
 
 <script>
+import download from '@frame/parts/statistics/to-download';
 import { Donut } from '@antv/g2plot';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
@@ -14,11 +16,12 @@ export default {
     axis: { type: Object, default: () => {} },
     gid: { type: String, default: `${new Date().getTime()}` },
   },
-  components: {},
+  components: { download },
   data: function() {
     return {
       chart: null,
       list: [],
+      canvas: undefined,
     };
   },
   created() {},
@@ -60,11 +63,21 @@ export default {
         },
       });
       this.chart.render();
+      this.prepaid();
     },
     gclick(data) {
       console.log('in function:gclick');
       console.log(data);
     },
+    prepaid() {
+      let doc = document.getElementById(this.gid);
+      let cav = doc.getElementsByTagName('canvas');
+      if (cav.length <= 0) {
+        console.warn('没有找到图表');
+        return;
+      }
+      this.$set(this, `canvas`, cav[0]);
+    },
   },
   computed: {
     ...mapState(['user']),

parts/statistics/pie.vue

@@ -1,10 +1,12 @@
 <template>
   <div id="pie">
     <div :id="gid"></div>
+    <download :gid="gid" :canvas="canvas"></download>
   </div>
 </template>
 
 <script>
+import download from '@frame/parts/statistics/to-download';
 import { Pie } from '@antv/g2plot';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
@@ -14,11 +16,12 @@ export default {
     axis: { type: Object, default: () => {} },
     gid: { type: String, default: `${new Date().getTime()}` },
   },
-  components: {},
+  components: { download },
   data: function() {
     return {
       chart: null,
       list: [],
+      canvas: undefined,
     };
   },
   created() {},
@@ -56,11 +59,21 @@ export default {
         },
       });
       this.chart.render();
+      this.prepaid();
     },
     gclick(data) {
       console.log('in function:gclick');
       console.log(data);
     },
+    prepaid() {
+      let doc = document.getElementById(this.gid);
+      let cav = doc.getElementsByTagName('canvas');
+      if (cav.length <= 0) {
+        console.warn('没有找到图表');
+        return;
+      }
+      this.$set(this, `canvas`, cav[0]);
+    },
   },
   computed: {
     ...mapState(['user']),

parts/statistics/to-download.vue

@@ -0,0 +1,47 @@
+<template>
+  <div id="to-download">
+    <el-row type="flex" align="middle" justify="center" style="margin-bottom:20px">
+      <el-col :span="2">
+        <el-button size="mini" type="primary" plain icon="el-icon-download" @click="downLoad"></el-button>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'to-download',
+  props: {
+    canvas: { type: null },
+    gid: { type: String, default: `${new Date().getTime()}` },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {
+    downLoad() {
+      let e = this.canvas;
+      let img = e.toDataURL('image/png', 1);
+      let a = document.createElement('a');
+      a.href = img;
+      a.download = this.gid;
+      a.click();
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>