echarts 自定义图表导出图片

前言

　　今日在项目中遇到一个需求，需要点击按钮将echarts所绘制的相关图表导出。

1. 使用echarts自带的工具

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

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

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);
      }
    }

注：

1. 这里的this.myChart是vue中的写法，可以在初始化echarts实例时将其保存起来
2. 关于getDataURL的介绍，参考官方文档Api介绍

3.拓展

　　在实际开发中我们可能遇见，在页面中是一种样式，而要求导出的图表为另外一种样式。这时，我们可以初始化两个echarts,设置不同的样式，将需要导出的echarts隐藏即可。