'图片下载'

src/components/AnalyseModule/components/SelectLineChart.vue

@@ -10,6 +10,7 @@ export default {
       y_data: null,
       fake_data: '全部',
       position_info: null,
+      myChart: null,
     };
   },
 
@@ -41,9 +42,9 @@ export default {
           this.fake_data = item.label;
         }
       });
-      let _that = this;
+      // let _that = this;
       let dom = document.getElementById(`${this.chart_id}`);
-      let myChart = this.$echarts.init(dom, null, {
+      this.myChart = this.$echarts.init(dom, null, {
         renderer: 'canvas',
         useDirtyRect: false,
       });
@@ -90,10 +91,25 @@ export default {
       };
 
       if (option && typeof option === 'object') {
-        myChart.setOption(option);
+        this.myChart.setOption(option);
       }
 
-      window.addEventListener('resize', myChart.resize);
+      window.addEventListener('resize', this.myChart.resize);
+    },
+    savePieImg(name = '图片') {
+      var picInfo = this.myChart.getDataURL({
+        type: 'png',
+        pixelRatio: 1, //放大两倍下载，之后压缩到同等大小展示。解决生成图片在移动端模糊问题
+        backgroundColor: '#fff',
+      }); //获取到的是一串base64信息
+      const elink = document.createElement('a');
+      elink.download = name;
+      elink.style.display = 'none';
+      elink.href = picInfo;
+      document.body.appendChild(elink);
+      elink.click();
+      URL.revokeObjectURL(elink.href); // 释放URL 对象
+      document.body.removeChild(elink);
     },
   },
 };
@@ -104,3 +120,4 @@ export default {
   height: 90%;
 }
 </style>
+

src/components/AnalyseModule/index.vue

@@ -18,7 +18,16 @@
             @click="print_()"
           >
           </el-button>
-
+          <el-button
+            v-if="original_data.image_id"
+            style="backgrount-color: #000; margin-right: 10px"
+            size="mini"
+            icon="el-icon-download"
+            circle
+            class="print_box"
+            @click="downloadImg()"
+          >
+          </el-button>
           <el-checkbox
             v-if="original_data.is_show"
             v-model="original_data.is_show.value"
@@ -91,6 +100,7 @@
         @selectChange="selectChange"
       ></SelectLineChartData>
       <SelectLineChart
+        ref="SelectLineChart"
         :chart_id="original_data.chart_id"
         :labers="original_data.labers"
         :keys="original_data.keys"
@@ -173,6 +183,9 @@ export default {
         }, 500);
       }
     },
+    downloadImg(val) {
+      this.$refs.SelectLineChart.savePieImg();
+    },
     // titleSelectData(val) {
     //   console.log(val);
     //   this.original_data.topic = val;

src/views/student/examination_questions/comment/index.vue

@@ -485,7 +485,7 @@ export default {
         chart_id: 'holdtobacco_bar_chart',
         title: '把烟',
         color: '#39c183f0',
-        // print_id: 'holdtobacco_bar_chart',
+        image_id: 'holdtobacco_bar_chart',
         obj,
         labers,
         keys,
@@ -531,6 +531,8 @@ export default {
         chart_id: 'flakeTobacco_bar_chart',
         title: '片烟',
         color: '#E6A23C',
+        image_id: 'flakeTobacco_bar_chart',
+
         // print_id: 'flakeTobacco_bar_chart',
         obj,
         labers,
@@ -579,6 +581,8 @@ export default {
         title: '甩把',
         color: '#39c183f0',
         // print_id: 'holdtobacco_bar_chart',
+        image_id: 'swingHandle_data_bar_chart',
+
         obj,
         labers,
         keys,