echart 导出图片及自定义图片名称

1、展示图片

<template>

   <el-row>
      <div >
        <el-button @click="handleExportPic">导出pie</el-button>
       </div>
       <div id="echarts">
          <div class="el-table el-table--enable-row-hover el-table--medium">
          <div id="perChart" style="height: 270px;width: 100%"/>
        </div>
     </el-row>
</template>

2、常量定义 

       const myPerChart =null;

 3、绑定数据

 初始化echarts实例
  this.myPerChart = $echarts.init(document.getElementById("perChart"));
  // 绘制图表
  this.myPerChart .setOption({
    title: {
      text: "ECharts 入门示例",
    },
    tooltip: {},
    xAxis: {
      data: ["1月份", "2月份", "3月份", "4月份", "5月份", "6月份"],
      axisTick: {
        // 坐标轴刻度标签
        show: false,
      },
    },
    yAxis: {
      type: "value", // 类型数值轴
      min: 0,
      max: 40,
      splitNumber: 8, // 坐标轴的分割段数
      axisLine: {
        show: true,
      },
      axisTick: {
        show: false, // 隐藏刻度
      },
    },
    series: [
      {
        name: "展示的是月份表数据",
        type: "bar",
 label: {
          show: true,
          fontSize: 16,
        },
        data: [115, 288, 369, 560, 789, 898],
        itemStyle: {
          borderRadius: 5,
          borderWidth: 1,
          borderType: "solid",
          borderColor: "#76c0de",
        },
      },
    ],
  });

4、导出

handleExportPic(){
      var img = new Image();
      img.src = this.myPerChart.getDataURL({
        type: "png",
        pixelRatio: 2, //放大2倍
        backgroundColor: "#fff",
      });
      img.onload = function () {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);
        var dataURL = canvas.toDataURL("image/png");
        var a = document.createElement("a");
        var event = new MouseEvent("click");
        let strHead = '图片名称_';
        let currentTime = new Date().getTime();// 当前时间
        let tail = '.png';
        a.download = `${strHead}${currentTime}${tail}`;
        // 将生成的URL设置为a.href属性 '${strHead}${currentTime}${tail}'
        a.href = dataURL;
        // 触发a的单击事件
        a.dispatchEvent(event);
        a.remove();
      };
    },

转载请说明出处，希望对你有帮助。谢谢