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.拓展