第一种 使用 html2canvas 对dom元素截图

    1.npm安装

npm install html2canvas

       yarn安装

yarn add html2canvas

    2.组件引入

import html2canvas from "html2canvas"

    3.代码

// 导出多张图表为一张图片
// dmo元素里的内容转换为canvas,并将canvas下载为图片
const download = () => {
  // 转换成canvas
  html2canvas(document.getElementById("echarts")).then(function (canvas) {
    var img = canvas
      .toDataURL("image/png")
      .replace("image/png", "image/octet-stream");
    // 创建a标签，实现下载
    var creatIMg = document.createElement("a");
    creatIMg.download = "图表.png"; // 设置下载的文件名，
    creatIMg.href = img; // 下载url
    document.body.appendChild(creatIMg);
    creatIMg.click();
    creatIMg.remove(); // 下载之后把创建的元素删除
  });
};

第二种 使用Echarts官方文档中的 getDataURL 方法

// 导出单个图表图片
function Export() {
  var img = new Image();
  // pieMyChart1 要导出的图表
  img.src = pieMyChart1.value.getDataURL({
    type: "png",
    pixelRatio: 1, //放大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");
    a.download = "图片.png" || "下载图片名称";
    // 将生成的URL设置为a.href属性
    a.href = dataURL;
    // 触发a的单击事件
    a.dispatchEvent(event);
    a.remove();
  };
}

第三种 使用Echarts官方文档中的 toolbox

toolbox: {
      show: true,
      orient: "vertical",
      left: "right",
      top: "center",
      feature: {
        saveAsImage: { show: true },  // 保存图表
      },
},

完整代码