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隱藏即可。