feat: echarts图表下载

Former-commit-id: 27e3dff661a360f682361e754ec07517c0308e58

src/views/dashboard/components/BarChart.vue

@@ -1,146 +1,195 @@
 <!--  线 + 柱混合图 -->
 <template>
   <el-card>
-    <template #header> 业绩柱状图 </template>
+    <template #header>
+      <div class="title">
+        业绩柱状图
+        <el-tooltip effect="dark" content="点击试试下载" placement="bottom">
+          <i-ep-download
+            class="download"
+            @click="downloadEchart"
+          ></i-ep-download>
+        </el-tooltip>
+      </div>
+    </template>
+
     <div :id="id" :class="className" :style="{ height, width }" />
   </el-card>
 </template>
 
 <script setup lang="ts">
-import * as echarts from 'echarts';
+import * as echarts from "echarts";
 
 const props = defineProps({
   id: {
     type: String,
-    default: 'barChart'
+    default: "barChart",
   },
   className: {
     type: String,
-    default: ''
+    default: "",
   },
   width: {
     type: String,
-    default: '200px',
-    required: true
+    default: "200px",
+    required: true,
   },
   height: {
     type: String,
-    default: '200px',
-    required: true
-  }
+    default: "200px",
+    required: true,
+  },
 });
 
 const options = {
   grid: {
-    left: '2%',
-    right: '2%',
-    bottom: '10%',
-    containLabel: true
+    left: "2%",
+    right: "2%",
+    bottom: "10%",
+    containLabel: true,
   },
   tooltip: {
-    trigger: 'axis',
+    trigger: "axis",
     axisPointer: {
-      type: 'cross',
+      type: "cross",
       crossStyle: {
-        color: '#999'
-      }
-    }
+        color: "#999",
+      },
+    },
   },
   legend: {
-    x: 'center',
-    y: 'bottom',
-    data: ['收入', '毛利润', '收入增长率', '利润增长率'],
+    x: "center",
+    y: "bottom",
+    data: ["收入", "毛利润", "收入增长率", "利润增长率"],
     textStyle: {
-      color: '#999'
-    }
+      color: "#999",
+    },
   },
   xAxis: [
     {
-      type: 'category',
-      data: ['浙江', '北京', '上海', '广东', '深圳'],
+      type: "category",
+      data: ["浙江", "北京", "上海", "广东", "深圳"],
       axisPointer: {
-        type: 'shadow'
-      }
-    }
+        type: "shadow",
+      },
+    },
   ],
   yAxis: [
     {
-      type: 'value',
+      type: "value",
       min: 0,
       max: 10000,
       interval: 2000,
       axisLabel: {
-        formatter: '{value} '
-      }
+        formatter: "{value} ",
+      },
     },
     {
-      type: 'value',
+      type: "value",
       min: 0,
       max: 100,
       interval: 20,
       axisLabel: {
-        formatter: '{value}%'
-      }
-    }
+        formatter: "{value}%",
+      },
+    },
   ],
   series: [
     {
-      name: '收入',
-      type: 'bar',
+      name: "收入",
+      type: "bar",
       data: [7000, 7100, 7200, 7300, 7400],
       barWidth: 20,
       itemStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: '#83bff6' },
-          { offset: 0.5, color: '#188df0' },
-          { offset: 1, color: '#188df0' }
-        ])
-      }
+          { offset: 0, color: "#83bff6" },
+          { offset: 0.5, color: "#188df0" },
+          { offset: 1, color: "#188df0" },
+        ]),
+      },
     },
     {
-      name: '毛利润',
-      type: 'bar',
+      name: "毛利润",
+      type: "bar",
       data: [8000, 8200, 8400, 8600, 8800],
       barWidth: 20,
       itemStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: '#25d73c' },
-          { offset: 0.5, color: '#1bc23d' },
-          { offset: 1, color: '#179e61' }
-        ])
-      }
+          { offset: 0, color: "#25d73c" },
+          { offset: 0.5, color: "#1bc23d" },
+          { offset: 1, color: "#179e61" },
+        ]),
+      },
     },
     {
-      name: '收入增长率',
-      type: 'line',
+      name: "收入增长率",
+      type: "line",
       yAxisIndex: 1,
       data: [60, 65, 70, 75, 80],
       itemStyle: {
-        color: '#67C23A'
-      }
+        color: "#67C23A",
+      },
     },
     {
-      name: '利润增长率',
-      type: 'line',
+      name: "利润增长率",
+      type: "line",
       yAxisIndex: 1,
       data: [70, 75, 80, 85, 90],
       itemStyle: {
-        color: '#409EFF'
-      }
-    }
-  ]
+        color: "#409EFF",
+      },
+    },
+  ],
 };
-
+const chart = ref<any>("");
 onMounted(() => {
   // 图表初始化
-  const chart = echarts.init(
-    document.getElementById(props.id) as HTMLDivElement
+  chart.value = markRaw(
+    echarts.init(document.getElementById(props.id) as HTMLDivElement)
   );
-  chart.setOption(options);
+
+  chart.value.setOption(options);
 
   // 大小自适应
-  window.addEventListener('resize', () => {
-    chart.resize();
+  window.addEventListener("resize", () => {
+    chart.value.resize();
   });
 });
+const downloadEchart = () => {
+  // 获取画布图表地址信息
+  const img = new Image();
+  img.src = chart.value.getDataURL({
+    type: "png",
+    pixelRatio: 1,
+    backgroundColor: "#fff",
+  });
+  // 当图片加载完成后，生成 URL 并下载
+  img.onload = () => {
+    const canvas = document.createElement("canvas");
+    canvas.width = img.width;
+    canvas.height = img.height;
+    const ctx = canvas.getContext("2d");
+    if (ctx) {
+      ctx.drawImage(img, 0, 0, img.width, img.height);
+      const link = document.createElement("a");
+      link.download = `业绩柱状图.png`;
+      link.href = canvas.toDataURL("image/png", 0.9);
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+    }
+  };
+};
 </script>
+<style lang="scss" scoped>
+.title {
+  display: flex;
+  justify-content: space-between;
+  .download {
+    cursor: pointer;
+    &:hover {
+      color: #409eff;
+    }
+  }
+}
+</style>