Earchs自定义导出图片的三种方法你知道吗？

工作中难免会遇到导出图标为图片保存，包括多张和单张，和修改背景颜色等，以下列出三种方法，希望对你有用奥；

第一种，自定义导出，这种可以修改倍数和背景颜色

 ExportEarchsImg() {
      let img = new Image();
      // this.myChart为你实例化的Earchs对象
      // this.myChart = echarts.init(document.getElementById("earchs"));
      img.src = this.myChart.getDataURL({
        type: "png",
        pixelRatio: 1, //放大的倍数
        backgroundColor: '#999'/背景颜色
      });

      img.onload = () => {
        let canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        let ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        let dataURL = canvas.toDataURL('image/png');
        let a = document.createElement('a');
        let event = new MouseEvent('click');
        a.download = '图片' || '下载图片名称';
        // 触发a的单击事件
        a.dispatchEvent(event);
      }
    }

第二种，使用Earchs中toolbox配置方法

 toolbox: {
        show: true,
        feature: {
          saveAsImage: {
            show: true,
            excludeComponents: ['toolbox'],
            pixelRatio: 2
          }
        }
      }

第三种 使用插件

npm install html2canvas
import html2canvas from "html2canvas"

ExportEarchsImg(){
  // 转换成canvas
  html2canvas(document.getElementById("echarts")).then(function (canvas) {
    var img = canvas
      .toDataURL("image/png")
      .replace("image/png", "image/octet-stream");
    var creatIMg = document.createElement("a");
    creatIMg.download = "图表.png";
    creatIMg.href = img;
    document.body.appendChild(creatIMg);
    creatIMg.click();
    creatIMg.remove(); 
  });