echart儲存圖檔的兩種實作方式

1. echart本身自帶有toolbox的saveAsImage用以實作儲存圖檔，具體的option設定如下：

var option = {
        title: {
            text: data.name,
            x: 'center',
            y: '83%',
            textStyle: {color: "#333"}
        },
        color:['#5f67ea', '#f97363', '#008aff','#ff9000', '#00d4c3', '#00b1bc'],
        legend: {
            type: 'scroll',
            icon: 'circle',
            orient: 'vertical',
            x: 'center',
            y:'top',
            itemWidth: 5,
            itemHeight: 5,
            align: 'left',
            itemGap: 5,
            textStyle: {
                fontSize:12,
                color: '#222'
            },
            data: data.legend
        },
        tooltip: {
            trigger: 'item',
            formatter: "{b}<br/>{c}({d}%)"
        },
        toolbox: {show: 1, x: 'center', y: 'bottom', feature: {saveAsImage: {show: false, title: '儲存截圖', type: 'png'}}},
        series: [{
            name: data.name,
            type: 'pie',
            radius: ['26%','50%'],
            center: ['50%', '57%'],
            data: data.data,
            itemStyle: {
                normal: {
                    label: {show: true, formatter: "{d}%"},
                    labelLine: {show: true}
                }
            },
            labelLine:{
                normal:{
                    length:5
                }
            },
        }]
    }
    var countPieDwlx = echarts.init(document.getElementById("countPieDwlx"));
    countPieDwlx.setOption(option,true);
           

1. 但是由于echart自帶的圖檔下載下傳我沒有找到如何将下載下傳圖示去掉，直接使用自定義圖檔用以實作圖示儲存，是以我放棄了echart本身自帶的圖檔儲存方法，自定義了一個span添加的點選事件，實作将echart進行圖檔儲存。

html定義代碼段

<div class="pie-body-div">
   <div id="countPieDwlx" class="pie-content"></div>
   <span class="pie-save-span" onclick="savePieImg('dwlx')">儲存截圖</span>
</div>
           

echart初始化部分同【1】方法相同，隻是去掉echart自帶的toolbox部分就可以了，下面為自定義的圖檔儲存方法，使用起來比較靈活。

function savePieImg(type) {
  var picInfo= countPieDwlx.getDataURL({
       type: 'png',
       pixelRatio: 1.5,  //放大兩倍下載下傳，之後壓縮到同等大小展示。解決生成圖檔在移動端模糊問題
       backgroundColor: '#fff'
   });//擷取到的是一串base64資訊
   const elink = document.createElement('a');
   elink.download = "統計分析";
   elink.style.display = 'none';
   elink.href = picInfo;
   document.body.appendChild(elink);
   elink.click();
   URL.revokeObjectURL(elink.href); // 釋放URL 對象
   document.body.removeChild(elink)
}