echarts自定义图表导出图片

使用echarts自带的工具

echarts工具栏组件中有自带的图片下载功能，我们只需要在option中进行相关配置，就可以默认在右上角生成一个下载图标，进行下载。

配置如下：

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

自定义按钮下载

通过上述方式进行配置不满足项目所需求的功能，因此我们可以自定义按钮来实现。

Export() {
      let img = new Image();
      img.src = this.myChart.getDataURL({
        type: "png",
        pixelRatio: 1, //放大2倍
        backgroundColor: '#fff'
      });

      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属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
        a.download = '图片.png' || '下载图片名称';
        // 将生成的URL设置为a.href属性
        a.href = dataURL;
        // 触发a的单击事件
        a.dispatchEvent(event);
      }
    }